Figma Scrollable bar animation | Design, Create and Smart Animate Scroll bar easily using figma

In this video i will show you how to design and create a scrollable bar animation using figma. Watch and learn.
It goes by many names and is also referred to as the figma scroll menu, scroll bar, scroll animation or scrollbar. In this example I demonstrate a figma vertical scroll

[@marie91999]

Exactly what I was looking for. It worked perfectly. Thank you!

[@jordanlee584]

Amazing video, very well explained.

[@amorning0]

Awesome teaching!

[@liualice3163]

wow, so cool, thank you for your share, very help for me.

[@pankajmeharchandani1581]

thanx bud
helped me alot

[@jmrenteria100]

This work perfectly. However, when I add the frame with the scroll bar into another frame (phone screen) the animation isn't so smooth. The scroll bar jumps from the top of the bar to the bottom without being able to see the middle content. How do I fix this?

[@stickyyhead1904]

When releasing the mouse, how do I make the scroll bar not move down or up?

[@sheeryhaddad]

i'm struggling with the same thing, like i just want to stop in the middle but it goes up or down on it's own

[@oscarmartinez-pc1nj]

I love it

[@MauroHernandez93]

Didn't know this neat trick. Thanks for sharing!
Do you know if there's a way to have vertical scrolling interact automatically with the scroll bar?

[@Big_Anu]

Wonderful

[@ArunSingh-bc8sc]

Thank you very much! Now, how can I make this a component so I can use this in another page as an asset

[@chukymartin9764]

You the man. Respect

[@CreateBeautifulThings]

You are so welcome! Thanks for watching

[@ArunSingh-bc8sc]

Thank you very much! Now, how can I make this a component so I can use this in another page as an asset Pls sir i am stuck at this part.....

[@someone_911]

Good work, really helpful video. :)

[@CreateBeautifulThings]

You're welcome. Thanks for watching

[@kingdesignerr]

Thanks

[@arefehmoini9282]

thank you ,well explained..

[@CreateBeautifulThings]

You're welcome. Thank you for watching

[@Kimardszn]

Very nice explanation... Thanks

[@CreateBeautifulThings]

You're welcome. Thanks for watching

[@olaosebikanlateef1136]

Awesome, good job sir

[@CreateBeautifulThings]

Thank you so much. Thanks for watching

[@benjaminwcl1730]

i realise the scroll bar cannot stop in the middle or anywhere not at the end of the sides because the scroll bar will move away by itself

[@antispiral8508]

Yes that is the problem with this kind of approach you cannot control scrolling.

[@stickyyhead1904]

Yeah how can I do ?

[@papykillme]

Fixed? Somebody

[@assema7255]

Big thanks

[@CreateBeautifulThings]

You're welcome. Thanks for watching

[@sibisanjay]

how do you select the food and make the food appear in the text label after scrolling?

[@CreateBeautifulThings]

The purpose of this tutorial is to demonstrate the scroll effect. What you are calling for is a select menu design and I have a video on that. It's called figma select menu. Thanks for watching

[@VijayKumar-hp7xs]

Nice video, i have one doubt when i leave slider in middle it is not staying there it is going back either end.?

[@CreateBeautifulThings]

Oh for that you would have to create multiple frames for each section. But this tutorial was meant to illustrate the general concept

[@VijayKumar-hp7xs]

@@CreateBeautifulThings thanks for your reply.

[@VijayKumar-hp7xs]

if you could make video on that would have been great for so many people.

[@CreateBeautifulThings]

Okay. I will plan and see. Thanks

[@talhashaikh1435]

how to.fit this in overlay ..suppose this screen is an overlay than how to do that after creating this scroller

[@amanie4cures]

Not sure if you are still stuck on this, but I came across this scenario too. All the steps are the same, but instead of "Navigate to", specify "Swap overlay" in the interaction details. This ended up working for me. Hope that helps!

[@bartlomiejhaduch3924]

hold shift while pressing arrow it's faster

[@mercyokache5071]

Awesome but volume too low

[@nafisa23official]

too much confusing

[@bananaeater4332]

this is not scrollable this is draggable!!

[@paulinaledesma5276]

Thank you very much! Now, how can I make this a component so I can use this in another page as an asset

[@ArunSingh-bc8sc]

pls tell me also

[@ArunSingh-bc8sc]

I got it so first remove all interactions, then select all frames and create multiple component set and u will have a option on your right to combine them as a variant, click on it and then put interactions...