Component

Animated Bars in Framer

This is a Framer demo that showcases how you can animate bars and numbers as you scroll down the website, turning your static design into an animated masterpiece without messing with any code. Feel free to remix the project to see how it's built.

Created by

Nandi

Social media comparison showing YouTube at 67% versus Twitter at 33%

About the resource

To create this scroll animation, we need two things: a component with two variants and a scroll variant effect. Oh, and I guess we could call the number counter component the third thing.

So first, we just design the bars and turn them into a component. Make sure that for the number, you're using the counter component mentioned above so the number will be nicely animated later.

YouTube progress interface showing start at 0% and end at 67% — The component with it's variants.

As you can see in the image above, in both variants, we change the position of the bar as it progresses, and we also change the value in the number counter component.

Quick tip: make sure you use the number counter in 'variants' mode, so the value changes will be animated when switching between variants.

Now that we have this component set up with the two variants, all we need to do is switch between them as we scroll down the site. An easy way to do this is by applying a scroll variant effect to the component.

Website builder interface with scroll animation settings for social bars. — The scroll variant effect on the component.

As you can see in the image above, the scroll variant effect triggers when the layer enters the viewport (when it scrolls into view). We specify that it should switch from the start variant to the end variant.

And that's it. As we scroll down the site, the component animates from one variant to the other according to the transition settings we set within the component.

Animated Bars in Framer

About the resource

Learn the fundamentals of Framer for free.

More resources