Editorial Scrollytelling
A sticky editorial media rail that morphs between section-defined aspect ratios with Flip, directional image wipes, layered drift and a velocity-reactive settle while the prose stays in normal document flow.
About This Effect
A reusable editorial scrollytelling effect built around a media handoff rather than a crossfade. The newsroom typography, palette and article copy belong to the demo and can be replaced; the product is the sticky media rail, shape morph, directional wipe and layered settle attached through documented data hooks. The prose remains in ordinary document flow, so a section can carry several real paragraphs rather than a single caption.
Read the full effect overview
When the next section takes over, the picture panel does not fade. Every section declares a different shape, and GSAP Flip morphs the panel's real width and height from the outgoing shape into the incoming one, so the photograph reflows into the new frame instead of being stretched into it. The demo opens on a 21:9 panorama and steps through portrait, 3:2 and square, so the first handoff a reader sees is the largest change the effect makes.
The morph overshoots its target and relaxes into it, the new photograph wipes in behind a moving mask whose direction follows the scroll direction, and the section markers move on the frame the shape lands. Scrolling back reverses all three.
Nothing is pinned and nothing is clipped, so the article is readable at any resting scroll position, prints, and survives with no JavaScript at all. Scroll velocity adds a clamped skew and stretch to the panel that springs back out through gsap.quickTo. Section count is read from the DOM, so adding or removing a section re-fits the article on refresh.
What's Included
- A sticky media rail beside prose in ordinary document flow, holding each photograph for however long its section takes to read
- Shape-to-shape handoffs with Flip animating real width and height, so each photograph reflows into its new crop instead of stretching
- Direction-aware mask wipes, a moving accent edge and a slower image drift that settles after the frame for a layered transition
- One replaceable image, picture or video slot per section, with six aspect-ratio presets and support for custom CSS-defined shapes
- One ScrollTrigger per section with function-based handoff points, so variable-length chapters and scroll reversals need no fixed timeline
- Velocity-reactive skew, stretch and lag on fine pointers, clamped and released through gsap.quickTo with an elastic settle
- A stacked mobile composition with the same shape morph, plus keyboard-operable section controls and an aria-live announcement
- Complete reduced-motion and no-JavaScript fallbacks that preserve every photograph and paragraph in readable document order
Perfect For
- News features and long-reads where each beat is carried by a photograph in a different crop, opening on a panorama
- Brand and magazine storytelling that needs several paragraphs per image rather than a caption
- Case studies and annual reports where the supporting image changes format from section to section
- Documentary or campaign pages built around a commissioned photography set
- Editorial product stories where the writing has to stay readable, printable and indexable
How It Works
The article is ordinary document flow and the picture column is a `position: sticky` block beside it, so the photograph holds for exactly as long as its section's prose takes to pass. Nothing is pinned, nothing is translated and nothing is clipped, which is what allows several paragraphs per section and what makes the page correct with no JavaScript at all.
One ScrollTrigger per section spans that section's own prose, starting and ending at a handover line measured from the viewport. A section takes the picture over when its first line crosses that line going down and takes it back when its last line crosses it going up, so a reversal is the same code path as an advance, and a section that is four paragraphs long simply holds for longer. The line is a function value under invalidateOnRefresh, so a resize or a mobile address bar sliding away re-measures it rather than reusing a cached number.
On a change, Flip.getState records the panel's live rect, any half-finished morph is killed and its inline styles cleared, the new shape's data attribute is applied, and Flip.from animates the frame's width and height into place with a back.out ease. The incoming photograph layer starts fully clipped from the side the scroll came from and tweens its clip-path open beneath the accent edge, while the image itself drifts in from the same direction and settles just after the frame. That layered timing is what makes the handoff feel composed, and a reversal wipes and drifts back rather than replaying forwards.
Nothing is cached in pixels. The stuck column is a size container and each shape's height is min(a share of that column's height, the height at which that shape would exactly fill its width), so every aspect ratio stays true at any window size. Scroll velocity from getVelocity is clamped, mapped to degrees and pushed through gsap.quickTo with a back.out ease, driving a skew, a scale stretch and a lag on the panel from one number; a ticker watchdog guarantees the release, since scroll events stop firing the moment the page settles.