That progress bar color trick using linear gradient was pretty sweet ✨

That vinyl scratch zoom out to editing Sam transition was mint af!

I love the way you explain things. It’s easy to grasp concepts with the way you teach.

Amazing Sam, congrats on the video!!

The moment you said "I was thinking to add another div and style it so it shows the progress, but there is even more elegant way of doing it..." and then immediately snapped in my brain and I even said it out loud "LINEAR GRADIENT!!!". Funny because I was with my headphones and my wife was sitting in the same room and she was shocked whats going on... :))))

Man your videos are amazing! Thanks for teaching us! I had an Apple-like moment of "wow" in the middle of the video because the code is so clean and concise and you explain it so straightforward and it just works. So much elegance in the cleanliness of this that I definitely appreciate that many people may not. Oh yeah, it was the background linear gradient part where I was like.. ouuu yeah that's cool! lol

Very cool, thanks for sharing Sam.

Great video! Haven't used Framer Motion but it's about time to start learning.

really love your videos, thanks

Amazing content. Thanks for sharing!

This is awesome. I'm gonna try and and do a version with steps as well

Great video!

crazy good content as always

I think I’ve said it before, but I’ll say it again - This channel is criminally underrated!

@nonefvnfvnjnjnjevjenjvonej3384

2 жыл бұрын

All channels are until they are not

perfect, couldn't have been explained better!

awesome 😍

awesome framer motion slider 🍻

Framer Motion God

Thanks for this great content, really useful! Having followed along, I only noticed some minor issues with the slider on a mobile device. When you're not careful on there, the page scroll on a longer page tends to take over and the slider drag stops. There seem to be some open issues on the framer-motion repo regarding this. Yet, it's still very usable. Keep this type of content coming, can't wait for the next video!

@samselikoff

2 жыл бұрын

Great point, I should circle back and make it really polished on mobile! I didn't even consider that for this demo!

@timothymeade-on-twitter

2 жыл бұрын

Please do. Mobile is so important.

You are so thorough I wish you would teach your learning process... I always seem to know just enough... do you have tips for mastering things? it takes so long to learn by reading and experimenting for me..

There is a bug in this code: when you calculate the new value you do "newProgress * (max - min)", but it is not right. Consider this: min = 1, max = 100, than the actual range would be 0 - 99. What you need to do instead is this: newProgress * (max - min) + min

I have a general question. If you use this slider as a way to switch pages on a webpage (think iBooks on iOS, where you can drag the slider to move back and forward in a book). How would you go about snapping to a page? For example, you're at page 7, you slide just slightly and if the user has not dragged enough to reach page 8 - snap the drag handle back to page 7. I feel like this should be pretty simple and I've been staring at this problem for a long time now...

Maybe a stupid question. But how can I now embedd this in my framer website?

Can I please know vscode theme used in this video?

How would you add steps to this slider? 👀

Love the tutorial--helped me a ton! I found a trick in the Framer Motion docs for making the slider move to where you click and then be draggable in the same tap: www.framer.com/docs/gestures/###dragcontrols

@prasathsoosaithasan1281

Жыл бұрын

Thanks for the pointer!