New
New
New
Toplist
- Animation
- Techniques
Toplist
- Animation
- Techniques
Toplist
- Animation
- Techniques
4 Ways to Animate a Framer Website
Get ready to learn four powerful animation techniques for your Framer websites in this blog. By the end of it, you’ll have new skills—from easy to advanced—to add dynamic animations to your Framer projects.
Posted by
Nandi
Table of contents
1. Looping animation
Looping animations are perfect for adding subtle movement to your site, whether it’s a bouncing arrow, pulsing button, or an endless background effect. In Framer, you can create a looped animation by setting an interaction to repeat infinitely.
1. Looping animation
Looping animations are perfect for adding subtle movement to your site, whether it’s a bouncing arrow, pulsing button, or an endless background effect. In Framer, you can create a looped animation by setting an interaction to repeat infinitely.
1. Looping animation
Looping animations are perfect for adding subtle movement to your site, whether it’s a bouncing arrow, pulsing button, or an endless background effect. In Framer, you can create a looped animation by setting an interaction to repeat infinitely.
Floating element.
Floating element.
Floating element.
How to do it:
Select the element you want to animate.
Go to the right panel > Effects > Loop.
By default, Framer applies a 360° rotation—we’ll zero this out and instead adjust the Y offset to move the element up and down.
If you only apply an offset (e.g.,
30px), the animation will suddenly jump back to its original position. To fix this, switch the Loop type to Mirror, ensuring it moves back and forth smoothly.To further refine the motion, apply an ease-in-out transition and adjust the duration (e.g.,
2s).
Taking it further: A floating effect
To create a more natural floating animation, add an additional rotation:
Wrap the element in another Frame (
Option + Command + Enteron Mac).Apply a separate Loop effect to this frame, setting it to rotate slightly (e.g.,
30°).Adjust the duration to desync the movement (e.g., set the Y offset loop to
2sand the rotation loop to3s).
This subtle desynchronization creates a realistic floating effect, making the animation feel organic instead of robotic.
Example: Avara site (Looping)
How to do it:
Select the element you want to animate.
Go to the right panel > Effects > Loop.
By default, Framer applies a 360° rotation—we’ll zero this out and instead adjust the Y offset to move the element up and down.
If you only apply an offset (e.g.,
30px), the animation will suddenly jump back to its original position. To fix this, switch the Loop type to Mirror, ensuring it moves back and forth smoothly.To further refine the motion, apply an ease-in-out transition and adjust the duration (e.g.,
2s).
Taking it further: A floating effect
To create a more natural floating animation, add an additional rotation:
Wrap the element in another Frame (
Option + Command + Enteron Mac).Apply a separate Loop effect to this frame, setting it to rotate slightly (e.g.,
30°).Adjust the duration to desync the movement (e.g., set the Y offset loop to
2sand the rotation loop to3s).
This subtle desynchronization creates a realistic floating effect, making the animation feel organic instead of robotic.
Example: Avara site (Looping)
How to do it:
Select the element you want to animate.
Go to the right panel > Effects > Loop.
By default, Framer applies a 360° rotation—we’ll zero this out and instead adjust the Y offset to move the element up and down.
If you only apply an offset (e.g.,
30px), the animation will suddenly jump back to its original position. To fix this, switch the Loop type to Mirror, ensuring it moves back and forth smoothly.To further refine the motion, apply an ease-in-out transition and adjust the duration (e.g.,
2s).
Taking it further: A floating effect
To create a more natural floating animation, add an additional rotation:
Wrap the element in another Frame (
Option + Command + Enteron Mac).Apply a separate Loop effect to this frame, setting it to rotate slightly (e.g.,
30°).Adjust the duration to desync the movement (e.g., set the Y offset loop to
2sand the rotation loop to3s).
This subtle desynchronization creates a realistic floating effect, making the animation feel organic instead of robotic.
Example: Avara site (Looping)
Avara site recreation in Framer.
Avara site recreation in Framer.
Avara site recreation in Framer.
2. Parallax scrolling
Parallax effects create depth by making elements move at different speeds as you scroll. This technique is widely used in modern web design to add a dynamic feel to pages.
How to set it up:
Separate your elements into layers
Suppose you have an image of a person standing on a hill, looking at a mountain with a sky in the background.
2. Parallax scrolling
Parallax effects create depth by making elements move at different speeds as you scroll. This technique is widely used in modern web design to add a dynamic feel to pages.
How to set it up:
Separate your elements into layers
Suppose you have an image of a person standing on a hill, looking at a mountain with a sky in the background.
2. Parallax scrolling
Parallax effects create depth by making elements move at different speeds as you scroll. This technique is widely used in modern web design to add a dynamic feel to pages.
How to set it up:
Separate your elements into layers
Suppose you have an image of a person standing on a hill, looking at a mountain with a sky in the background.
Parallax effects setup.
Parallax effects setup.
Parallax effects setup.
You need to divide this into three layers:
Foreground: The person and the hill.
Middle ground: The mountain.
Background: The sky.
Additional elements like clouds or text can also be placed on separate layers.
Position the layers in Framer
Import your images and stack them correctly.
Ensure each layer contains only its designated element. For example, the mountain layer should have only the mountain without the sky.
Adjust scroll speeds
Select a layer and go to Effects → Scroll Speed.
Adjust the scroll speed as follows:
Foreground (closer objects): Slightly faster than normal (e.g., 110%).
Middle ground: Slower than the foreground (e.g., 70%).
Background (farthest objects): Slowest (e.g., 30%).
Experiment with different values to get the best effect.
Fine-tune the Z-Index
Layers should be ordered correctly in terms of depth.
Assign Z-index values:
Background (sky): Z1 (lowest layer).
Middle ground (mountain): Z2.
Foreground (hill and person): Z3 (highest layer).
This ensures the elements stack properly.
Example: Chainzoku animation (Parallax)
You need to divide this into three layers:
Foreground: The person and the hill.
Middle ground: The mountain.
Background: The sky.
Additional elements like clouds or text can also be placed on separate layers.
Position the layers in Framer
Import your images and stack them correctly.
Ensure each layer contains only its designated element. For example, the mountain layer should have only the mountain without the sky.
Adjust scroll speeds
Select a layer and go to Effects → Scroll Speed.
Adjust the scroll speed as follows:
Foreground (closer objects): Slightly faster than normal (e.g., 110%).
Middle ground: Slower than the foreground (e.g., 70%).
Background (farthest objects): Slowest (e.g., 30%).
Experiment with different values to get the best effect.
Fine-tune the Z-Index
Layers should be ordered correctly in terms of depth.
Assign Z-index values:
Background (sky): Z1 (lowest layer).
Middle ground (mountain): Z2.
Foreground (hill and person): Z3 (highest layer).
This ensures the elements stack properly.
Example: Chainzoku animation (Parallax)
You need to divide this into three layers:
Foreground: The person and the hill.
Middle ground: The mountain.
Background: The sky.
Additional elements like clouds or text can also be placed on separate layers.
Position the layers in Framer
Import your images and stack them correctly.
Ensure each layer contains only its designated element. For example, the mountain layer should have only the mountain without the sky.
Adjust scroll speeds
Select a layer and go to Effects → Scroll Speed.
Adjust the scroll speed as follows:
Foreground (closer objects): Slightly faster than normal (e.g., 110%).
Middle ground: Slower than the foreground (e.g., 70%).
Background (farthest objects): Slowest (e.g., 30%).
Experiment with different values to get the best effect.
Fine-tune the Z-Index
Layers should be ordered correctly in terms of depth.
Assign Z-index values:
Background (sky): Z1 (lowest layer).
Middle ground (mountain): Z2.
Foreground (hill and person): Z3 (highest layer).
This ensures the elements stack properly.
Example: Chainzoku animation (Parallax)
Chainzoku animation.
Chainzoku animation.
Chainzoku animation.
3. Component-based animation
Framer allows you to create reusable animated components, making it easier to apply consistent animations across your project. This is great for things like buttons, cards, and interactive sections.
3. Component-based animation
Framer allows you to create reusable animated components, making it easier to apply consistent animations across your project. This is great for things like buttons, cards, and interactive sections.
3. Component-based animation
Framer allows you to create reusable animated components, making it easier to apply consistent animations across your project. This is great for things like buttons, cards, and interactive sections.
Button hover effect.
Button hover effect.
Button hover effect.
How to create component animations:
Create a button component: Start with a simple button design using frames. Your button might have:
A background frame
A text layer
An icon or additional visual elements
Turn it into a component:
Right-click on the button and select Create Component, or use the shortcut Option + Command + K.
This will open the Component Canvas, where you can define different states.
Add a hover variant:
In the Component Canvas, rename the default variant to Default.
Click + Add Variant and name it Hover.
Adjust the hover state by changing properties like size, background color, or icon position.
Animate the hover state:
Increase the button size slightly for a subtle hover effect.
Move any icons or elements within the button to indicate interaction.
Adjust the Transition Settings in the Right Panel to refine the effect. For example:
Set Bounce to 0 to avoid overshooting effects.
Adjust easing curves to make the animation smoother.
How to create component animations:
Create a button component: Start with a simple button design using frames. Your button might have:
A background frame
A text layer
An icon or additional visual elements
Turn it into a component:
Right-click on the button and select Create Component, or use the shortcut Option + Command + K.
This will open the Component Canvas, where you can define different states.
Add a hover variant:
In the Component Canvas, rename the default variant to Default.
Click + Add Variant and name it Hover.
Adjust the hover state by changing properties like size, background color, or icon position.
Animate the hover state:
Increase the button size slightly for a subtle hover effect.
Move any icons or elements within the button to indicate interaction.
Adjust the Transition Settings in the Right Panel to refine the effect. For example:
Set Bounce to 0 to avoid overshooting effects.
Adjust easing curves to make the animation smoother.
How to create component animations:
Create a button component: Start with a simple button design using frames. Your button might have:
A background frame
A text layer
An icon or additional visual elements
Turn it into a component:
Right-click on the button and select Create Component, or use the shortcut Option + Command + K.
This will open the Component Canvas, where you can define different states.
Add a hover variant:
In the Component Canvas, rename the default variant to Default.
Click + Add Variant and name it Hover.
Adjust the hover state by changing properties like size, background color, or icon position.
Animate the hover state:
Increase the button size slightly for a subtle hover effect.
Move any icons or elements within the button to indicate interaction.
Adjust the Transition Settings in the Right Panel to refine the effect. For example:
Set Bounce to 0 to avoid overshooting effects.
Adjust easing curves to make the animation smoother.
Button hover effect component properties in Framer.
Button hover effect component properties in Framer.
Button hover effect component properties in Framer.
Component animations make UI interactions feel polished and engaging without requiring custom code.
Example: Button hover (Component)
Component animations make UI interactions feel polished and engaging without requiring custom code.
Example: Button hover (Component)
Component animations make UI interactions feel polished and engaging without requiring custom code.
Example: Button hover (Component)
Button hover.
Button hover.
Button hover.
4. Timeline animation
Timeline animations give you complete control over multiple elements moving in sync. You can set precise timing for each step, making it ideal for complex sequences like intro animations or interactive storytelling.
How it works
Set up elements – Create frames for animated elements (e.g., color stripes) and place them inside a sticky frame which is inside of a scroll container.
The sticky frame will help keep elements visible during scrolling.
Create trigger frames – Place invisible trigger frames below the sticky frame that will initiate animations as they scroll into view.
Define scroll effects – Apply "Scroll Transform" with a From and To state to control motion.
Duplicate for multiple elements – Repeat the process for multiple elements, adjusting trigger timing.
Hide trigger frames – Set trigger opacity to 0 and pointer events to “none” so they don’t interfere visually and don’t prevent us from interacting with layers below them, but still function.
Example: Animated stripes (Timeline)
4. Timeline animation
Timeline animations give you complete control over multiple elements moving in sync. You can set precise timing for each step, making it ideal for complex sequences like intro animations or interactive storytelling.
How it works
Set up elements – Create frames for animated elements (e.g., color stripes) and place them inside a sticky frame which is inside of a scroll container.
The sticky frame will help keep elements visible during scrolling.
Create trigger frames – Place invisible trigger frames below the sticky frame that will initiate animations as they scroll into view.
Define scroll effects – Apply "Scroll Transform" with a From and To state to control motion.
Duplicate for multiple elements – Repeat the process for multiple elements, adjusting trigger timing.
Hide trigger frames – Set trigger opacity to 0 and pointer events to “none” so they don’t interfere visually and don’t prevent us from interacting with layers below them, but still function.
Example: Animated stripes (Timeline)
4. Timeline animation
Timeline animations give you complete control over multiple elements moving in sync. You can set precise timing for each step, making it ideal for complex sequences like intro animations or interactive storytelling.
How it works
Set up elements – Create frames for animated elements (e.g., color stripes) and place them inside a sticky frame which is inside of a scroll container.
The sticky frame will help keep elements visible during scrolling.
Create trigger frames – Place invisible trigger frames below the sticky frame that will initiate animations as they scroll into view.
Define scroll effects – Apply "Scroll Transform" with a From and To state to control motion.
Duplicate for multiple elements – Repeat the process for multiple elements, adjusting trigger timing.
Hide trigger frames – Set trigger opacity to 0 and pointer events to “none” so they don’t interfere visually and don’t prevent us from interacting with layers below them, but still function.
Example: Animated stripes (Timeline)
Animated stripes.
Animated stripes.
Animated stripes.
Wrapping up
Animations are a game-changer for making your Framer site feel more alive. Whether you’re using looping effects for subtle movement, parallax for depth, components for reusability, or timeline animations for complex sequences, each technique brings something unique to the table.
Learning these techniques might need some in-depth training, check out my detailed video on 4 animation techniques that you’ve got to master.
Wrapping up
Animations are a game-changer for making your Framer site feel more alive. Whether you’re using looping effects for subtle movement, parallax for depth, components for reusability, or timeline animations for complex sequences, each technique brings something unique to the table.
Learning these techniques might need some in-depth training, check out my detailed video on 4 animation techniques that you’ve got to master.
Wrapping up
Animations are a game-changer for making your Framer site feel more alive. Whether you’re using looping effects for subtle movement, parallax for depth, components for reusability, or timeline animations for complex sequences, each technique brings something unique to the table.
Learning these techniques might need some in-depth training, check out my detailed video on 4 animation techniques that you’ve got to master.
