Tips & tricks
- Scroll
- Animation
Tips & tricks
- Scroll
- Animation
Tips & tricks
- Scroll
- Animation
The Easiest Framer Scroll Animation Technique
Learn the easiest scroll animation technique that you can start using in Framer without any coding knowledge. Follow along and I'll show you how sticky positioning work and how to trigger scroll effects with scroll sections. After following along this video, you’ll have the knowledge that is needed to create the most amazing scroll animations on your websites (without any code!).
Posted by
Nandi
Table of contents
The roadmap
We’ll break this tutorial into four key sections:
Understanding the technique – A quick rundown of how it works.
Setting up sticky positioning – Making sure the element stays fixed while the rest scrolls.
Creating scroll triggers – Setting up triggers to control animations.
Applying scroll effects – Adding scroll transforms and variant switches for animation.
The technique explained
Imagine you have a coin in the middle of the page. As you scroll, the coin stays in place while everything else moves. At the same time, the coin rotates and flips. This effect is achieved by keeping the element “sticky” and using scroll triggers to apply transformations.
The roadmap
We’ll break this tutorial into four key sections:
Understanding the technique – A quick rundown of how it works.
Setting up sticky positioning – Making sure the element stays fixed while the rest scrolls.
Creating scroll triggers – Setting up triggers to control animations.
Applying scroll effects – Adding scroll transforms and variant switches for animation.
The technique explained
Imagine you have a coin in the middle of the page. As you scroll, the coin stays in place while everything else moves. At the same time, the coin rotates and flips. This effect is achieved by keeping the element “sticky” and using scroll triggers to apply transformations.
The roadmap
We’ll break this tutorial into four key sections:
Understanding the technique – A quick rundown of how it works.
Setting up sticky positioning – Making sure the element stays fixed while the rest scrolls.
Creating scroll triggers – Setting up triggers to control animations.
Applying scroll effects – Adding scroll transforms and variant switches for animation.
The technique explained
Imagine you have a coin in the middle of the page. As you scroll, the coin stays in place while everything else moves. At the same time, the coin rotates and flips. This effect is achieved by keeping the element “sticky” and using scroll triggers to apply transformations.
Coin example scroll animation.
Coin example scroll animation.
Coin example scroll animation.
The key components of this technique are:
A sticky frame that stays in place.
Scroll triggers that activate animations.
Scroll transforms and variant switches to create movement and transitions.
Setting up sticky positioning
For this technique to work, we need a sticky layer that stays in place while other elements scroll past it. This allows trigger frames to activate animations as they move through the viewport.
Step 1: Setting up the layout
In Framer, create a project with the following structure:
A Main Section (acts as the main container).
Within the Main, a Spacer Section (to add spacing at the top and bottom).
Below the Spacer a Scroll Animation Container (which holds the sticky frame and other elements).
Within the Scroll Animation Container, a Sticky Frame (the element that stays in place, like the coin).
Step 2: Applying sticky positioning
To keep the element in place:
Select the frame named “sticky”.
Set its position to sticky.
Ensure the parent containers have overflow set to visible: Scroll animation container, a main section and desktop breakpoint.
Once done, preview the page. The sticky frame should stay fixed in the viewport while the rest of the content scrolls.
The key components of this technique are:
A sticky frame that stays in place.
Scroll triggers that activate animations.
Scroll transforms and variant switches to create movement and transitions.
Setting up sticky positioning
For this technique to work, we need a sticky layer that stays in place while other elements scroll past it. This allows trigger frames to activate animations as they move through the viewport.
Step 1: Setting up the layout
In Framer, create a project with the following structure:
A Main Section (acts as the main container).
Within the Main, a Spacer Section (to add spacing at the top and bottom).
Below the Spacer a Scroll Animation Container (which holds the sticky frame and other elements).
Within the Scroll Animation Container, a Sticky Frame (the element that stays in place, like the coin).
Step 2: Applying sticky positioning
To keep the element in place:
Select the frame named “sticky”.
Set its position to sticky.
Ensure the parent containers have overflow set to visible: Scroll animation container, a main section and desktop breakpoint.
Once done, preview the page. The sticky frame should stay fixed in the viewport while the rest of the content scrolls.
The key components of this technique are:
A sticky frame that stays in place.
Scroll triggers that activate animations.
Scroll transforms and variant switches to create movement and transitions.
Setting up sticky positioning
For this technique to work, we need a sticky layer that stays in place while other elements scroll past it. This allows trigger frames to activate animations as they move through the viewport.
Step 1: Setting up the layout
In Framer, create a project with the following structure:
A Main Section (acts as the main container).
Within the Main, a Spacer Section (to add spacing at the top and bottom).
Below the Spacer a Scroll Animation Container (which holds the sticky frame and other elements).
Within the Scroll Animation Container, a Sticky Frame (the element that stays in place, like the coin).
Step 2: Applying sticky positioning
To keep the element in place:
Select the frame named “sticky”.
Set its position to sticky.
Ensure the parent containers have overflow set to visible: Scroll animation container, a main section and desktop breakpoint.
Once done, preview the page. The sticky frame should stay fixed in the viewport while the rest of the content scrolls.
Set to sticky position.
Set to sticky position.
Set to sticky position.
Quick tip: make sure you set the scroll animation container to a large height value, and the sticky frame to 100vh height.
Creating scroll triggers
Scroll triggers are invisible frames placed within the page that activate animations as they enter the viewport.
Quick tip: make sure you set the scroll animation container to a large height value, and the sticky frame to 100vh height.
Creating scroll triggers
Scroll triggers are invisible frames placed within the page that activate animations as they enter the viewport.
Quick tip: make sure you set the scroll animation container to a large height value, and the sticky frame to 100vh height.
Creating scroll triggers
Scroll triggers are invisible frames placed within the page that activate animations as they enter the viewport.
Trigger frame structure.
Trigger frame structure.
Trigger frame structure.
Step 1: Setting up trigger frames
Create a trigger frames section inside the scroll animation container (below the sticky frame).
Add multiple trigger frames within this section.
Name each trigger frame based on its function (e.g.,
variant-switch-1).Ensure they are not sticky so they scroll naturally.
Step 2: Assign scroll sections
Select each trigger frame.
Assign a scroll section that matches its layer name.
This allows Framer to detect when each section enters the viewport and trigger animations accordingly.
Applying scroll effects
Now, let’s animate the sticky frame using scroll transform and scroll variants.
Effect 1: Scroll transform
Scroll transforms let us animate elements based on their scroll position.
Step 1: Adding scroll transform:
Select the sticky frame (the coin in this case).
Open the effects panel and add a scroll transform.
Set the trigger to section in view.
Choose bottom of viewport as the entry point.
Assign the corresponding scroll section (e.g.,
variant-switch-1).
Step 2: Defining the animation:
Set the from state (initial values).
Set the to state (final values, e.g., rotation, scale, opacity).
Add a smooth transition for a fluid effect.
Effect 2: Scroll variants
Scroll variants allow you to switch between different component variants as you scroll.
Step 1: Creating variants:
Convert the sticky frame into a component.
Create multiple variants with different styles (e.g., different colors, icons, or text).
Step 2: Adding scroll variant effect:
Select the component.
Add a scroll variant effect.
Set the trigger to section in view.
Choose the variant switch section.
Define the target variant.
Now, as you scroll, the element will change its variant, creating a dynamic flipping effect!
Btw here’s a website that applies this to more than one element haptic.app. Check it out, the website is awesome.
Wrapping up
By combining sticky positioning, scroll triggers, scroll transforms, and scroll variants, you can create powerful, no-code animations in Framer.
You can also remix the 3D flip scroll animation to take a closer look at how something like this is structured in Framer.
And for some extra guidance, check out my video on beginner scroll animations.
Step 1: Setting up trigger frames
Create a trigger frames section inside the scroll animation container (below the sticky frame).
Add multiple trigger frames within this section.
Name each trigger frame based on its function (e.g.,
variant-switch-1).Ensure they are not sticky so they scroll naturally.
Step 2: Assign scroll sections
Select each trigger frame.
Assign a scroll section that matches its layer name.
This allows Framer to detect when each section enters the viewport and trigger animations accordingly.
Applying scroll effects
Now, let’s animate the sticky frame using scroll transform and scroll variants.
Effect 1: Scroll transform
Scroll transforms let us animate elements based on their scroll position.
Step 1: Adding scroll transform:
Select the sticky frame (the coin in this case).
Open the effects panel and add a scroll transform.
Set the trigger to section in view.
Choose bottom of viewport as the entry point.
Assign the corresponding scroll section (e.g.,
variant-switch-1).
Step 2: Defining the animation:
Set the from state (initial values).
Set the to state (final values, e.g., rotation, scale, opacity).
Add a smooth transition for a fluid effect.
Effect 2: Scroll variants
Scroll variants allow you to switch between different component variants as you scroll.
Step 1: Creating variants:
Convert the sticky frame into a component.
Create multiple variants with different styles (e.g., different colors, icons, or text).
Step 2: Adding scroll variant effect:
Select the component.
Add a scroll variant effect.
Set the trigger to section in view.
Choose the variant switch section.
Define the target variant.
Now, as you scroll, the element will change its variant, creating a dynamic flipping effect!
Btw here’s a website that applies this to more than one element haptic.app. Check it out, the website is awesome.
Wrapping up
By combining sticky positioning, scroll triggers, scroll transforms, and scroll variants, you can create powerful, no-code animations in Framer.
You can also remix the 3D flip scroll animation to take a closer look at how something like this is structured in Framer.
And for some extra guidance, check out my video on beginner scroll animations.
Step 1: Setting up trigger frames
Create a trigger frames section inside the scroll animation container (below the sticky frame).
Add multiple trigger frames within this section.
Name each trigger frame based on its function (e.g.,
variant-switch-1).Ensure they are not sticky so they scroll naturally.
Step 2: Assign scroll sections
Select each trigger frame.
Assign a scroll section that matches its layer name.
This allows Framer to detect when each section enters the viewport and trigger animations accordingly.
Applying scroll effects
Now, let’s animate the sticky frame using scroll transform and scroll variants.
Effect 1: Scroll transform
Scroll transforms let us animate elements based on their scroll position.
Step 1: Adding scroll transform:
Select the sticky frame (the coin in this case).
Open the effects panel and add a scroll transform.
Set the trigger to section in view.
Choose bottom of viewport as the entry point.
Assign the corresponding scroll section (e.g.,
variant-switch-1).
Step 2: Defining the animation:
Set the from state (initial values).
Set the to state (final values, e.g., rotation, scale, opacity).
Add a smooth transition for a fluid effect.
Effect 2: Scroll variants
Scroll variants allow you to switch between different component variants as you scroll.
Step 1: Creating variants:
Convert the sticky frame into a component.
Create multiple variants with different styles (e.g., different colors, icons, or text).
Step 2: Adding scroll variant effect:
Select the component.
Add a scroll variant effect.
Set the trigger to section in view.
Choose the variant switch section.
Define the target variant.
Now, as you scroll, the element will change its variant, creating a dynamic flipping effect!
Btw here’s a website that applies this to more than one element haptic.app. Check it out, the website is awesome.
Wrapping up
By combining sticky positioning, scroll triggers, scroll transforms, and scroll variants, you can create powerful, no-code animations in Framer.
You can also remix the 3D flip scroll animation to take a closer look at how something like this is structured in Framer.
And for some extra guidance, check out my video on beginner scroll animations.
3D flip scroll resource.
3D flip scroll resource.
3D flip scroll resource.
This technique is perfect for adding interactive elements to your website without needing any coding skills.
Give it a try, and start adding some motion magic to your Framer projects.
This technique is perfect for adding interactive elements to your website without needing any coding skills.
Give it a try, and start adding some motion magic to your Framer projects.
This technique is perfect for adding interactive elements to your website without needing any coding skills.
Give it a try, and start adding some motion magic to your Framer projects.
