The people creating digital content today aren't just designers and developers. Marketers, sales professionals, and communications teams are building their own interactive stories — thanks to no-code platforms, AI-assisted design, and drag-and-drop editors. The lines between these roles are blurring, and that's a good thing.
It also means more people than ever are working with scroll animations — often without a guide that speaks their language. This blog is that guide: a visual, practical walkthrough of the scroll animation types that power scrollytelling and digital storytelling. What they look like, when to use them, and when not to.
Prefer watching? We cover the same scroll animations in this video, plus tips on how to combine them.
What are scroll animations?
Scroll animations are visual effects that are triggered or controlled by the user's scrolling behaviour. Unlike timed animations that play automatically when a page loads, scroll animations respond directly to how a reader navigates the page. Scroll down and elements appear, move, or transform. Scroll back and they reverse. This makes them ideal for interactive, long-form content where the reader controls the pace.
There are two ways scroll animations typically work. Some are scroll-triggered: they activate when an element enters the screen, like a fade-in that plays once you scroll to it. Others are scroll-linked: they're tied directly to the scroll position, like a parallax effect that moves continuously as you scroll up or down. Most digital stories use a mix of both — triggered animations for revealing content, and linked animations for creating depth and interactivity.
Used well, scroll animations make content impossible to scroll past. Used poorly, they distract and overwhelm.
They come in many forms — from fades and movement to parallax, scale transitions, and more. Here are eight worth knowing, starting with the ones that tend to make the biggest visual impact.
Scroll animation types explained
1. Parallax
Parallax is the effect where background and foreground elements move at different speeds as you scroll, creating an illusion of depth. It's one of those animations that's hard to describe in words but instantly recognisable when you see it — the page suddenly feels less like a flat document and more like a layered environment.
When to use it: Parallax works well for large opening sections, edge-to-edge imagery, and moments where you want to create atmosphere. It's particularly effective for setting the tone at the start of a page or transitioning between major sections.
Tip: Parallax is at its best with large images and minimal text. Using it on text-heavy sections can actually make content harder to read, because the movement competes with the words. And when it comes to the speed difference between layers — subtlety wins. A slight offset is more elegant than a dramatic one.
In practice: A parallax example by Studio Dado.
2. Sticky
A sticky section is an element that stays fixed in place while the rest of the content scrolls past it. It creates a natural focal point — your eye stays anchored to one thing while the context around it changes.
What makes sticky sections especially versatile is that they don't have to live at the top of the page. An element can become sticky halfway through a section and release further down, creating a contained moment of focus rather than a permanent fixture. That flexibility is what makes them so useful for storytelling.
When to use it: Sticky sections are useful whenever something needs to remain on screen while the reader scrolls. That could be visual — like an image that stays in place while supporting text scrolls alongside it. Or it could be functional — like a navigation menu, a table of contents, or a key data point that the reader needs to reference as they move through the content.
Tip: Always give your sticky element a clear release point. If it stays pinned too long, readers may think the page is broken. The best sticky sections have a defined beginning and end — they hold attention for exactly as long as the content around them needs.
In practice: A sticky section in action (on the left) by Polska Press Grupa.
3. Keyframe animation
A keyframe animation is a scroll animation where an element changes state — its position, size, rotation, visibility, or colour — at defined scroll positions, with smooth transitions between them. It can follow a drawn path, travelling along a route as the reader scrolls and changing direction as it goes.
Keyframe animations can be short — a small element that rotates and scales over a single section — or they can extend over a longer stretch of the page, tracking an element along a continuous route as the reader scrolls. In Maglr, we refer to that longer variant as a scroll path animation, since you're essentially drawing a path down your page. It's not an official term, but it describes how many designers use keyframes in practice: as a visual thread that ties content together.
When to use it: Keyframe animations work well for guiding the reader's eye through a page — whether that's illustrating a process, adding a decorative element that travels alongside the content as you scroll, or creating a visual thread that ties sections together.
Tip: Keep the animation feeling natural. Avoid sudden changes in direction that might jar the reader's eye, and make sure the animation speed feels comfortable alongside the scroll pace. If the element is fighting the reader's scrolling rhythm, it becomes a distraction rather than a guide.
In practice: An example of keyframe animation by Renault.
4. Scrubbing video
A scrubbing video is a video whose playback is tied directly to the reader's scroll position — scroll down and the video advances, scroll back up and it reverses. The term comes from video editing, where dragging your finger or cursor across a timeline lets you move through footage frame by frame. Scrubbing on scroll applies that same principle to the browser. In Maglr, this feature is called scrub on scroll.
When to use it: Scrubbing works best for videos that are more visual than narrative — footage that doesn't need to be "watched" with sound, but instead serves as a decorative or illustrative layer that unfolds as the reader scrolls. Think of a product rotating, an environment gradually revealing itself, or an abstract visual that evolves alongside the text.
Tip: The pacing should feel balanced. What's happening in the video matters — a slow, detailed sequence needs more scroll distance to breathe, while a simpler visual can unfold over a shorter section. If the content of the video and the scroll speed feel out of sync, the experience will feel either sluggish or rushed.
In practice: Scrubbing video in The Soul of the 911 project.
5. Scrolling slideshow
A scrolling slideshow displays a series of images that switch as the reader scrolls. Rather than clicking through a traditional carousel, the scroll position determines which image is shown — each scroll step reveals the next frame in the sequence. It's a similar principle to scrubbing video — in both cases, you're scrolling through frames.
When to use it: Scrolling slideshows are great for before/after comparisons, step-by-step visual guides, portfolio showcases, or any situation where you want to present a series of images in a controlled order without relying on the reader to click.
Tip: Make sure each image in the sequence earns its place. If two consecutive frames look nearly identical, the reader won't feel like scrolling is doing anything. Each step should deliver a clear visual change.
In practice: A scrolling slideshow example by Absolute Collagen.
6. Zoom animation
A zoom animation scales an element up or down as the reader scrolls, creating the illusion of depth and moving through a page. The effect can come in many forms and intensities — from a subtle scale-up to a dramatic telescopic zoom that makes you feel like you're flying into the content.
When to use it: Zoom animations are effective for creating dramatic openings, drawing attention to detail, or transitioning between sections. They work particularly well when you want to shift the reader's perspective — zooming in to focus on something specific, or zooming out to reveal context.
Tip: Zoom animations can feel disorienting if they're too fast or too extreme, especially for readers who are sensitive to motion. Keep the scale change gradual, don't overdo the range, and consider whether a subtler zoom achieves the same effect.
In practice: Zoom animation in action by Zilveren Kruis.
7. Move
A move animation slides an element into position — from the left, right, top, bottom, or diagonally — as the reader scrolls it into view. The distance can range from a subtle shift of a few pixels to a longer slide across the screen. It's a simple way to add a playful feel to your layout or to emphasise elements at just the right moment.
When to use it: Moves work well for introducing elements onto the page or taking them away — bringing in a visual, a quote, or a data point at the moment it becomes relevant, and letting it exit when it's done. They help create a sense of flow and progression across your page.
Tip: Keep the direction of movement natural. An element that lives at the top of your page probably shouldn't slide in from the bottom. And avoid using move animations on large paragraphs of text, especially over longer distances — text flying in from the side is distracting and makes the content harder to read.
In practice: Move animation example by ADI.TV.
8. Fade
A fade animation gradually transitions an element's visibility — fading it in as it appears or fading it out as it leaves. It's an animation most people are familiar with and one of the easiest to understand.
When to use it: Since fading is all about transitioning visibility, it's naturally excellent at introducing elements onto the page and taking them away. They prevent the page from feeling like a wall of content by letting information arrive at the reader's pace. When in doubt about how to give your page a bit more flair, a fade is a safe and effective starting point.
Tip: Don't let elements fade in too slowly. A drawn-out fade on a text block means the reader is waiting to read something that's already in front of them — it feels sluggish rather than elegant. Keep it snappy enough that the animation adds polish without getting in the way.
In practice: An example of fade animations by Hamilton Lane.
Building scroll sequences
The animation types above are your individual tools. But the real craft starts when you combine them.
Combining animations
Animations can be combined within the same visual element to create richer effects. A sticky section where a slideshow plays as the reader scrolls past. A fade paired with just 20 pixels of upward movement — more polished than a flat fade, but not dramatic enough to distract. Most of the scroll experiences you see on the web that feel polished are built from exactly these kinds of combinations.
Sequencing across elements
Once you're comfortable combining animations on individual elements, the next step is thinking about how animations work together across your page. The order and timing in which elements animate shapes how your content is read.
Picture three text blocks that fade in one after another as you scroll — each appearing just after the last. All you're changing is the trigger point — and that small shift is often the difference between a page that feels static and one that feels designed.
Start building with scroll animations
Scroll animations are tools that serve your story — not the other way around. The best ones feel natural in their time and place, adding to the experience without distracting from the content.
Every animation in this guide can be created without code with Maglr. Browse our inspiration gallery for real-world examples or get started with a 14-day trial.
