162
AI ready

Keyhole Zoom

£7
or the whole Vault, £99
Skip the demo Open in new tab

Pinned scroll section that flies the camera through a keyhole in a door, carrying a painted headline off with it, and lands on the picture behind at full bleed under a closing message.

ScrollTrigger advanced
5 more details
pinningscrubzoomparallaxscroll-storytelling

Released

About this effect

A scroll section where the opening is a real shape. A door fills the stage with a brass plate at its centre, and a sliver of lit room shows through the keyhole. Scrolling flies the camera through that keyhole until its edge passes the viewport on every side, and the room behind lands full bleed.

Read the full effect overview

The headline is painted on the door, so it grows with the door and flies off past the edges. A closing heading and paragraph arrive once the picture has landed. The media slot takes an image or a muted looping video, and the section can be used more than once on a page, each with its own picture, words and opening.

Keyhole Zoom - GSAP animation effect preview

What's included

8 items
  • Fly through a keyhole, or any shape you cut, on one pinned and fully reversible scroll
  • An even-feeling zoom that passes the opening beyond all four corners at any stage shape, worked out from one circle you measure in your image
  • A headline painted on the door, either side of the plate on desktop and above and below it on phones, that stays locked to the door as it flies off
  • A room behind that backs away as you enter and lands exactly full bleed at 1:1, with no transform left on it
  • Warm light round the opening that the brass catches more strongly as you approach
  • A closing heading and paragraph over the landed picture, readable with a scrim only where the text sits
  • An image or a muted looping video in the media slot, and several independent instances on one page
  • Accessible: a real heading, and a static full-bleed layout with all the text for reduced motion, no JavaScript and a blocked CDN

Perfect for

5 use cases
  • Libraries, members' clubs and venues that want the visitor to feel they have stepped inside
  • Hotel, restaurant and interiors pages leading from a front door into the room
  • Editorial features and campaign pages built around a reveal or a secret
  • Museum, theatre and exhibition sites opening onto a space or a production
  • Product stories told as chapters, with a different opening and picture for each

How it works

2 sections

A pinned ScrollTrigger scrubs one value across the section, and every part of the scene is worked out from it, which is what makes reversal exact. The camera moves in log space, so the zoom reads at an even pace, and the distance it has to travel comes from the circle you give it and the current stage size.

The door stays sharp and light on the GPU at very high zoom because only what is on screen is ever drawn. The media is laid out at its final size from the start, so it lands at a true 1:1. Touch devices get a shorter pin distance, and reduced-motion visitors a static full-bleed layout with no pin.

Plugins ScrollTrigger
Difficulty Advanced
Includes HTML + JS + CSS source, documentation, AI setup prompt, lifetime updates

Lighthouse, as measured

Google Lighthouse on this effect's demo, from the latest scan. A measurement of the demo as shipped, not a promise for your page.

Accessibility
100
Best practices
100

No performance score, on purpose. That figure depends on how you deploy: your server's compression and caching, your CDN, the connection and the device doing the test, none of which the code controls. The same page can score very differently on two consecutive runs, so measure it where it will live.

The Vault opens this source and the whole library.

Each product gives you the HTML, CSS and JavaScript source, the full documentation and an AI setup prompt, licensed for unlimited personal and commercial projects. Every paid product is tested for desktop and mobile layouts, reduced-motion handling, animation cleanup and keyboard controls wherever there is something to operate.

£99 Get the Vault See what you get

One payment, over 300 products, and future additions to the library.

Documentation

Quick Start

1. Add to your HTML <head>:

In your downloadThe working code for this step, in index.html.

2. Add before the closing </body> tag:

In your downloadThe working code for this step, in index.html.

3. Add the section anywhere in your <body>:

In your downloadThe working code for this step, in index.html.

Using It With Your Own Design

The three slots. .khz-headline is the line painted on the door, in two parts. .khz-media holds the picture. .khz-payoff holds the closing heading and paragraph.

Any image or video goes in the media slot. It is sized and cropped by CSS, so it needs no preparation. To use a muted looping video, replace the <img> with:

In your downloadThe working code for this step, in index.html.

Crop it with --khz-media-position on .khz (for example 30% 50%). Set --khz-room-origin to change the point the room settles towards. The default, 50% 100%, keeps the lower part of the picture in the keyhole at rest, so choose an origin that puts the most inviting part of your picture there.

Preparing a door or any other shaped opening.

  1. Have or generate an image of the object with the opening filled with one flat colour that appears nowhere else in it.
  2. Key that colour out to real transparency with a soft edge of a pixel or two. Remove any tint it left on the edge, then export a WebP or PNG with alpha.
  3. Measure the largest circle that fits inside the opening: its centre and its radius, in the image's own pixels. Only fully clear pixels count, so check the radius against the alpha rather than the outline.
  4. Put those three numbers in data-hole="cx cy r", and set the image's real width and height on the <img>.

The opening can be any shape, because the camera only needs that circle: it flies towards its centre until the circle encloses all four corners of the stage. Where the shape is wider than the circle, the opening simply clears the viewport a little sooner.

The door is cropped like object-fit: cover, centred, so put the plate at the middle of the image. On landscape stages the width sets the scale; on phones the height does. To have space above and below the plate on phones, make the image about as tall as it is wide with the plate taking roughly the middle half. The bundled door is built this way.

What is only the demo's styling. The font, the cream --khz-ink, the ground --khz-ground, the text sizes and the cue. .khz-cue can be deleted. The headline positions are ordinary CSS: move .khz-headline-part to suit your plate, and keep them in the headline layer so that they stay on the door. The two parts sit either side of the plate, and in portrait above and below it.

CSS the effect depends on. .khz-stage needs overflow: hidden and a positioned stacking order: media, door, glow, scrim, headline, payoff. The .khz-door and .khz-canvas rules must keep the door covering the stage. Keep the flight rules inside the prefers-reduced-motion: no-preference block and behind .has-js, so that the resting layout is what visitors get with no JavaScript. Use the scrim only as strong as your picture needs: body text should reach 4.5:1.

Options

Set these on .khz.

Attribute Values Default Description
data-hole "cx cy r" Required A circle inside the opening, in the door image's pixels
data-khz-distance Number 320 Pin distance as a percentage of the stage height. Touch devices use 70 percent of it
data-khz-scrub Seconds, or 0 0.6 Scrub smoothing. 0 ties the camera directly to the scrollbar
data-khz-depth 1 or more 1.25 The room's starting scale. 1 turns the depth shift off

Accessibility

  • Reduced motion: a static full-bleed picture with the headline and closing text visible, and no pin. It responds if the setting changes while the page is open.
  • No JavaScript or a blocked CDN: the same static layout. The door is not shown, so nothing covers the picture.
  • Screen readers: the headline is one real heading that reads as a sentence. The door, canvas and glow are hidden from assistive technology. Give the media a useful alt.
  • Contrast: the scrim brings the closing text to at least 4.5:1 on the demo picture. Check it again on your own.
  • Touch: the same flight on a shorter pin distance, with the headline stacked above and below the plate in portrait.

Dependencies

Required:

  • GSAP 3.12+ (the demo is built against 3.15.0)
  • ScrollTrigger plugin

Smooth scrolling is not needed, and the effect does not include it.

Also in your download: the full source, worked examples, the events and programmatic API, and the class reference.

£7