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

Подписаться 11 тыс.

Просмотров 33 тыс.

50% 1

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

Опубликовано:

13 июл 2024

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 46

@marie91999 2 года назад

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

@jordanlee584 2 года назад

Amazing video, very well explained.

@amorning0 2 года назад

Awesome teaching!

@liualice3163 2 года назад

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

@pankajmeharchandani1581 10 месяцев назад

thanx bud helped me alot

@oscarmartinez-pc1nj Год назад

I love it

@Big_Anu Год назад

Wonderful

@MauroHernandez93 11 месяцев назад

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?

@someone_911 2 года назад

Good work, really helpful video. :)

@CreateBeautifulThings 2 года назад

You're 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

@kingdesignerr Год назад

Thanks

@chukymartin9764 Год назад

You the man. Respect

@CreateBeautifulThings Год назад

You are so welcome! Thanks for watching

@stickyyhead1904 Год назад

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

@arefehmoini9282 Год назад

thank you ,well explained..

@CreateBeautifulThings Год назад

You're welcome. Thank you for watching

@olaosebikanlateef1136 2 года назад

Awesome, good job sir

@CreateBeautifulThings 2 года назад

Thank you so much. Thanks for watching

@Kimardszn 2 года назад

Very nice explanation... Thanks

@CreateBeautifulThings 2 года назад

You're welcome. Thanks for watching

@benjaminwcl1730 2 года назад

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

@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.....

@assema7255 2 года назад

Big thanks

@CreateBeautifulThings 2 года назад

You're welcome. Thanks for watching

@jmrenteria100 5 месяцев назад

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?

@mercyokache5071 Год назад

Awesome but volume too low

@VijayKumar-hp7xs 2 года назад

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

@sibisanjay 2 года назад

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

@bartlomiejhaduch3924 2 года назад

hold shift while pressing arrow it's faster

@talhashaikh1435 2 года назад

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!

@bananaeater4332 7 месяцев назад

this is not scrollable this is draggable!!

@nafisa23official Год назад

too much confusing

@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...