Tips & tricks
- Scroll
- Animations
Tips & tricks
- Scroll
- Animations
Tips & tricks
- Scroll
- Animations
8 Stunning Scroll Animations in Framer (With Remix Links)
If there’s one thing that makes a website feel alive, it’s scroll animations. They give your site depth, personality, and that “wait… how did they do that?” factor. I’ve put together 8 stunning scroll animations you can remix right now. Each one comes straight from real-world website inspiration and has been rebuilt natively in Framer so you can peek under the hood.
Posted by
Nandi
Table of contents
Rainbow stretching footer.
Rainbow stretching footer.
Rainbow stretching footer.
This Rainbow stretching footer animation is pure joy. Inspired by the Dia browser site, the footer reveals a giant rainbow as you scroll to the bottom. The trick is a scroll transform that rotates the rainbow image from 90° to 0° on the X-axis, anchored at the bottom center, so it looks like it’s stretching up into place.
Layered text animations (also scroll-triggered) add to the playful vibe, stacking up in motion as the rainbow appears.
2. Immersive scroll zoom
This Rainbow stretching footer animation is pure joy. Inspired by the Dia browser site, the footer reveals a giant rainbow as you scroll to the bottom. The trick is a scroll transform that rotates the rainbow image from 90° to 0° on the X-axis, anchored at the bottom center, so it looks like it’s stretching up into place.
Layered text animations (also scroll-triggered) add to the playful vibe, stacking up in motion as the rainbow appears.
2. Immersive scroll zoom
This Rainbow stretching footer animation is pure joy. Inspired by the Dia browser site, the footer reveals a giant rainbow as you scroll to the bottom. The trick is a scroll transform that rotates the rainbow image from 90° to 0° on the X-axis, anchored at the bottom center, so it looks like it’s stretching up into place.
Layered text animations (also scroll-triggered) add to the playful vibe, stacking up in motion as the rainbow appears.
2. Immersive scroll zoom
Immersive scroll zoom.
Immersive scroll zoom.
Immersive scroll zoom.
Ever wanted your hero section to feel like you’re zooming right into the experience? This Immersive scroll zoom effect, inspired by the Telescope site, uses sticky frames, preserve-3D, and layered image cutouts.
Each cutout scales progressively as you scroll, while 3D rotations and z-index layering create a feeling of moving through the visuals. Text elements also fade and slide in, perfectly synced with the zoom.
3. Stacking cards on scroll
Ever wanted your hero section to feel like you’re zooming right into the experience? This Immersive scroll zoom effect, inspired by the Telescope site, uses sticky frames, preserve-3D, and layered image cutouts.
Each cutout scales progressively as you scroll, while 3D rotations and z-index layering create a feeling of moving through the visuals. Text elements also fade and slide in, perfectly synced with the zoom.
3. Stacking cards on scroll
Ever wanted your hero section to feel like you’re zooming right into the experience? This Immersive scroll zoom effect, inspired by the Telescope site, uses sticky frames, preserve-3D, and layered image cutouts.
Each cutout scales progressively as you scroll, while 3D rotations and z-index layering create a feeling of moving through the visuals. Text elements also fade and slide in, perfectly synced with the zoom.
3. Stacking cards on scroll
Stacking cards on scroll.
Stacking cards on scroll.
Stacking cards on scroll.
A clean, minimal stacking cards on scroll effect that’s strangely addictive to scroll. Four cards sit inside a scroll container, each with a sticky position and a slightly higher top offset than the last.
As you scroll, each card scales down a bit and stacks neatly over the one before it—simple, elegant, and perfect for product feature sections.
4. Card stack scroll
A clean, minimal stacking cards on scroll effect that’s strangely addictive to scroll. Four cards sit inside a scroll container, each with a sticky position and a slightly higher top offset than the last.
As you scroll, each card scales down a bit and stacks neatly over the one before it—simple, elegant, and perfect for product feature sections.
4. Card stack scroll
A clean, minimal stacking cards on scroll effect that’s strangely addictive to scroll. Four cards sit inside a scroll container, each with a sticky position and a slightly higher top offset than the last.
As you scroll, each card scales down a bit and stacks neatly over the one before it—simple, elegant, and perfect for product feature sections.
4. Card stack scroll
Card stack scroll.
Card stack scroll.
Card stack scroll.
This Card stack scroll is straight out of a Codrops 3D motion demo, cards stacked in 3D space, rotating from 360° to 0° as they move from right to left on scroll.
It’s all inside a wrapper rotated on the Y-axis, with scroll transforms controlling both rotation and movement. The parent frame has 3D perspective applied, so the depth feels real.
5. Text repetition on scroll
This Card stack scroll is straight out of a Codrops 3D motion demo, cards stacked in 3D space, rotating from 360° to 0° as they move from right to left on scroll.
It’s all inside a wrapper rotated on the Y-axis, with scroll transforms controlling both rotation and movement. The parent frame has 3D perspective applied, so the depth feels real.
5. Text repetition on scroll
This Card stack scroll is straight out of a Codrops 3D motion demo, cards stacked in 3D space, rotating from 360° to 0° as they move from right to left on scroll.
It’s all inside a wrapper rotated on the Y-axis, with scroll transforms controlling both rotation and movement. The parent frame has 3D perspective applied, so the depth feels real.
5. Text repetition on scroll
Text repetition on scroll.
Text repetition on scroll.
Text repetition on scroll.
This Text repetition effect turns text into a dynamic background element. Multiple text layers are stacked with absolute positioning, then given different scroll speeds.
Top layers move up, bottom layers move down, creating a hypnotic parallax feel. Inspired by the Dr. Dabber site, it’s a quick way to make typography part of your storytelling.
6. Circular scroll
This Text repetition effect turns text into a dynamic background element. Multiple text layers are stacked with absolute positioning, then given different scroll speeds.
Top layers move up, bottom layers move down, creating a hypnotic parallax feel. Inspired by the Dr. Dabber site, it’s a quick way to make typography part of your storytelling.
6. Circular scroll
This Text repetition effect turns text into a dynamic background element. Multiple text layers are stacked with absolute positioning, then given different scroll speeds.
Top layers move up, bottom layers move down, creating a hypnotic parallax feel. Inspired by the Dr. Dabber site, it’s a quick way to make typography part of your storytelling.
6. Circular scroll
Circular scroll.
Circular scroll.
Circular scroll.
The way this Circular scroll works is with two giant circles (one rotating clockwise, one counterclockwise) that scale from tiny to massive as you scroll. The opacity ramps up at the same time, so the reveal feels smooth.
Text inside uses a scrambled-letters animation, all triggered via a sticky frame and scroll transforms. It’s simple but feels like a centerpiece effect when done right.
7. Cross-section scroll
The way this Circular scroll works is with two giant circles (one rotating clockwise, one counterclockwise) that scale from tiny to massive as you scroll. The opacity ramps up at the same time, so the reveal feels smooth.
Text inside uses a scrambled-letters animation, all triggered via a sticky frame and scroll transforms. It’s simple but feels like a centerpiece effect when done right.
7. Cross-section scroll
The way this Circular scroll works is with two giant circles (one rotating clockwise, one counterclockwise) that scale from tiny to massive as you scroll. The opacity ramps up at the same time, so the reveal feels smooth.
Text inside uses a scrambled-letters animation, all triggered via a sticky frame and scroll transforms. It’s simple but feels like a centerpiece effect when done right.
7. Cross-section scroll
Cross-section scroll.
Cross-section scroll.
Cross-section scroll.
Here, content “inserts” itself into view like you’re revealing layers of a diagram. Cards start hidden at 0 opacity, then fade and scale in using a scroll variant trigger.
Images inside the cards also animate independently, scaling from smaller sizes to their full size. The Cross-section scroll is a perfect storytelling tool for explaining processes or product details.
8. Expanding cards scroll
Here, content “inserts” itself into view like you’re revealing layers of a diagram. Cards start hidden at 0 opacity, then fade and scale in using a scroll variant trigger.
Images inside the cards also animate independently, scaling from smaller sizes to their full size. The Cross-section scroll is a perfect storytelling tool for explaining processes or product details.
8. Expanding cards scroll
Here, content “inserts” itself into view like you’re revealing layers of a diagram. Cards start hidden at 0 opacity, then fade and scale in using a scroll variant trigger.
Images inside the cards also animate independently, scaling from smaller sizes to their full size. The Cross-section scroll is a perfect storytelling tool for explaining processes or product details.
8. Expanding cards scroll
Expanding cards scroll.
Expanding cards scroll.
Expanding cards scroll.
From the eBay Playbook site, this Expanding cards scroll starts with neatly stacked, slightly rotated images. As you scroll, they expand diagonally into a dynamic spread.
It’s powered by a simple variant switch from “default” to “expanded,” triggered when the card hits the center of the viewport inside a sticky frame. Minimal setup, maximum impact.
Wrapping up
All 8 of these effects are built entirely with Framer’s native tools, no custom code, no external libraries. If you want to make your site unforgettable, scroll animations are one of the easiest wins.
Remix them, tweak them, combine them, and make them your own. Your visitors will thank you… and probably scroll just a little slower to take it all in.
From the eBay Playbook site, this Expanding cards scroll starts with neatly stacked, slightly rotated images. As you scroll, they expand diagonally into a dynamic spread.
It’s powered by a simple variant switch from “default” to “expanded,” triggered when the card hits the center of the viewport inside a sticky frame. Minimal setup, maximum impact.
Wrapping up
All 8 of these effects are built entirely with Framer’s native tools, no custom code, no external libraries. If you want to make your site unforgettable, scroll animations are one of the easiest wins.
Remix them, tweak them, combine them, and make them your own. Your visitors will thank you… and probably scroll just a little slower to take it all in.
From the eBay Playbook site, this Expanding cards scroll starts with neatly stacked, slightly rotated images. As you scroll, they expand diagonally into a dynamic spread.
It’s powered by a simple variant switch from “default” to “expanded,” triggered when the card hits the center of the viewport inside a sticky frame. Minimal setup, maximum impact.
Wrapping up
All 8 of these effects are built entirely with Framer’s native tools, no custom code, no external libraries. If you want to make your site unforgettable, scroll animations are one of the easiest wins.
Remix them, tweak them, combine them, and make them your own. Your visitors will thank you… and probably scroll just a little slower to take it all in.
