How to add scroll animations on Framer

intermediate 8 min read Updated 2026-03-18

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.

Try Framer Full Framer Review

Prerequisites

Basic knowledge of Framer interface
Understanding of layers and components
Familiarity with animation properties
Knowledge of scroll triggers concept

Step-by-Step Instructions

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.

Choose elements that will benefit from scroll animation, like headers, cards, or images that should appear dynamically.

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.

You can also access effects by right-clicking the element and selecting 'Add Effect'.

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.

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.

Keep animations subtle for better user experience - dramatic effects can be distracting.

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.

Use different ranges for multiple elements to create staggered animation effects.

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

Combine multiple properties like opacity and transform for more dynamic animations.

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.

Ease-out curves feel more natural for most scroll animations.

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.

Test on different device sizes to ensure animations work well across all breakpoints.

Common Issues & 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.

Prices mentioned in this guide are pulled from current plan data and may change. Always verify on the official Framer website before purchasing.

Visit Framer View Framer Pricing