Animation Engine
Scrollytelling
Pin one column of a Section as a media panel while the other column’s steps scroll past — the pinned media transitions to match the active step (the Apple / Stripe “pinned steps” pattern). 29 transition styles + a Direction option, a two-column builder model, on-demand and reduced-motion safe.
Pinned media, scrolling steps
Scroll — the image follows the story.
This Section pins its media column while the captions scroll past; the pinned image crossfades to match each step. Mapped by index — step 1 shows media 1, and so on. Build it from two columns, no code.
01
Capture the moment
Each caption locks its image to the pinned panel as you scroll to it.
02
Shape the story
The media crossfades to match — it rides your two columns, no shortcodes.
03
Ship it clean
Pure CSS sticky + one IntersectionObserver. Loads only on pages that use it.
Directional
The same idea, wiped sideways
04
A clip-path wipe
Directional styles — Slide, Push, Cover, Curtain, Clip Wipe — take up / down / left / right.
05
Pick a style
29 in all — fade & scale, 3D, reveal / mask, FX and a WebGL warp.
06
Make it yours
Choose the media side, transition speed, intensity and a progress rail.
Transition styles
29 ways the pinned media changes between steps
Crossfade
Slide
Zoom
Zoom Blur
Blur
Duotone
Dissolve
Ken Burns
Push
Cover
Curtain
Split
Horizontal
Flip
Cube
Tilt 3D
Page Turn
Clip Wipe
Iris
Barn Doors
Blinds
Glitch
Flash
Scan
Color Shift
Parallax
Pixelate
Frame Seq
Liquid
How to set it up
Add it in under a minute
- Build a Section with two columns — stack images in one, step captions in the other (one caption element per step).
- On the Section → Animations → Scrollytelling, pick a style.
- Set the Media side, and for directional styles a Direction, plus a progress rail.
- Save and scroll — the pinned media follows the steps.
Free & open source
Build with this element, free.
Install the framework and the Bootstrap 5 theme, then drag this element into any page.