By following this guide, you will build a fully functional scroll-triggered animation system in Framer that responds to page scroll position — covering entrance animations, parallax layers, and progress-based transitions. The entire setup takes about 90 minutes and works without writing a single line of custom code.

What You'll Build

  • A reusable scroll-trigger setup in Framer that fires entrance animations as sections enter the viewport
  • A parallax depth layer that moves at a different rate to the page scroll
  • A scroll progress indicator that tracks how far down the page a visitor has scrolled
  • A staggered card reveal pattern you can duplicate across any section of your site
  • An exported, publish-ready Framer page optimised for Core Web Vitals thresholds as of 2026

Prerequisites

  • A Framer account (free tier is sufficient; Framer as of June 2026 ships with built-in scroll effects at no extra cost)
  • Basic familiarity with the Framer canvas — you should know how to add frames, components, and text layers
  • A project with at least three distinct sections (hero, features, CTA) to animate
  • No coding experience required; optional Framer overrides are covered in Step 6 for advanced users

Step 1: Set Up Your Framer Project Structure

Start with a clean, well-organised canvas. Scroll animations break when layers are nested incorrectly, so structure matters before you touch a single effect.

Why does layer structure matter before animation?

Framer applies scroll effects to individual layers relative to their parent container. If a text block is nested three levels deep inside an unnamed frame, the scroll offset calculates from the wrong reference point. Flat, named structures prevent this.

  1. Open your Framer project and rename every top-level section frame: Section_Hero, Section_Features, Section_CTA.
  2. Set each section frame to Fixed Width with a max-width of 1280px and Fill height so it expands with content.
  3. Group elements you want to animate together into a single frame. Name these Animate_CardGroup, Animate_Headline, and so on.
  4. Confirm your layers panel reads cleanly from top to bottom with no unnamed frames at the section level.

Common pitfall: Avoid placing animated layers inside auto-layout stacks at this stage. Auto-layout and scroll effects can conflict in Framer when both apply transform properties simultaneously.

Step 2: Apply Entrance Animations With Framer's Scroll Effects Panel

Framer's built-in Scroll Effects panel (introduced in late 2024 and significantly expanded in the 2025.4 release) handles viewport-triggered entrance animations natively.

  1. Select the Animate_Headline frame on your hero section.
  2. In the right panel, navigate to Scroll Effects → Appear.
  3. Set Trigger to When in view.
  4. Choose Fade + Slide Up from the preset list. Set offset to 40px and duration to 0.5s.
  5. Set Easing to ease-out. This feels natural for entrance motion — objects decelerate as they arrive.
  6. Enable Once so the animation only fires on first entry. Repeat triggers cause distraction on scroll-back.

Pro tip: Keep entrance durations between 0.3s and 0.6s. Interactions Research published by the Nielsen Norman Group suggests animations longer than 0.7s feel sluggish on marketing pages and increase bounce intent.

Step 3: Build a Staggered Card Reveal

Staggered reveals — where cards enter sequentially rather than all at once — guide the eye and create a sense of rhythm. They are one of the highest-impact micro-interactions you can apply to a features grid.

How do you set up stagger in Framer without code?

Framer does not yet expose a native stagger slider in the Scroll Effects panel as of June 2026. You replicate the effect by applying identical entrance animations to each card with incrementally increasing delay values.

  1. Select your first feature card frame, Card_01. Apply Fade + Slide Up, duration 0.45s, delay 0s.
  2. Select Card_02. Apply the same effect with delay 0.1s.
  3. Select Card_03. Apply the same effect with delay 0.2s.
  4. Continue incrementing by 0.1s for each additional card. Stop at 0.4s maximum delay — beyond that, late cards feel forgotten rather than choreographed.
  5. Preview the page. You should see cards sliding in one after another as the section enters the viewport.

Common pitfall: If all cards appear simultaneously, check that each card is a separate, individually named frame — not a component variant inside a single parent frame. Framer applies scroll effects per-frame, not per-variant.

Step 4: Add a Parallax Background Layer

Parallax creates perceived depth by moving a background layer at a slower rate than the foreground. Used subtly, it increases time-on-page. Used excessively, it triggers motion sickness — aim for a movement multiplier between 0.1 and 0.3.

  1. Add an image or gradient frame behind your hero content. Name it BG_Parallax. Set its size to 110% of the section height so it has room to move without showing empty space.
  2. Select BG_Parallax. In Scroll Effects, choose Parallax.
  3. Set the Vertical multiplier to -0.2. The negative value makes the background move upward as you scroll down, which feels natural.
  4. Set Horizontal to 0. Horizontal parallax on a vertical scroll page is disorienting.
  5. Preview on both desktop (1440px) and mobile (390px). On mobile, consider disabling parallax entirely — it often causes performance regressions on lower-end devices.

When should you skip the parallax effect?

Skip parallax if your page already has heavy video, large images, or complex component interactions. Stacking scroll-driven transforms raises Interaction to Next Paint (INP) scores. Google's Core Web Vitals threshold for INP is under 200ms for a "Good" rating — parallax on resource-heavy pages frequently pushes this past 500ms.

Step 5: Build a Scroll Progress Indicator

A scroll progress bar at the top of the page tells users how much content remains. It is especially effective on long-form landing pages and product tour pages.

  1. Add a thin rectangle frame at the very top of your canvas. Set dimensions to 100vw × 4px. Name it Progress_Bar.
  2. Set Position to Fixed and pin it to the top of the viewport.
  3. Select Progress_Bar. In Scroll Effects, choose Scale X under the Transform options.
  4. Set Start to 0% width at scroll position 0px, and End to 100% width at the bottom of the page.
  5. Set Origin to Left so the bar fills from left to right.
  6. Apply your brand accent colour to the fill. Use a solid colour rather than a gradient — gradients scale poorly on this pattern in Framer's current renderer.

Pro tip: This same technique works for section-specific reading progress bars. Scope the start/end scroll values to a specific section's top and bottom positions instead of the full page.

Step 6: Refine With Framer Overrides (Optional, Advanced)

If you need scroll behaviours beyond what the built-in panel offers — such as triggering one element's animation based on another's scroll position — Framer Overrides give you direct access to Framer Motion's API.

What is Framer Motion and how does it relate to Framer?

Framer Motion is the open-source React animation library that powers Framer's canvas renderer. When you write a Framer Override, you are writing a small TypeScript function that passes Framer Motion props directly to any canvas element. As of Framer's 2026 release channel, Overrides support Framer Motion 11.x syntax.

A basic scroll-linked opacity override looks like this:

import { useScroll, useTransform, motion } from "framer-motion"
import type { ComponentType } from "react\