157
AI ready

Floor to Wall Zoom

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

Pinned 3D scroll section where a photo lying flat on the ground stands up towards the viewer, passes in front of the headline on the wall behind it, and lands square and full bleed.

ScrollTrigger advanced
5 more details
pinningscrubzoom3d-transformsscroll-storytelling

Released

About this effect

A pinned section that opens on a photograph lying flat on the ground, far away and steeply foreshortened, with a huge headline standing on the wall behind it. Scrolling stands the picture up in real 3D, as if a table were being tilted up in front of you. It rises through the headline, covering it without any fade, then slows over its last few degrees and lands square to the screen at exactly full bleed.

Read the full effect overview

Once the picture has landed, a short heading and a sentence or two arrive over it and the pin lets go into normal scrolling with no jump. The media slot takes an image or a muted looping video, and you can place the section several times on one page as repeated story chapters.

Floor to Wall Zoom - GSAP animation effect preview

What's included

9 items
  • A true 3D tilt on a hinged plane, with the perspective worked out from the stage so it composes at any viewport shape
  • The headline stands behind the picture and gets covered by it as the plane rises, a real depth moment with no opacity fade
  • Lands exactly flat with no transform left on the media, so the picture is pixel-sharp and full bleed from 390 wide to ultrawide
  • A soft contact shadow on the ground shrinks and fades as the plane lifts, in plain CSS with no images
  • Slow final degrees and a held landing, so the scrub settles rather than stops
  • Three slots: a headline, an image or muted video, and a closing payoff that stays readable over the picture
  • Four data attributes tune pin distance, scrub smoothing, starting tilt and camera distance, and instances stay independent on one page
  • Phones get a shorter pin, a less steep start, a stacked headline and a re-cropped picture
  • Accessible: reduced-motion, no-JS and blocked-CDN visitors get a static full-bleed layout with all the text readable

Perfect for

5 use cases
  • Restaurant, supper club and events pages where the table itself is the pitch
  • Food, drink and hospitality brands opening a story chapter with one big overhead photograph
  • Interior, flooring and landscape pages that show a plan or surface from above
  • Editorial features and campaign pages told in repeated chapters, each with its own picture and closing line
  • Product launches with a flat-lay photograph worth revealing at full size

How it works

2 sections

A pinned ScrollTrigger scrubs one timeline across the section. The picture sits in a perspective stage, starting on the ground plane in front of the headline, and scrolling rotates and carries it towards the screen until it stands square. Its starting position is worked out from the stage size on every refresh, so the composition holds at any shape, and it ends with no transform at all, which is why it lands sharp.

The contact shadow, the grazing light on the flat picture and the closing copy all share that timeline, so the section runs identically in both directions. Touch devices get a shorter pin, 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.

Use whichever heading levels suit your page. The demo uses h1 and h2 because the section is the whole page.

Using It With Your Own Design

What the effect needs from your markup: a .fwz root holding .fwz-plane, with the media as .fwz-media inside it. The script finds everything else inside the root and skips any of .fwz-headline, .fwz-shadow, .fwz-shade, .fwz-scrim and .fwz-payoff that you leave out. Every child of .fwz-payoff fades up in turn, so you can add a link or a button there.

Any image or video can go in the media slot. Swap the <img> for a muted looping video and nothing else changes:

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

Overhead shots work best because they already look like something lying on a surface, but the picture does not have to be one. Set the crop with --fwz-focus on the root, such as style="--fwz-focus: 30% 50%". It takes object-position values, and the demo moves it on phones to keep the subject in frame.

What is only the demo's styling: the font, the ground and ink colours, the type sizes, the payoff position and the warm ring in the shadow's box-shadow. The .fwz-line spans only exist to stack the headline on phones. Darken .fwz-scrim if your picture is bright where the payoff sits, and check its contrast.

Placing the opening composition: three custom properties on .fwz set the first frame, and the script reads them again on every refresh.

Property Default Description
--fwz-far 0.47 Where the picture's far edge sits on screen, as a fraction of the stage height. The headline stands on this line.
--fwz-far-scale 0.46 How small the far edge looks at the start.
--fwz-eye 0.2 Eye height, as a fraction of the stage height from the top.

CSS the effect depends on:

  • .fwz keeps overflow: hidden and isolation: isolate. The script sets perspective on it, so .fwz-plane and .fwz-shadow must stay its direct children.
  • The layer order matters: shadow under headline, headline under plane, then scrim and payoff. The headline is covered by being painted behind the plane, so it never needs a fade.
  • .fwz-plane keeps its transform-origin at its top edge and its inset: 0, so the media lands at exactly the size of the stage.
  • The default rules are the finished full-bleed layout. The staged start lives under .has-js inside @media (prefers-reduced-motion: no-preference), so keep that gate when you restyle.
  • The stage is 100lvh, so the picture never leaves a bar when a mobile browser's toolbar hides. The payoff's bottom offset includes 100lvh - 100svh to stay clear of that toolbar.

Options

Set these on each .fwz root.

Attribute Values Default Description
data-fwz-distance Number 260 Pin distance as a percentage of the viewport height. Touch devices use 70 percent of it.
data-fwz-scrub Seconds, 0 for none 0.9 How long the picture takes to catch up with the scroll.
data-fwz-angle 20 to 90 80 Starting tilt in degrees, where 90 is dead flat. Screens 700px wide or less use 80 percent of it.
data-fwz-perspective Number, from 0.5 1.1 Camera distance as a multiple of the stage height. Lower values look more dramatic.

Accessibility

  • Reduced motion: prefers-reduced-motion: reduce gets a static full-bleed layout with every piece of text visible and no pin. A change of preference while the page is open is handled too.
  • No JavaScript or a blocked CDN: visitors see the same static layout.
  • Contrast: the scrim keeps the payoff text above 4.5:1 over the demo picture. Measure again with your own picture.
  • Headings and images: the headline stays one real heading when it is stacked, and the decorative layers are aria-hidden. Give your image a useful alt, or an empty one if the text already says it.
  • Touch: ordinary page scrolling drives the section, with a shorter pin.

Teardown

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

This removes the triggers and pin spacers from every instance the script started, restores each element's inline styles and leaves the static layout in place. Other animations on the page keep running.

Dependencies

Required:

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

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

£7