Intermediate
How to add scroll animations on Framer
Quick Answer
Add scroll animations in Framer by selecting an element, opening the Effects panel, choosing scroll variants, and configuring transform properties. Set scroll progress ranges to control when animations trigger during page scroll.
Prerequisites
- Basic knowledge of Framer interface
- Understanding of layers and components
- Familiarity with animation properties
- Knowledge of scroll triggers concept
1
Select the element to animate
Click on the layer or component you want to animate on scroll. Make sure the element is visible in your canvas and properly positioned within your frame or page.
Tip
Choose elements that will benefit from scroll animation, like headers, cards, or images that should appear dynamically.
2
Open the Effects panel
With your element selected, locate the Effects panel in the right sidebar. If you don't see it, click on the Design tab first, then scroll down to find the Effects section.
Tip
You can also access effects by right-clicking the element and selecting 'Add Effect'.
3
Add a scroll effect
In the Effects panel, click the + Add Effect button. From the dropdown menu, select Scroll to create a scroll-based animation trigger for your element.
4
Configure scroll variants
Framer will create two variants: Start and End. The Start variant represents the element's initial state, and End represents the final animated state. Click on each variant to set different properties like position, opacity, scale, or rotation.
Tip
Keep animations subtle for better user experience - dramatic effects can be distracting.
5
Set scroll progress range
Adjust the Scroll Progress range using the slider or input fields. Set Start (0-100%) to define when the animation begins and End (0-100%) for when it completes. For example, start at 20% and end at 80% of the scroll progress.
Tip
Use different ranges for multiple elements to create staggered animation effects.
6
Configure animation properties
Modify transform properties for each variant:
- Opacity: 0 for fade-in effects
- Transform: Adjust X, Y position for slide animations
- Scale: Start smaller for zoom-in effects
- Rotation: Add rotation values for spinning effects
Tip
Combine multiple properties like opacity and transform for more dynamic animations.
7
Adjust easing and timing
In the scroll effect settings, modify the Easing curve to change animation smoothness. Choose from presets like
ease-out, ease-in-out, or create custom curves. You can also adjust the Duration if using time-based easing.Tip
Ease-out curves feel more natural for most scroll animations.
8
Preview and test the animation
Click the Preview button in the top toolbar or press
Cmd/Ctrl + P to test your scroll animation. Scroll up and down to see how the animation behaves at different scroll positions and make adjustments as needed.Tip
Test on different device sizes to ensure animations work well across all breakpoints.
Troubleshooting
Animation not triggering during scroll
Check that your element is within a scrollable container and verify the scroll progress range values. Make sure the parent frame has sufficient height to enable scrolling.
Animation feels jumpy or stutters
Reduce the complexity of animated properties and avoid animating too many elements simultaneously. Use will-change CSS property or switch to transform-based animations for better performance.
Scroll animation doesn't work on mobile
Ensure your frame has proper mobile breakpoints configured. Test the animation in Device Preview mode and check that touch scrolling is enabled in your project settings.
Multiple elements animate at the same time
Adjust the Scroll Progress ranges for each element to create staggered timing. Use different start and end percentages to make animations trigger at different scroll positions.
Ready to get started with Framer?
Put this tutorial into practice. Visit Framer and follow the steps above.
Visit Framer →