How Do You Animate a Scroll Bar in Figma?

Animated scroll bars are a great way to make an interface more visually engaging and interactive. They can also help users orient themselves when navigating through a web page or application.

Fortunately, Figma makes it easy to animate a scroll bar with its user-friendly animation tools.

When animating a scroll bar in Figma, it’s important to start by creating the visual components of the scroll bar. This includes the bar itself, the arrows that indicate up and down movement, any background or other decorative elements you may want to add, and so on.

Once the components have been created in Figma, they can be arranged in whatever order you want them to appear on the page.

Once all of the visual components are in place, it’s time to animate them. To do this, select your scroll bar object and click on “Animate” in the top right corner of Figma’s interface. Then, select “Scroll Bar” from the list of animation options and customize how your animation will look by selecting different settings like speed, direction, easing type, etc.

Next, you’ll need to create keyframes for your animation; this is where you specify how each component should look at certain points along your timeline. To create keyframes for any component of your scroll bar animation simply click on its layer in Figma and drag it onto the timeline at specific points to indicate where changes should occur.

Finally, once all of your keyframes have been set up correctly you can preview your animation by pressing play on Figma’s timeline editor. If everything looks good then you can save your work and upload it directly into a website or application.


Creating an animated scroll bar with Figma is relatively simple and straightforward thanks to its intuitive interface and powerful animation tools. With just a few clicks of a button you can easily create an eye-catching animation that will make navigating through web pages or applications much more enjoyable for users.