029
Optional AI setup

Scroll Zoom Portal

£5

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.

ScrollTrigger Lenis intermediate
5 more details
pinningscrubzoomparallaxscroll-storytelling
Scroll Zoom Portal - GSAP animation effect preview

This demo reads better at your own screen size than in the frame below:

Open the demo in a new tab
Open Scroll Zoom Portal demo in new tab

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. The demo zooms into one bundled photograph, but .szp-scene takes anything laid out at viewport size: an image, a video, a canvas.

Read the full effect overview

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

8 items
  • 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 layer deepens behind the portal as it opens, with the scroll cue drifting up on a small parallax offset
  • 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

5 use cases
  • 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

2 sections

A pinned ScrollTrigger scrubs one master timeline across the section. The zoom is one number: each update works out the scale the card needs to swallow the viewport, applies it, sets the inner scene to exactly the inverse so the world stays screen-stable, and divides the corner radius by the same number 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 on the same timeline. Touch devices get a shorter pin distance, and reduced-motion visitors a static full-bleed layout with no pin at all.

Plugins ScrollTrigger
Difficulty Intermediate
Smooth scroll Lenis integration
Includes HTML + JS + CSS source, documentation, AI setup prompt, lifetime updates

Paid effect

Purchase to unlock the code.

Buying Scroll Zoom Portal opens the HTML, CSS and JavaScript source, the full documentation, an AI setup prompt for your editor, and every update we ship to it. Standard license: unlimited personal and commercial projects.

£5 Standard license, unlimited projects

Browse free effects

Documentation

Quick Start

1. Add to your HTML <head>:

Code snippet omitted: it ships with the download.

2. Add before closing </body> tag:

Code snippet omitted: it ships with the download.

3. Add the effect HTML anywhere in your <body>:

Code snippet omitted: it ships with the download.

Every layer except .szp-stage, .szp-card, and .szp-scene is optional; the script skips anything that is missing.

Options

All attributes go on the element carrying data-zoom-portal.

Attribute Values Default Description
data-portal-distance Any number 220 Pin length as a percentage of viewport height. Touch devices automatically use 80% of it so the gesture count stays reasonable
data-portal-scrub Number or true 1 Scrub smoothing in seconds. true hard-links the timeline 1:1 to the scrollbar
data-portal-radius Any number 28 Corner radius of the framed panel in px, morphed to 0 during the zoom
data-portal-spread Any number 46 How far each headline half travels, as a percentage of viewport width
data-portal-blur Any number 10 Peak blur on the parting headline halves, in px
data-portal-reveal 0.4 to 0.9 0.68 Where in the timeline the inner content starts revealing. Clamped so it always lands after the zoom

Swapping the scene

The demo zooms into one photograph, but .szp-scene accepts anything: an image, a video, a WebGL canvas. Three things to keep:

  1. Size it to the viewport. Under .szp-js the scene is 100vw by 100svh, centred in the card. That is what makes the world hold still while the frame grows, and what makes it land at exactly 1:1 when full-bleed.
  2. Let the card do the cropping. The card has overflow: hidden; the scene should not clip itself.
  3. Ship the image at about twice the widest viewport you care about. The scene is full-bleed at the end of the zoom, so anything smaller is visibly soft exactly when it fills the screen.

Choose a photograph with real depth: an archway, a tunnel, a corridor, a gap between hills. The card starts as a portrait window onto the middle of the scene, so put the thing you are travelling towards near the centre. A wide photograph on a portrait phone gets cropped hard, which is why the demo nudges object-position on narrow viewports rather than letting the subject slide off the edge.

Image

assets/tunnel.webp is a bundled, optimised derivative (2400 × 1500, ~232 KB), not a hotlink, and it is used unmodified: no tint, no duotone, no colour overlay. Everything the reveal text needs for contrast is on .szp-scrim, which sits under the words rather than over the picture. Swap the file, or change the src, and nothing else has to move.

Credit: Two People in a Tunnel on Pexels, used under the Pexels licence (free for commercial use, no attribution required, modification permitted).

Accessibility

  • Reduced motion: prefers-reduced-motion: reduce gets no pin and no zoom. The portal renders full-bleed with the headline, chip, and inner content all visible statically
  • No JavaScript: the default layout is a normal stacked flow with everything visible; hidden states only exist behind the JS-added .szp-js class
  • Keyboard: the reveal content is hidden with visibility: hidden while off-stage, so its links and buttons are unfocusable until they are actually visible
  • Screen readers: decorative layers (.szp-scene, .szp-grade, .szp-frame, .szp-scrim) are aria-hidden; give the section a meaningful aria-label

Dependencies

Required:

  • GSAP 3.12+
  • ScrollTrigger plugin

Optional:

  • Lenis (smooth scroll; the script wires it up automatically when present)

Worked examples, the events and programmatic API, and the class reference ship with the download, alongside the full source.

Your cart

Your cart is empty

The Vault £99

Everything in the catalogue, plus everything we release next.

Or browse effects, templates or UI elements.