158
AI ready

Arch Window Reveal

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

Pinned scroll section where tall arched windows in a flat wall look out on one continuous picture, then widen and dissolve the piers between them until the view is full bleed.

ScrollTrigger intermediate
6 more details
pinningscrubclip-pathmask-revealparallaxscroll-storytelling

Released

About this effect

A pinned scroll chapter that reads as architecture rather than as a card. The section opens on a plain wall with three tall arched windows cut through it, and the same picture runs unbroken behind all three, so a village, a stretch of sea and a lemon terrace line up as one view.

Read the full effect overview

As the visitor scrolls, the far view slides quietly behind the still wall, then the middle window climbs first and the others follow, the piers thin to slivers, the rounded tops flatten and the last seam closes. The picture lands exactly full bleed at 1:1 and a closing heading and sentence arrive over it. Any image or muted video can go in the media slot, and the section can be repeated down a page.

Arch Window Reveal - GSAP animation effect preview

What's included

9 items
  • One picture behind every window: the view is continuous across the arches, never three separate crops
  • A three-part scrub: the view drifts behind still windows, the windows grow up and down as the piers narrow, then the tops flatten and the final seam closes
  • The middle window opens first, so the mid-scroll frames have their own silhouette rather than being a halfway version of the ends
  • Lands pixel-sharp at 1:1 full bleed at any viewport shape, with no scaled raster, seam or bars
  • A soft inner shadow on each arch gives the wall thickness, and fades before the piers go
  • Three slots in the markup: a headline set on the wall, the media, and a closing payoff that arrives over the finished picture
  • Takes an image or a muted looping video, and two or more instances on a page run independently
  • Data attributes set pin distance, scrub smoothing and the number of windows; phones get two windows and a shorter pin by default
  • Accessible: reduced-motion, no-JS and blocked-CDN visitors get the full-bleed picture with all the text readable and no pin

Perfect for

5 use cases
  • Hotel, villa and holiday rental pages where the view is what is being sold
  • Property and architecture sites that want a section to feel built rather than laid out
  • Travel and destination stories told in repeated scroll chapters
  • Restaurant, spa and venue pages opening onto a landscape or a room
  • Product launches revealing one wide photograph or a looping film

How it works

2 sections

A pinned ScrollTrigger scrubs one timeline across the section. The windows are a single opening cut from one picture rather than separate images, which is what keeps the view continuous as they change shape. The picture is laid out at its final size from the start, so the landing is a true 1:1 and nothing has to be scaled up to reach it.

The wall's shape is worked out from the size of the stage and the height of the headline, so it holds up across viewport shapes and survives a resize without rebuilding the scrub. Touch devices get a shorter pin, phones get a re-cropped picture and fewer windows, and reduced-motion visitors a static full-bleed layout with every piece of text in place.

Plugins ScrollTrigger
Difficulty Intermediate
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

What the effect needs from your markup: .awr as the root, .awr-stage inside it (this is what gets pinned), and .awr-media holding one <img> or <video>. .awr-headline, .awr-scrim and .awr-payoff are optional, but any direct children of .awr-payoff are what fade in at the end. The windows' top edge is worked out from the headline's height, so a longer or two-line headline moves them down on its own. Headings can be any level: use h1 for a page's opening section and h2 for later chapters.

Your own picture: any image or video can go in the media slot. A picture with three different things across its width suits the default best, because each window then frames its own subject. Set what stays in frame when it is cropped with two custom properties:

In your downloadThe working code for this step, in style.css.

A muted looping video goes in the same place as the image:

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

What is only the demo's styling: the Gloock typeface, the wall colour --awr-wall, the ink colour --awr-ink, the type sizes. The inner shadow lives on .awr-jamb, so you can soften or remove it there.

Placing the payoff: the stylesheet sets .has-js .awr-payoff to sit over the calm patch of sea in the demo picture, and .has-js .awr-scrim to a soft patch behind it. With a different picture, move both to wherever your calm area is, or change the scrim to a full-width gradient, and keep body text at 4.5:1 against what it sits on.

CSS the effect depends on:

  • The rules under .has-js inside prefers-reduced-motion: no-preference are the animated start state. Everything outside them is the finished full-bleed layout that no-JS and reduced-motion visitors see.
  • .has-js .awr-media { visibility: hidden } stops a full picture flashing before the windows are cut. The script clears it.
  • .awr-media stays position: absolute; inset: 0, and its image or video stays width: 100%; height: 100%; object-fit: cover. That is what makes the landing exact.
  • .awr-headline sits under .awr-media, so the windows open over it.

Options

Set these on the .awr element.

Attribute Values Default Description
data-awr-distance Number 260 Pin distance as a percentage of the viewport height. Touch devices use 70 percent of this.
data-awr-scrub Seconds, or 0 0.8 Scrub smoothing. 0 links the motion directly to the scrollbar.
data-awr-count 1 to 5 3, or 2 at 640px and below Number of windows. Setting it applies at every screen width.

Accessibility

  • Reduced motion: no pin and no animation. The picture sits full bleed with the headline and payoff on it, over a stronger scrim. A change of preference while the page is open switches cleanly in either direction.
  • No JavaScript or a blocked CDN: the same static layout, because the animated start state only applies once the script has confirmed GSAP is present.
  • Screen readers: the headline and payoff are ordinary headings and paragraphs in reading order. The scrim and the generated shadow layer are aria-hidden. Give the image a useful alt, or an empty one if the text already says it.
  • Keyboard: nothing in the section takes focus, and scrolling by keyboard drives the scrub.

Dependencies

Required:

  • GSAP 3.12+ (the demo is pinned to 3.15.0)
  • ScrollTrigger plugin

Browsers need CSS clip-path: path(), which all current browsers support.

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

£7