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
Пікірлер: 46
Exactly what I was looking for. It worked perfectly. Thank you!
Amazing video, very well explained.
Awesome teaching!
wow, so cool, thank you for your share, very help for me.
Wonderful
When releasing the mouse, how do I make the scroll bar not move down or up?
@sheeryhaddad
10 ай бұрын
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
thanx bud helped me alot
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?
Good work, really helpful video. :)
@CreateBeautifulThings
2 жыл бұрын
You're welcome. Thanks for watching
You the man. Respect
@CreateBeautifulThings
Жыл бұрын
You are so welcome! Thanks for watching
I love it
Thank you very much! Now, how can I make this a component so I can use this in another page as an asset
Very nice explanation... Thanks
@CreateBeautifulThings
2 жыл бұрын
You're welcome. Thanks for watching
Awesome, good job sir
@CreateBeautifulThings
2 жыл бұрын
Thank you so much. Thanks for watching
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.....
thank you ,well explained..
@CreateBeautifulThings
Жыл бұрын
You're welcome. Thank you for watching
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?
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
Thanks
Big thanks
@CreateBeautifulThings
2 жыл бұрын
You're welcome. Thanks for watching
Awesome but volume too low
how do you select the food and make the food appear in the text label after scrolling?
@CreateBeautifulThings
2 жыл бұрын
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
Nice video, i have one doubt when i leave slider in middle it is not staying there it is going back either end.?
@CreateBeautifulThings
2 жыл бұрын
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
2 жыл бұрын
@@CreateBeautifulThings thanks for your reply.
@VijayKumar-hp7xs
2 жыл бұрын
if you could make video on that would have been great for so many people.
@CreateBeautifulThings
2 жыл бұрын
Okay. I will plan and see. Thanks
hold shift while pressing arrow it's faster
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!
this is not scrollable this is draggable!!
too much confusing
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...