Scroll Zoom Portal
Pinned scroll section where a small framed panel zooms up to swallow the viewport, parting the headline around it, so scrolling feels like stepping through a portal into the next scene.
About This Effect
A pinned zoom-through built on ScrollTrigger: a small framed panel sits at the centre of the viewport, and scrolling scales it up until it swallows the whole screen, like stepping through a portal into the next scene. The world inside the frame counter-scales against the zoom, so the scene holds perfectly still while the window around it grows, landing pixel-sharp at full-bleed.
Around the portal, the headline splits into two halves that part with rising letter-spacing and a touch of blur, the page backdrop shifts colour grade, and a caption chip drifts away with parallax. Once full-bleed, the content inside fades and rises in and the pin releases into normal scrolling with no jump; the whole passage is scrubbed and runs cleanly in both directions.
What's Included
- Scrub-linked zoom-through: the portal card scales from framed panel to full-bleed and back, driven entirely by scroll
- Counter-scaled inner scene: one proxy tween keeps frame and world exactly inverse, so the scene never lurches and lands at a pixel-sharp 1:1
- Border-radius morph compensated for scale, so the corner rounding shrinks smoothly to zero instead of ballooning mid-zoom
- Headline halves part around the portal with opposing travel, rising letter-spacing, and a touch of blur
- Backdrop colour-grade layer warms as the portal opens, with a caption chip drifting up on a small parallax cue
- Inner content fades and rises once full-bleed, then the pin releases seamlessly into normal scroll
- Six data attributes tune pin distance, scrub smoothing, corner radius, headline spread, blur amount, and reveal timing
- Accessible: reduced-motion visitors get an unpinned full-bleed portal with every piece of text visible statically
Perfect For
- Travel and expedition landing pages that step visitors into a destination
- Product launches where the hero panel opens into the product's world
- Portfolio and agency case studies transitioning from teaser card to full story
- Campaign microsites and editorial features built around one scroll-driven set piece
- Interior, venue, and real-estate pages selling the feeling of walking in
How It Works
A pinned ScrollTrigger scrubs one master timeline across the section. The zoom is driven by a single proxy tween: on every update it computes the cover scale the card needs to swallow the viewport, applies it with gsap.quickSetter, sets the inner scene to exactly 1/scale so the world stays screen-stable, and divides the border-radius by the scale so the corner morph reads linearly. Because the scene is laid out at viewport size and cropped by the card like a window, it lands at a true 1:1 when full-bleed, so everything inside stays sharp.
The headline halves, colour-grade layer, caption chip, and reveal content are ordinary tweens placed on the same timeline, and gsap.matchMedia routes coarse pointers to a shorter pin distance and reduced-motion visitors to a static full-bleed layout with no pin at all.