# 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.
Canonical: https://gsapvault.com/effects/scroll-zoom-portal
Live demo: https://gsapvault.com/demos/scroll-zoom-portal/index.html
| Property | Value |
|----------|-------|
| Type | effect |
| Tier | paid |
| Price | £5 |
| Difficulty | intermediate |
| Plugins | ScrollTrigger |
| Techniques | pinning, scrub, zoom, clip-path, parallax, scroll-storytelling |
| Uses Lenis | Yes |
## Overview
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.
## Features
- 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
## 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
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.
## Integration Preview
How this effect integrates into a page. The full documentation (examples, events, programmatic API, customization guide) ships with the download.
### Quick Start
**1. Add to your HTML ``:**
```html
```
**2. Add before closing `` tag:**
```html
```
**3. Add the effect HTML anywhere in your ``:**
```html
```
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 |
### 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)
## What You Get
- `index.html`: working demo page
- `assets/script.js`: commented, readable source
- `assets/style.css`: effect styles
- `README.md`: full documentation with examples and framework integration notes
- `LICENSE.txt`: standard license terms
- Lifetime updates: re-download anytime from your library
## Get the Code
This is a premium effect. The standard license costs £5 one-time and covers unlimited personal and commercial projects with no attribution required. The only restrictions: no redistribution of the code itself and no competing effect libraries.
- [Buy Scroll Zoom Portal](https://gsapvault.com/effects/scroll-zoom-portal)
- [Effects & Templates Vault (£29 one-time, best value): every current and future effect and template](https://gsapvault.com/effects)
## Judge the Code Quality First
These related effects are free with complete source published, written to the same production standard (cleanup functions, reduced-motion support, framework-agnostic):
- [Scroll Progress Indicator](https://gsapvault.com/effects/scroll-progress.md): Four scroll progress visualization styles using GSAP ScrollTrigger. Includes animated bar, circle, rail track, and percentage counter indicators.
- [CSS Scroll Reveal](https://gsapvault.com/effects/css-scroll-reveal.md): Pure CSS scroll-triggered entrance animations. No JavaScript required. Uses native CSS scroll-driven animations for fade, slide, and scale effects.
- [Parallax Hero](https://gsapvault.com/effects/parallax-hero.md): A layered hero section where background blobs, headline, and foreground labels scroll at different speeds, creating scrubbed parallax depth.
---
From [GSAP Vault](https://gsapvault.com): production-ready GSAP animation effects. Full catalog for agents: https://gsapvault.com/llms-full.txt