Tips & tricks
- Animation
- Scroll
Tips & tricks
- Animation
- Scroll
Tips & tricks
- Animation
- Scroll
Simple Way to Animate Elements on Scroll in Framer
Want to make your website feel more alive? One of the easiest ways is by animating elements as users scroll. In this tutorial, I’ll show you a simple method to do exactly that using Framer’s scroll variant effect.
Posted by
Nandi
Table of contents
Create variants for your component
We’ll use an animated navigation bar as the example. As you scroll down the page, the navbar smoothly changes its layout, creating an interactive effect.
First, turn your navigation into a component. Inside the component, define two variants:
Variant A: Large text sitting below the navigation.
Variant B: The text moves into the navigation bar and shrinks in size.
This sets up the two states your navbar will animate between.
Set up a scroll trigger
Next, create a transparent frame on the page. This frame will act as the trigger for the animation.
With the frame selected, go to the right-hand panel and add a scroll section. Name it something like trigger so you can reference it later.
Create variants for your component
We’ll use an animated navigation bar as the example. As you scroll down the page, the navbar smoothly changes its layout, creating an interactive effect.
First, turn your navigation into a component. Inside the component, define two variants:
Variant A: Large text sitting below the navigation.
Variant B: The text moves into the navigation bar and shrinks in size.
This sets up the two states your navbar will animate between.
Set up a scroll trigger
Next, create a transparent frame on the page. This frame will act as the trigger for the animation.
With the frame selected, go to the right-hand panel and add a scroll section. Name it something like trigger so you can reference it later.
Create variants for your component
We’ll use an animated navigation bar as the example. As you scroll down the page, the navbar smoothly changes its layout, creating an interactive effect.
First, turn your navigation into a component. Inside the component, define two variants:
Variant A: Large text sitting below the navigation.
Variant B: The text moves into the navigation bar and shrinks in size.
This sets up the two states your navbar will animate between.
Set up a scroll trigger
Next, create a transparent frame on the page. This frame will act as the trigger for the animation.
With the frame selected, go to the right-hand panel and add a scroll section. Name it something like trigger so you can reference it later.
Setting up scroll trigger.
Setting up scroll trigger.
Setting up scroll trigger.
Add the scroll variant effect
Now, select your navigation component and add a scroll variant effect.
Set the trigger to section in view.
Point it to the trigger section you just created.
Choose the variant you want the component to animate to.
Add the scroll variant effect
Now, select your navigation component and add a scroll variant effect.
Set the trigger to section in view.
Point it to the trigger section you just created.
Choose the variant you want the component to animate to.
Add the scroll variant effect
Now, select your navigation component and add a scroll variant effect.
Set the trigger to section in view.
Point it to the trigger section you just created.
Choose the variant you want the component to animate to.
Adding the scroll trigger that was made.
Adding the scroll trigger that was made.
Adding the scroll trigger that was made.
Preview the scroll animation
That’s it! Now when you scroll down the page and the trigger frame comes into view, your navigation component will switch variants. The result is a smooth, scroll-based animation that makes your navbar feel dynamic and engaging.
This same technique isn’t limited to navigation bars, you can use it to animate images, text blocks, call-to-action sections, or entire layouts. Once you start experimenting with scroll triggers and variants, the possibilities are endless.
Preview the scroll animation
That’s it! Now when you scroll down the page and the trigger frame comes into view, your navigation component will switch variants. The result is a smooth, scroll-based animation that makes your navbar feel dynamic and engaging.
This same technique isn’t limited to navigation bars, you can use it to animate images, text blocks, call-to-action sections, or entire layouts. Once you start experimenting with scroll triggers and variants, the possibilities are endless.
Preview the scroll animation
That’s it! Now when you scroll down the page and the trigger frame comes into view, your navigation component will switch variants. The result is a smooth, scroll-based animation that makes your navbar feel dynamic and engaging.
This same technique isn’t limited to navigation bars, you can use it to animate images, text blocks, call-to-action sections, or entire layouts. Once you start experimenting with scroll triggers and variants, the possibilities are endless.
