Figma Scrollable bar animation | Design, Create and Smart Animate Scroll bar easily using figma
HTML-код
- Опубликовано: 12 июн 2024
- 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
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.
thanx bud
helped me alot
Good work, really helpful video. :)
You're welcome. Thanks for watching
Wonderful
I love it
When releasing the mouse, how do I make the scroll bar not move down or up?
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
You the man. Respect
You are so welcome! Thanks 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?
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?
Very nice explanation... Thanks
You're welcome. Thanks for watching
thank you ,well explained..
You're welcome. Thank you for watching
Awesome, good job sir
Thank you so much. Thanks for watching
Thanks
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 very much! Now, how can I make this a component so I can use this in another page as an asset
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
Yes that is the problem with this kind of approach you cannot control scrolling.
Yeah how can I do ?
Fixed? Somebody
Big thanks
You're welcome. 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.?
Oh for that you would have to create multiple frames for each section. But this tutorial was meant to illustrate the general concept
@@CreateBeautifulThings thanks for your reply.
if you could make video on that would have been great for so many people.
Okay. I will plan and see. Thanks
how do you select the food and make the food appear in the text label after scrolling?
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
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
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!
Awesome but volume too low
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
pls tell me also
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...