How to Add a Realistic Slider Animation in Figma || Crema

[@Cremalab]

Check out our updated slider tutorial! kzbin.info/www/bejne/iYmQZ2qhnJZ-iq8

[@michellezhu1559]

I was designing a slider and wondering about the same thing. Googled it, you popped up, watched the whole tutorial! Love Figma even more! Thanks for the great video!

[@Cremalab]

Thank you for sharing that! Glad this video could help out, we love Figma.

[@12345ctw]

This is so far the simplest tutorial on how to created a Slider Animation in Figma. It's amazing how on drag animation can be used to create a slider animation. Thank you so much for sharing it!

[@Cremalab]

Thanks for your feedback, Jordan!

[@Internetuser1215]

I didn’t know it was this easy omg😭. Thank you!

[@Cremalab]

Happy to help!

[@StefanKRV]

Thank you so much Sean! This was exactly what I was looking for. Figma keeps amazing me as well! Cheers from Bulgaria.

[@Cremalab]

Thank you Stefan!

[@ricard289]

Amazing video!! Just one question. Is there a way to have the handle stay at a location along the line when it's released? For example to stop at number 200 or 300. Thanks a lot!!

[@byzdgn]

no it seems that you need a horizontal scroll action, an unfortuntly a horizontal scroll does not afford any kind of animating counter :( at least I have not been able to find any solution to it

[@sayehghahari1206]

Ya I have the same problem. Because there's no point if it cant stop at other numbers

[@byzdgn]

@@sayehghahari1206 here is a hint that took me to figure out weeks: figma has its own limits. and this is one of them. you should upgrade to a more interactive prototyping tools lilke protopie principle or anima. figma is a screen based animation tool, to achieve sth like this you need object triggered prototyping tool. even with interactive components figma cannot help you out always

[@PhG1961]

Excellent ! I was already looking at sliders within Figma and you made this easy for me ! Thnxs for sharing !

[@mansigupta5665]

This was amazing. A short video yet so informative. Loved every bit of this.

[@Cremalab]

Thank you, Mansi!

[@p-a-u-l-]

11:15 How can you shift it up? Help me

[@ruwanfernando1903]

awesome tutorial Sean. Easy subscribe. Well paced and clearly spelled out instructions!

[@Cremalab]

Thanks for watching!

[@oseniahmed5728]

Well explanatory. Thanks so much.

[@jordihoven2349]

Insane how Figma contextually animates those two separate elements. Coming from AdobeXD my mind is blown...

[@kennydoan7997]

You should be able to do this in Adobe XD with auto animate.

[@GeorgeBrooksKC]

Figma is leading the pack for sure!

[@romaric.i5004]

hi i love your videos, please help me. at 10:38 what do you press on the keyboard to scroll through the numbers?

[@Cremalab]

I've selected all the number layers in the left Layers panel and I'm holding Shift and pressing the up arrow on my keyboard. Holding Shift lets you move objects by 10px increments as opposed to single pixels by just pressing the arrow keys on a selected object. - Sean

[@sorayaip13]

@@Cremalab it doesn't work for me. do you know what could the problem be?

[@saraglez7681]

Thank you very much for this tutorial! really helpful!

[@Cremalab]

Glad it was helpful!

[@radulica]

This is so helpful. Thank you so much for the video!

[@nilanjanabose57]

Great tutorial!

[@doublejointed4964]

Appreciate this! Thank you for making it look super easy

[@aaronk6132]

Im now defiently going to try and incorporate this in my designs. Curious, is it possible to make it were the slider follows a rounded path like circle?

[@stevethurman-stevemagi]

Extremely helpful! Thank you

[@Cremalab]

Thank you for watching!

[@IRUSN4F]

damn, you are so amazing. We need more tutorial like this!!!

[@GeorgeBrooksKC]

Is there other features or apps you’d like to see?

[@kookieskookie3729]

How did you do the send button animation? I'm learning Figma right now and that's the effect I want to try, but I couldn't find the tutorial for it. Thank you!

[@joaodeiro2535]

i think you want to do the "open overlay", try "how to do modal overlay on figma"

[@angelicareis606]

Thank you, that helped me a lot!

[@cijohnbaby6885]

fire video, thanks bro

[@CarlosMBonilla]

Really helpful! Thanks for sharing!

[@Cremalab]

Glad it was helpful!

[@ЕвгенийКостюшин-ь5п]

Thanks, Sean! Great video!

[@Cremalab]

Thank you for watching!

[@msj8285]

Thank you, this was awesome!

[@Cremalab]

Thank you for watching!

[@meizerone2690]

Figma is just mind-blowing

[@PhillPhoenix777]

Great video, thank you very much! Do you or does anybody here know how can I turn this frame animation into a component? So I can 'drop it' in a menu, for instance, and have the effect there? Haven't been able to make such a component

[@alexosiichuk9603]

Would be nice to see how to Copy and Paste layer in the the place 1. Between frames 2. Over selected layer

[@arthurmon09]

Am I missing something? My version forces me to select additional Smart Animation settings (e.g. Ease in, 600ms), which does not allow me to control the slider handle. I can't find any way to turn this off. I have followed the directions exactly. Please help. Thanks.

[@cakepoprush1372]

Thank you for this tutorial! So happy with the outcome. Although, when i added a frame behind both the elements, the interaction stopped. It goes as follows : Drag | Navigate to > frame rather than the element made. How do i fix this?

[@jineetvaishnav238]

Thanks for the content

[@sandraozga1991]

wow great explanation I managed to do 5 point scale. THanks so much !!!!

[@shivanikalkeri2370]

can you please tell how did you do the delayed button and the end screen

[@praveenremix6421]

can we release mouse in between values?

[@ezbo1883]

Hey great tutorial. Is there a way to have the handle stay at a location along the line when it's released? (the frame snaps to on and off states) Thank you!

[@ricard289]

The same question, I have tried several stuff, but unsuccessfully, did you find a solution?

[@paolaruizs]

hey! How do you shift the frame as you did on 11:15?

[@helenaeastwood8982]

My question exactly! I have no clue what he did here and I can't figure out how to get my numbers to scroll!

[@leow3019]

This is awesome! One question I have how can you make the sliders work when you put it into a frame. Lets say you need this slider in a form with other input fields, I tried to put it within the form frame but then the interaction just doesnt work when it sits inside another frame?

[@Cremalab]

Hmm I can’t immediately think why it wouldn’t work when it’s a part of another frame. In my example I have the slider frame inside the larger phone parent frame and it works fine. I would just make sure you're setting the interactions on the correct elements. I’ve had issues when you take your slider frame and componentize it. However if you create interactive components it works well. - Sean

[@haleemulhassan9158]

Awesome stuff!

[@Cremalab]

Thank you, Haleem!

[@maychai2101]

I did it!!!! YAY!!! Thanks dear!!!

[@Cremalab]

Great job!

[@thetravellinglehak]

It was very useful thanks alot! 😊 Come up with more such tricks.

[@Akshatgiri]

Nice this was pretty useful!

[@Cremalab]

Glad it was helpful!

[@mahsamansuri5581]

great!!thank you very much.

[@ivondarmanto6769]

Hi, I have a question, can we have auto-layout (in order to get a responsive screen) at the same time with "Dragging"?

[@mohammedfahim3447]

This is amazing!

[@Cremalab]

Thanks, Mohammed!

[@phucktichatuporn5854]

How to get a new frame connected to a first frame? Thanks for this awesome video.

[@pedrenric]

Great, I have a toggle on and off slider, yay! Now how do drag it to the number I want it to stay on? You didn't taught how to select the exact spot where you'd want to put it on.

[@Cremalab]

Hi Pedro! We've received many requests for this and we're hoping to put a video together in the future!

[@oluseyiemmanuel8638]

Whoa! this is really interesting.

[@joedixon06]

Thank you. Very much.

[@meniged]

What if you want to stop at 300? or 356 for ex??

[@Andrea_NK]

it was amazingly helpful, btw i dunno if im doing something wrong? it just go all the way it doesn't stop in the middle.... how can i do that ????'

[@UltanMashup]

Helpful but how do you back the slider go back? Doesn't that need another interaction in the prototype?

[@sepidekhaneghaei8904]

Really appreciate

Thanks for the tutorial :). I just wanted to know how can I put it in another frame as a button? For example, to copy the component and place it in the new frame? I ask because if I do that, you need to copy every part of it and when checking the prototype together with the rest of the app on my phone screen it does nothing. I mean, to use it as a slider to indicate you want to confirm a payment. I don't know if I explain myself, hahaha.

[@MarcusVinicius-yd9kz]

Awesome!

[@UmeshKumarMeher]

Thank you so much 😊 really helpful

[@Cremalab]

Glad it was helpful!

[@michaelshivers88]

This is great! How would you go about adding multiple interactive sliders to a frame?

[@ico.oliveira]

Wondering the same...

[@talhashaikh1435]

but how to imbibe the slider frame into main frame like iphone max pro or else?

[@basantrajmohan8716]

You did not show us the delayed call to action buttons tuttorial!?? i was waiting for that :(

[@JerryOhh]

How to add sound or music in figma?

[@aribonzi]

Hi, man! I don't know if somebody ask you that but i want to know how you can stop at one number, for example 200 or 400. I did what you explain it but I couldn't. Thanks for the video. It was easy to copy on figma.

[@TheFrankieFoster]

Great Video. Thanks. Is there a way to create several independent sliders in the same screen?

[@Cremalab]

Yep! You'll just have to assign each slider handle its own "On Drag" interaction and make sure it corresponds with its respective second frame. You'll likely end up with more overall frames to account for all the variations of slider handle positions. - Sean

[@Barrrt]

Dude, thanks so much for this. This is epic. Also, I really like the pace of the explanation and that you go into the details without being slow about it. I find it hard to finish the Figma tutorials but this I can watch. I'm still flabbergasted that smart animate linked the numbers to the scrollbar oO. Figma has been amazing, so far. Great work man! Curious how you made the rest of this sexy interface. I love the delayed button and the fullscreen animation at succes! With these techniques I can really make an interface suave :-) You asked to let you know in the comments if this helped, so here I am: it helped :-)

[@Cremalab]

Hey thanks, Barrrrrt! Glad it helped.

[@terryloyd5027]

My numbers in the frame are not scrolling up. Is there something I am missing ? I framed them and clipped it but cant scroll through the options

[@juhichoubey4984]

Amazing

[@Cremalab]

Thank you for watching!

[@joakimtoll9845]

Thanks for the tutorial! It was super helpful! Question though: Do you know if it's possible to make this happen in a circle instead of a linear track? :)

[@Cremalab]

I gave it a test and I don't immediately see a way it can be done. It seems the "On Drag" interaction only works along a linear path. So you could feasibly do a slider along some angle but not along a circular path. It would be awesome if you could animate along a designated path! - Sean

[@joakimtoll9845]

@@Cremalab Thanks. I agree!

[@nesapabakht8401]

THANK YOU

[@leipeindo]

I almost had it.. Works a bit differently with a Windows PC compared to a Mac(book). - How do I shift it up like 11:15? - And why do my numbers shifts from 50 instant to 75? Seems like there are none in-between steps, slides instandly from left to the right.

[@Cremalab]

To shift the numbers up, I'm just holding the Shift key and pressing up on the arrow key. Holding Shift lets you move elements by 10px increments. The instant animation from left to right might be happening for a couple reasons. First, it may just be that the elements of the slider aren't named exactly the same in the layer panel on the left. For example, Handle 1 in the first frame might be Handle 2 in the next frame. Or Slider 1 might be Slider 2. If the names are inconsistent, it won't animate properly. This change in layer name can happen automatically when you copy and paste pieces. Second, I've noticed a limitation in component instances. If you have your slider set up as a main component and you're using instances of them in your frames, they also don't seem to animate correctly. So the fix might be using only primary components in your slider design. Or not componentizing any of your slider elements. I hope that helps! - Sean

[@fintancollier]

@@Cremalab Thank you 🙏🏼

[@AlibekKulseitov]

start from 1:30. I cant understand no one interested in talk at the begining but video is helpfull

[@Cremalab]

Thanks for the feedback, Alibek!

[@djhazak]

Hi, the animation working perfectly outside of the big frame (phone frame). but when I tried to drag the frames to the big frame the animation not working (I got a fade animation)

[@zed22065]

What software are you using for recording?

[@Cremalab]

We used a software called Loom to record this video!

[@КристинаКазань]

Thanks, suppper cool! You r just fantastic ✨

[@Cremalab]

Thank you!

[@brunobezerranepomuceno]

How did you do the send button animation? Thanks

[@Cremalab]

Hey, Bruno! The send button exists on both Frame 2 and Frame 3 (in my prototype I've labeled those frames Slider / 500 and Slider / Send respectively). In Frame 2, the send button is present but the opacity is turned all the way down to 0% so you can't see it. In Frame 3, that same button has the opacity set to 100%. So when the prototype transitions from Frame 2 to Frame 3, the button fades in. The last piece is that the button has a delayed animation attribute that allows it to animate after the slider is dragged all the way to the right. You can see that in action at 2:20 Hope that helps! - Sean

[@brunobezerranepomuceno]

@@Cremalab Sean, thank you so much for your help and your time.

[@francoalvarez4343]

Nice

[@marcgarridopuig2932]

Thxs!!

[@Cremalab]

Thanks for watching!

[@massimosanguedolce7614]

Thanks a lot for your super usefull video ☺️ Is there any solution to integrate this slidebar in a overlay menu?

[@ArtChickTV]

this is great

[@Cremalab]

Thanks for watching!

[@Mangitaseasyrecipes]

How to make a curve slide effect?

[@DzsomaDzsominik]

Hello! First of all thank you very much for the tutorial, it helped a lot. I am working on an app and I want a slider rating thing in it, but when I move 1 of the sliders, all of them are moving with it. How can I make them work separately? Thank you for your help!

[@ernestson8871]

This is great! I wonder if the slider could be 2 different variants of a component?

[@ernestson8871]

I tried it, Figma doesn't like it as a component or as a variant set - very interesting!

[@Cremalab]

@@ernestson8871 It's frustrating! From what I can tell, the limitation of using a component instance is due to the "On Drag" interaction. Other interactions (like "On Click") seem to animate properly. But unfortunately, "On Drag" is critical to the slider functionality. I did have some success with it animating properly if each iteration of the slider is itself a main component and not an instance. But that defeats the purpose of a main component with instances. - Sean

[@eramanpreetsingh8435]

sir its work good but its not stop in 200,300 what i do tell me plz i need for website

[@laurenshurley6473]

I struggled with figuring out the relationship between frame "clipping" behaviour and the constrains set - to have your text behave the same way as Sean's, make sure it's set to left & top!

[@scyxrazor473]

I still cant figured out how to make the slider stop in the middle for example I want to stop it at 300. I did get it functional. I did 5 frame and connect each other but the slider cannot slide smoothly from 100 to 500. It will stop at every point, 100, 200, 300 and so on. The slide will not go from 100 to 500 because of other frames. Do you have solution for this?

[@UmarFarooq-qq5em]

Make more videos on it

[@aj20ad]

Thanks

[@elegantscience]

This is great, But How do I get that animation into an exiting interface in Figma? Everytime I transfer the frames into another frame of an overall website screen, the animation becomes imoperable and the "drag" just zooms in on the first frame and does nothing.I am putting it into the overall page frame but it doesn't work.

[@GothGod1776]

Howard I'm having the same problem. None of these how to's seem to show that step which I find frustrating. Have you solved this issue yet?

[@zuojianing1800]

Idk why I cant move the numbers, when I move those numbers, it automatically moved itself out from the frame, help.

[@abcdude321]

I tried to do this with the new Interactive Components beta and wasn't able to replicate using components instead of 2 frames. Have you been able to get this to work using Interactive Components?

[@Cremalab]

Great question! I haven’t played a ton with Interactive Components but the little I’ve done has been fun and promising. I just gave this a try and was able to create a single interactive component that slides as you would expect. Here’s what I did: 1. I created two slider components - one with the handle on the left side and one with the handle on the right side. 2. I combined them into a variant and gave them a property name of Position and called one Left and one Right. 3. I selected the handle element of each component and assigned an On Drag + Change To interaction. 4. I selected the Smart Animate animation. That was enough to produce the type of interaction I expected! - Sean

[@noaakshay]

how to move upwards that numbers in windows because it is not working Shift+top arrow is not working

[@Cremalab]

What I’m doing at 10:34 is selecting the individual numbers within the frame and not the frame itself. Then, with those numbers selected, I’m holding ship and pressing the up arrow. Without seeing your file, I’m not exactly sure what’s going wrong but hopefully this adds some clarity and you can get it to work! - Sean

[@resty1672]

I tried this all went well except on the last step,it seems the animation auto-play itself rather than allow my manually drag along, what might be the problem? Thanks for your tutorial

[@Cremalab]

Hey, Vivian! We're working on an updated video that will cover your question + more! Keep an eye out for that here in the next week or two.

[@Cremalab]

Yeah, this is really frustrating - I've had it happen many times. From what I can tell this can happen for a couple reasons. First, it may just be that the elements of the slider aren't named exactly the same in the layer panel on the left. For example, Handle 1 in the first frame might be Handle 2 in the next frame. Or Slider 1 might be Slider 2. If the names are inconsistent, it won't animate properly. This can happen automatically when you copy and paste pieces. Second, I've noticed a limitation in component instances. If you have your slider set up as a main component and you're using instances of them in your frames, they also don't seem to animate correctly. So the fix might be using only primary components in your slider design. I hope this helps! - Sean

[@bekabuchashvili]

wow that's clever

[@Cremalab]

Thank you, Beka!

[@ambertsai63]

what can i do if i just want it to stay in the specific number? cuz now is automatically go to 500 when dragging.

[@Cremalab]

I find this automatic sliding happens when the slider is turned into a component (which is a bummer because I prefer to turn frames into components early on in order not to have to duplicate work). - Sean

[@tylerking5985]

Why does my slider handle keep sticking to either side?

[@Cremalab]

Hmm, it could be number of reasons. But I’d make sure the elements that make up your slider have consistent naming and be sure to add the “On Drag” transition to the handle element specifically and not a group or frame. Apologies if that’s too broad but without seeing it, I’m not sure how to diagnose. - Sean

[@nandakishore423]

Please teach parallax effect and scroll responsive design in figma I am waiting from time

[@Cremalab]

Hi Nanda! We're working on getting some more videos out, we just have limited availability right now. We'll add this request to our list of videos to look into!

[@javariakhan1680]

So what shall we do if we want to stop at, let's say, 300? Scrolling the handle is in figma's control too since mine doesn't stop in the middle if I want it to stop :/ Help

[@Cremalab]

Hi Javaria, We're working on an updated video where we'll cover your question and others. Keep an eye out for that in the next few weeks. Thanks for watching!

[@sachx7607]

please include key buttons in video, i'm beginner, it'll make it more easier. thanks!

[@Cremalab]

Will do, thanks for the suggestion!

[@qatarw1081]

can it stop in the middle? like users could stop wherever they like, thanks!!!!!

[@Cremalab]

Hey, Qatar! We're working on an updated video that will cover your question + more! Keep an eye out for that here in the next week or two.

[@Cremalab]

It can! You'll just simply make a version of your slider that stops in the middle of the track. So you'd have a frame where the slider handle starts at far left, a second frame where the handle is in the middle, and a third frame where the handle is far right. You'll then assign an "On Drag" interaction to those handles to move between those various frames. Hope that helps! - Sean

[@jeeiee_com]

❤️❤️❤️

[@patrickdu7ra]

Came for the tutorial stayed bc he's cute

[@patrickdu7ra]

@@jonathanmotion yes!

[@younghirsch]

Video starts at 2:42, thank me later