---
title: "10 Scroll Animations to Make Your Framer Site Stand Out"
description: "10 real scroll animations for your Framer site, each with working code — fade-ins, reveals, progress bars, 3D grids, counters, and ready-made components."
canonical_url: "https://framerhub.io/blog/scroll-animations-framer"
last_updated: "2027-02-24T00:00:00.000Z"
---
Scroll-triggered animation is one of the clearest ways to make a Framer site feel considered rather than static — but "add some scroll animation" isn't one technique, it's a whole toolkit. Here are ten real, working scroll effects, from the simplest fade-in to a full 3D grid, with the code (or the exact component) for each.
Framer.university and similar tutorial sites tend to cover these one at a time, in isolation, which is useful for learning any single technique but doesn't help much with the harder question most builders actually face: which of these effects belongs on which section, and how many is too many for one page. This guide covers both — the individual techniques, and how to choose and combine them without ending up with a page that never stops moving.
## 1. Fade + Slide Up Reveal
The foundational scroll animation, and the right starting point for most sections: content is invisible and slightly offset below its final position, then fades and slides up into place as it scrolls into view.
```jsx
import { motion } from "motion/react"
export function FadeUpReveal(Component): ComponentType {
return (props) => (
)
}
```
`viewport={{ once: true }}` is the detail worth calling out — without it, the animation replays every time the element scrolls in and out of view, which gets distracting fast on a page a visitor scrolls up and down while reading.
## 2. Staggered List/Grid Reveal
The same fade-up idea, but applied to a list or grid of items with each one animating slightly after the last, producing a cascading reveal rather than everything appearing at once.
```jsx
const container = {
hidden: {},
show: { transition: { staggerChildren: 0.08 } },
}
const item = {
hidden: { opacity: 0, y: 16 },
show: { opacity: 1, y: 0 },
}
// wrap items with motion.div variants={item}, parent with variants={container}, whileInView="show"
```
`staggerChildren` on the parent variant is what creates the cascade — each child's animation starts 80ms after the previous one, which reads as a deliberate wave rather than a simultaneous, flat reveal.
## 3. Scroll-Linked Progress Bar
A thin bar (usually fixed to the top of the viewport) that fills from 0 to 100% as a visitor scrolls through the page or a specific section — common on long-form articles and case studies.
```jsx
import { motion, useScroll } from "motion/react"
export function ScrollProgressBar() {
const { scrollYProgress } = useScroll()
return (
)
}
```
This is a continuous effect, not a trigger-once reveal — it should track scroll position live rather than animate once and stop, which is why it's driven directly by `scrollYProgress` rather than a `whileInView` trigger.
## 4. Word-by-Word or Line-by-Line Text Reveal
Larger headline or statement blocks often reveal one word or line at a time as they scroll into view, rather than fading in as a single block — a more deliberate, editorial-feeling reveal for longer statements. FramerHub's [Scroll Text Reveal component](/components/scroll-text-reveal) handles the word-splitting and staggered timing for this pattern out of the box, with reveal style, stagger speed, and trigger point exposed as property panel controls.
## 5. Clip-Path Image Reveal
Rather than a plain fade-in, images can reveal through an animated clip-path — a rectangular mask that slides away to uncover the image, rather than the image simply fading into visibility. It reads as more deliberate and more premium than a simple opacity fade, especially for hero or portfolio imagery. FramerHub's [Scroll Image Reveal component](/components/scroll-image-reveal) implements several wipe directions and easing options for this specific pattern.
## 6. Scale on Scroll
An element grows (or shrinks) as it scrolls through the viewport, adding a sense of the visitor "approaching" or "passing" the content — commonly used on a hero image or a section-transition moment.
```jsx
import { useRef } from "react"
import { motion, useScroll, useTransform } from "motion/react"
export function ScaleOnScroll(Component): ComponentType {
return (props) => {
const ref = useRef(null)
const { scrollYProgress } = useScroll({ target: ref, offset: ["start end", "end start"] })
const scale = useTransform(scrollYProgress, [0, 0.5, 1], [0.9, 1, 0.9])
return (
)
}
}
```
Mapping `scrollYProgress` through three keyframes (`[0, 0.5, 1]`) rather than two lets the element scale up as it enters, peak at full size mid-viewport, then scale back down as it exits — a subtle detail that reads as more considered than a one-directional scale. This three-point mapping pattern generalizes well beyond scale, too — the same technique applied to opacity, rotation, or blur produces an "enter, peak, exit" arc for any property, which is a genuinely reusable building block once you understand it rather than a scale-specific trick.
## 7. Perspective-Shifting 3D Grid
A grid of cards or images that subtly tilts and shifts in 3D space as the page scrolls, rather than sitting flat — a more dramatic, showcase-oriented effect than a standard scroll reveal. This one is genuinely complex to hand-build well (coordinating individual card rotation, depth, and stagger across a full grid), which is exactly the kind of effect worth reaching for a pre-built option on — FramerHub's [Scroll 3D Grid component](/components/scroll-3d-grid) handles the full coordinated grid effect with grid size, depth, and scroll sensitivity as configurable controls.
## 8. Scroll-Driven Color/Distortion Shift
Rather than moving position, some elements shift color, contrast, or apply a distortion effect as they scroll — a more experimental, visual-effects-forward technique than a standard positional animation. FramerHub's [VFX Scroll Shift component](/components/vfx-scroll-shift) applies this kind of scroll-linked visual processing to an image or video layer, useful for a more editorial or art-directed feel than a straightforward fade or slide.
## 9. Counting Number on Scroll
Statistics and metrics (client count, years of experience, revenue figures) count up from zero to their final value as they scroll into view, rather than appearing as static text — a small detail that draws extra attention to numbers meant to impress. FramerHub's [Counter Number component](/components/counter-number) handles the counting animation, formatting (commas, currency symbols, suffixes like "+" or "K"), and trigger-on-view logic.
## 10. Parallax Depth
Background and foreground layers moving at different speeds as the page scrolls, creating an illusion of depth rather than a flat, single-plane scroll. This is involved enough to deserve its own dedicated walkthrough — our [parallax scroll guide](/blog/parallax-scroll-framer) covers the full implementation, including the native Framer option and a multi-layer code approach using `useScroll` and `useTransform`.
## Choosing Which Effects to Combine
The single most common mistake we see across real client sites isn't using too few of these effects — it's stacking too many of them at once, all firing within the first two or three scrolls of the page. A page with a fade-up hero, a staggered feature grid, a progress bar, a counting stat section, AND a 3D grid all firing within the first two scrolls is exhausting rather than impressive. A better approach: pick one "signature" effect that matches your brand's personality most closely (the 3D grid for a bold, showcase-driven brand; a clean fade-up for a calm, editorial one) and use it as your dominant motion language, then reserve 1-2 supporting effects (a progress bar, a counter) for the specific content types they suit best. Consistency in *how* things move reads as more intentional than variety for its own sake.
If your site also has sections that need to stay pinned in place while content scrolls past them, that's a distinct pattern from anything covered here — our [sticky scroll sections guide](/blog/sticky-scroll-sections-framer) covers that specific technique, and our [horizontal scroll guide](/blog/framer-horizontal-scroll-guide) covers scroll-jacking a section to move sideways instead of down.
## Performance Checklist Across All Ten
Regardless of which effects you use, a few rules apply consistently:
- **Drive animation with transform and opacity**, not `top`, `left`, `width`, or `margin` — the former are GPU-composited, the latter trigger layout recalculation on every scroll frame.
- **Use viewport={{ once: true }}** on trigger-once reveals so they don't replay on every scroll pass.
- **Limit simultaneously active scroll listeners** — a page with a dozen independently-tracked `useScroll` hooks compounds real per-frame cost.
- **Test on a throttled CPU profile**, not just a development machine, especially for the more visually complex effects (3D grid, VFX shift).
## Where to Get These Components
Several of the effects above — Scroll Text Reveal, Scroll Image Reveal, Scroll 3D Grid, VFX Scroll Shift, and Counter Number — are available pre-built in FramerHub's [component library](/components), browsable and droppable through the [Components plugin](/plugins/framer-components), if hand-coding and tuning each one isn't the best use of your time on a given project.
## FAQ
**How many scroll animations should one page use?**
Fewer than you'd think — 3 to 5 distinct scroll effects spread across a full page is usually the effective range. Applying every animation in this list to a single page competes with itself; the goal is a few well-placed moments, not constant motion throughout.
**Do scroll animations hurt page performance?**
Only if implemented poorly. Animations driven by transform and opacity (GPU-composited) are cheap; animations driven by layout-affecting properties like top or width are expensive. Most of the effects in this guide use the former.
**Should scroll animations replay every time or only once?**
For most content reveals (fade-ins, text reveals), once is standard — replaying every time a visitor scrolls back up and down past a section gets repetitive fast. Continuous effects like parallax and progress bars are the exception, since they're meant to track scroll position continuously rather than trigger once.
**What's the easiest scroll animation to start with?**
A simple fade-and-slide-up reveal on scroll into view — it's the least visually risky, works on almost any content type, and Framer's native Scroll Effect on individual layers can produce a basic working version with no code at all.
**Do scroll animations need to respect prefers-reduced-motion?**
Yes, across the board. Provide a reduced or instant-appear fallback for every effect in this list when that OS-level preference is set, since none of these effects carry information that's lost by skipping the motion.