How to Create a Scroll Bar Animation in Figma Using Smart Animate!
HTML-код
- Опубликовано: 18 ноя 2022
- In this video I will be using drag and smart animate to create the scroll animation with a scroll bar. Using these same tools we can also make the scroll bar move when dragging the content!
Хобби
I really enjoyed the video demo! However, I noticed that the interaction currently simulates dragging rather than scrolling. Is it possible to animate the Figma scrollbar to reflect actual scrolling behavior?
straight forward and well explained! thank you
This is great! Thank you sm :)
how did you scroll through the frame within design mode? 3:18
Thank you for this bro, its really easy to understand. Continue making dude, worth a sub
learned a lot in a short video, this is perfect thank u!
Thank you for the short video! Worked on my components too💚
You're welcome!
absolutely perfectvideo, super clear and easy thankyou so much man!
You're welcome!
For desktop prototype Is it possible to make the scrollbar thumb move as you scroll with the mouse wheel while you hover the outer frame? (instead of dragging the content). cheers for vid! :)
clear and easy, many thanks 👍
Thanks a lot for this tutorial. You're saving my life 🥺
You’re welcome 😊
Very useful! Thank you so much!
So impressed, thank you! That unsplash widget too… 🤯
Glad you like it!
Simple + Easy + Useful = My kinda thing.
Great video!
Glad you enjoyed it
Thanks! I had an issue with a horizontal scrolling table but I realized I was adding the drag interaction to the "viewport" instead of the table itself. Just a heads up in case it helps someone.
Excellent!
its good but is there any way to make it like don't go all the way down or up, like when I put it in the middele it goes down or up
Thank you!
Thank you very much, you're a life saver.
You're welcome!
Hi Bro i am Suresh From India.
thank you bro...
I am creating a webpage design for a fictional website. Will this method work if I make components that I can reuse it scroll on different webpage designs?
Great guide! thanks))
Glad it helped!
For unsplash, what is the windows command for choosing multiple images?
When releasing the mouse, how do I make the scroll bar not move down or up?
I'm struggling with this too
how do you move the focus to the bottom of the boundary box?
thank youuu
Great tutorial, thank you! Just a question... in the second frame, how do you manage to scroll the list? Any shortcut or something like that?
Hey, I'm glad you like it. I scrolled the list with the mouse while holding down the Shift key.
@@ProductSensei77 This isn't working for me I can't find how to do this anywhere online XD
Yeah this isn’t working for me either.
@@eatmemane I ended up figuring it out. You have to make sure Absolute Position is checked!
I have an important issue, the scroll drag works good but when the list moves looks over other layers with some opacity. (clip content is activated)
Thanks Man
You're welcome!
Great tutorial, I wondered if you could help me with something: How can I make this animation and apply it to another frame that i can prototype? for example; I have a frame which is macbook 16 inch with my webpage design in it, and within that I want to have this frame which is a scrollable textbox.
Did you figure this out by chance? Trying to do the same.
@@zorcycle I did, but I cant remember. I'll take a look tomorrow and get back at you! it wasn't to complicated .
@@lflxko3912 Thanks for getting back, much appreciated. I was able to figure it out too (eventually) although I haven’t figured out what exactly I did differently.
I did all of the same steps and then made them a component set and it worked perfectly.
Is it possible to stop scroll in the middle or any point ?
can i do that for website design？
bro can u do this without dragging? just scrolling only?
How do I scroll down to the last comment within the list of items? minute 3:21
Thank you!
how do made it as componant and how to use it in a single part of my page???
Thanks
No problem!
HOW DID YOU SCROLL IN THAT LAYOUT?
hey after designing this when I put that into the frame , its not working
Hi! love the video but for my prototype, it doesn't work smoothy and the scroll bar dosen't move with the contents?
Be sure to move your content on the second frame and enable smart animation.
@@ProductSensei77 Same issue here, I made sure to move the content and enabled smart animation but still does not work
@@jacquelinetse same issues....could you say say some solution for this....
I wanted to do something like this on an overlay animation but it is not working. Can you give me any clue?
Sure, can elaborate on the issue a little bit more?
3:18 How to perform that scrolling without entering present mode? Can you share the keyboard shortcut for Windows?
seconding this! I'm confused :(
Hey, I selected the auto-layout and moved it upwards with my mouse - no keyboard needed. The frame containing the auto-layout has the "clip-content" option enabled.
Actually, it's not stopping middle when we stop, scrolling A to Z in single scroll.. what to do ?
Did you ever found out the solution?
@@juliavdwal yes, I create a frame and make into' scrolling' horizontal or vertical it worked
this works but it seems like it snaps to the very top or bottom only :r
Same here. Have you found a solution? If yes, please share. Thank you!
we all having the same issue, i'll try to fix it
@@tomasbarra433 Did you figure it out?
@@juliavdwal no girl, we just cancelled that idea… after all it wasn’t mandatory for our final purpose :)
@@tomasbarra433 aaii, well it was worth the try haha. Thanks :)
OMG now i see, i a turtle :c
It seamns easy but I just cannot finish it! There's no "smart animation" choice here! What am I doing wrong?
ss