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

  • @marie91999
    @marie919992 жыл бұрын

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

  • @jordanlee584
    @jordanlee5842 жыл бұрын

    Amazing video, very well explained.

  • @amorning0
    @amorning02 жыл бұрын

    Awesome teaching!

  • @liualice3163
    @liualice3163 Жыл бұрын

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

  • @Big_Anu
    @Big_Anu Жыл бұрын

    Wonderful

  • @stickyyhead1904
    @stickyyhead1904 Жыл бұрын

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

  • @sheeryhaddad

    @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

  • @pankajmeharchandani1581
    @pankajmeharchandani15819 ай бұрын

    thanx bud helped me alot

  • @MauroHernandez93
    @MauroHernandez9311 ай бұрын

    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
    @someone_9112 жыл бұрын

    Good work, really helpful video. :)

  • @CreateBeautifulThings

    @CreateBeautifulThings

    2 жыл бұрын

    You're welcome. Thanks for watching

  • @chukymartin9764
    @chukymartin9764 Жыл бұрын

    You the man. Respect

  • @CreateBeautifulThings

    @CreateBeautifulThings

    Жыл бұрын

    You are so welcome! Thanks for watching

  • @oscarmartinez-pc1nj
    @oscarmartinez-pc1nj Жыл бұрын

    I love it

  • @ArunSingh-bc8sc
    @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

  • @Kenechukwuezeofor
    @Kenechukwuezeofor2 жыл бұрын

    Very nice explanation... Thanks

  • @CreateBeautifulThings

    @CreateBeautifulThings

    2 жыл бұрын

    You're welcome. Thanks for watching

  • @olaosebikanlateef1136
    @olaosebikanlateef11362 жыл бұрын

    Awesome, good job sir

  • @CreateBeautifulThings

    @CreateBeautifulThings

    2 жыл бұрын

    Thank you so much. Thanks for watching

  • @ArunSingh-bc8sc
    @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.....

  • @arefehmoini9282
    @arefehmoini9282 Жыл бұрын

    thank you ,well explained..

  • @CreateBeautifulThings

    @CreateBeautifulThings

    Жыл бұрын

    You're welcome. Thank you for watching

  • @jmrenteria100
    @jmrenteria1005 ай бұрын

    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?

  • @benjaminwcl1730
    @benjaminwcl17302 жыл бұрын

    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

    @antispiral8508

    Жыл бұрын

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

  • @stickyyhead1904

    @stickyyhead1904

    Жыл бұрын

    Yeah how can I do ?

  • @papykillme

    @papykillme

    Жыл бұрын

    Fixed? Somebody

  • @kingdesignerr
    @kingdesignerr Жыл бұрын

    Thanks

  • @assema7255
    @assema72552 жыл бұрын

    Big thanks

  • @CreateBeautifulThings

    @CreateBeautifulThings

    2 жыл бұрын

    You're welcome. Thanks for watching

  • @mercyokache5071
    @mercyokache5071 Жыл бұрын

    Awesome but volume too low

  • @sibisanjay
    @sibisanjay2 жыл бұрын

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

  • @CreateBeautifulThings

    @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

  • @VijayKumar-hp7xs
    @VijayKumar-hp7xs2 жыл бұрын

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

  • @CreateBeautifulThings

    @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

    @VijayKumar-hp7xs

    2 жыл бұрын

    @@CreateBeautifulThings thanks for your reply.

  • @VijayKumar-hp7xs

    @VijayKumar-hp7xs

    2 жыл бұрын

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

  • @CreateBeautifulThings

    @CreateBeautifulThings

    2 жыл бұрын

    Okay. I will plan and see. Thanks

  • @bartlomiejhaduch3924
    @bartlomiejhaduch39242 жыл бұрын

    hold shift while pressing arrow it's faster

  • @talhashaikh1435
    @talhashaikh14352 жыл бұрын

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

  • @amanie4cures

    @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
    @bananaeater43326 ай бұрын

    this is not scrollable this is draggable!!

  • @nafisa23official
    @nafisa23official Жыл бұрын

    too much confusing

  • @paulinaledesma5276
    @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

    @ArunSingh-bc8sc

    Жыл бұрын

    pls tell me also

  • @ArunSingh-bc8sc

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