How to Create a Scroll Bar Animation in Figma Using Smart Animate!
ฝัง
- เผยแพร่เมื่อ 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!
- แนวปฏิบัติและการใช้ชีวิต
Thank you for this bro, its really easy to understand. Continue making dude, worth a sub
straight forward and well explained! thank you
absolutely perfectvideo, super clear and easy thankyou so much man!
You're welcome!
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!
Thanks a lot for this tutorial. You're saving my life 🥺
You’re welcome 😊
Very useful! Thank you so much!
clear and easy, many thanks 👍
So impressed, thank you! That unsplash widget too… 🤯
Glad you like it!
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?
This is great! Thank you sm :)
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! :)
Thank you very much, you're a life saver.
You're welcome!
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!
Simple + Easy + Useful = My kinda thing.
Great guide! thanks))
Glad it helped!
Thank you!
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
Great video!
Glad you enjoyed it
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?
For unsplash, what is the windows command for choosing multiple images?
how do you move the focus to the bottom of the boundary box?
When releasing the mouse, how do I make the scroll bar not move down or up?
I'm struggling with this too
Thanks Man
You're welcome!
LIFESAVER
thank youuu
Thanks
No problem!
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)
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!
Is it possible to stop scroll in the middle or any point ?
how do made it as componant and how to use it in a single part of my page???
bro can u do this without dragging? just scrolling only?
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.
can i do that for website design？
hey after designing this when I put that into the frame , its not working
how did you scroll through the frame within design mode? 3:18
same question here.
it looks like he's scrolling but he's just dragging the item using his mouse. this is due to "comment" layer is positioned under "top & bottom element" layers.
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....
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.
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?
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
OMG now i see, i a turtle :c
How do I scroll down to the last comment within the list of items? minute 3:21
Thank you!
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 :)
It seamns easy but I just cannot finish it! There's no "smart animation" choice here! What am I doing wrong?
HOW DID YOU SCROLL IN THAT LAYOUT?
Double click on frame to select group. Then click on group & move the mouse while holding down the Shift key. (Posting this for future inquiries since it took me a bit to find in comments.)
ss