164
AI ready

Ring Align Zoom

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

Pinned scroll section where a product photo cut into concentric rings spins back into alignment like a combination lock until it clicks together, then the circle opens to full bleed.

ScrollTrigger advanced
5 more details
pinningscrubzoomclip-pathscroll-storytelling

Released

About this effect

A product that puts itself together as you scroll. The section opens on a disc of scrambled rings, every ring of the photograph turned to a different angle, with a headline either side of it: in the demo, abstract orange shell and circuit board. Scrolling turns the rings back like the tumblers of a combination lock. The outer rings seat first, and the ones holding the detail you choose click home last, so the sticks and buttons of the controller only snap into place in the final moments.

Read the full effect overview

Once the rings are true, the seams are gone and one circle opens past the corners of the screen, pushing the headline off as it grows and bringing the product up to full size. It lands on the plain, untouched picture at full bleed, and a closing heading and sentence arrive on top. Use it as a repeated story chapter: each copy takes its own photo or muted looping video, headline and closing text, and runs independently.

Ring Align Zoom - GSAP animation effect preview

What's included

10 items
  • A photograph cut into concentric rings that resolve by rotation, turned by the scrollbar in both directions
  • Choose which part of the disc seats last, so the detail that sells the product clicks home at the very end
  • Each ring runs slightly past true and rebounds before it comes to rest, like a tumbler clicking into place
  • A soft shadow at each ring boundary gives depth while they are misaligned and fades to nothing as they seat, so no seam survives
  • The whole subject fits inside the disc, then grows to full size as the circle opens, never scaled past 1:1
  • The opening circle pushes the headline off the screen with its own edge, whatever the screen shape
  • Lands exactly full bleed at 1:1 with no transform or clip left on the media, at any aspect ratio
  • Takes an image or a muted looping video, with the rotation centre set by two CSS tokens
  • Tune pin distance, scrub smoothing, ring count, turns and the last ring to seat from data attributes
  • Reduced-motion, no-JavaScript and blocked-CDN visitors get the full-bleed picture with all the text on it

Perfect for

5 use cases
  • Product launches where the object assembling itself is the moment
  • Hardware and repairability stories that show what is inside a product
  • Consumer tech, toys and design objects shot on a plain coloured ground
  • Campaign pages built around one striking product photograph or film loop
  • Portfolio case studies and repeated story chapters, each with its own picture

How it works

2 sections

A pinned ScrollTrigger scrubs one timeline across the section. Stacked circular windows each show the same media, and each window turns about the centre of the subject on its own schedule, ending in a small overshoot and rebound.

When the last ring seats, the rings give way to the real media inside one growing circle, sized from the stage so that it always passes the corners. Touch devices get a shorter pin, tall screens stack the headline above and below the disc, and reduced-motion visitors get a static full-bleed layout with no pin at all.

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.

The demo uses an h1 and an h2 because the section is the whole page. On your own page, use whichever heading levels fit your outline.

Using It With Your Own Design

Any image or video can go in the media slot. Replace the <img> and keep the class. A muted looping video is one line:

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

The rings show the video's live frame while it plays. Give the video a poster so that visitors see something before it has loaded.

Set the centre. The rings turn about one point of the picture, and that point should be the centre of your subject. Set it on .raz as a percentage of the media's own width and height:

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

To find the numbers, open the picture in any editor, read the pixel position of that point and divide by the picture's width and height.

Choosing a picture. An object with a strong silhouette and a few crisp details works best, because the eye tries to rebuild it from the scramble. Portraits work too. The disc starts by showing the picture zoomed out as far as its edges allow, in a circle whose radius is the distance from the centre to the picture's nearest edge. So to fit a whole product in the disc, make sure that circle contains it: a product on a plain ground can simply have its canvas extended until it does, and the extra ground is cropped away when it lands. The demo's picture is extended like this, with paper added above and below. Choose object-position on .raz__picture to decide the crop on each screen shape, as you would for any cover image.

Choosing what seats last. Rings are numbered by where they sit, and data-raz-focus picks the radius that clicks home last, from 0 at the centre to 1 at the edge. Rings further from it seat sooner. In the demo, 0.23 lands on the rings holding the D-pad and a stick.

What the effect needs from your markup: .raz as the root, .raz__stage, .raz__media holding one img or video, .raz__headline holding up to two .raz__word elements, .raz__scrim and .raz__payoff. The script generates the rings itself and scopes everything to each .raz, so any number of copies can sit on a page, each with its own media and text.

What is only the demo's styling: the fonts (--raz-display, --raz-body), the ground, text and seam colours (--raz-ground, --raz-ink, --raz-text, --raz-seam), the payoff's position and sizes, and the scrim's gradient. The payoff sits centred at the bottom to fall in the arch under the demo's controller, so move it to wherever your picture has room. Change the scrim to suit your picture, keeping body text at 4.5:1. The cue is optional: remove data-raz-cue and clear the content of .has-js .raz__stage::after if you do not want it. The headline's size is fitted to the room beside the disc, so longer words simply come out smaller.

CSS the effect depends on: the .has-js rules inside the prefers-reduced-motion: no-preference block, the stage's overflow: hidden and full viewport height, and the .raz__rings, .raz__ring and .raz__seam rules. Everything outside that block is the static layout for visitors without motion or JavaScript, so restyle it freely.

Options

Set these on .raz.

Attribute Values Default Description
data-raz-distance Percent of the viewport height 380 Pin distance for the whole journey. Touch screens use 70 percent of it.
data-raz-scrub Seconds 0.6 Scrub smoothing. 0 ties the motion directly to the scrollbar.
data-raz-rings 3 to 12 7 Number of rings. Fewer gives bolder, chunkier rings.
data-raz-turns Any number 1.35 Full turns the innermost ring travels. Outer rings travel proportionally less.
data-raz-focus 0 to 1 0.23 Where on the disc the last ring to seat sits, from the centre to the edge.
CSS token Default Description
--raz-cx 49.64% Horizontal centre of the subject, as a percentage of the media's width.
--raz-cy 50% Vertical centre of the subject, as a percentage of the media's height.

Accessibility

  • Reduced motion: visitors with prefers-reduced-motion: reduce get the picture full bleed with the headline and closing text on it, with no pin. Changing the preference while the page is open switches cleanly in either direction.
  • No JavaScript or a blocked CDN: the same static layout.
  • Screen readers: the headline stays one real heading and reads as one phrase. The generated rings are aria-hidden with empty alt, and only your own media element carries the description.
  • Contrast: the scrim keeps the closing text readable over the picture. Measure again if you change the picture or the scrim.
  • Touch: a shorter pin, the headline above and below the disc on tall screens, and a disc about 88 percent of the width.

Teardown

The script stores its GSAP context on window.gsapContext. Reverting it removes the generated rings, the pin and every inline style.

In your downloadThe working code for this step, in script.js.

Dependencies

  • GSAP 3.12+
  • ScrollTrigger plugin

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

£7