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
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.
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.
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.
The component with it's variants.
The component with it's variants.
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.
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.
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.
The scroll variant effect on the component.
The scroll variant effect on the component.
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.
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.
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.
