Container Scroll Reveal — Free HTML CSS JS Snippet

The container scroll reveal is the product-launch animation where a browser or dashboard mockup begins tilted back in 3D — as if lying on a table — and rotates upright while scaling toward you as the user scrolls, with the headline drifting up and fading as the screen takes over. This snippet builds the whole scroll-linked effect with plain HTML, CSS, and a compact vanilla JavaScript scroll handler.

A tall section with a sticky stage

The trick to scroll-linked animation is giving the scroll somewhere to happen. The .cs-section is 200vh tall, and inside it a .cs-sticky element is position: sticky; top: 0; height: 100vh — so it pins to the viewport and stays put while you scroll through the extra 100vh of the section. That pinned window is the stage on which the mockup animates, and the section's height is what gives you a full screen of scroll to drive the animation.

Mapping scroll to progress

Each frame, update() computes a progress value p from 0 to 1 by comparing the section's getBoundingClientRect().top against the total scrollable distance (offsetHeight - innerHeight). p is 0 when the section reaches the top of the viewport and 1 when you've scrolled to its bottom. Every animated property is then a simple function of p, which keeps the whole effect driven by one normalized number.

The flatten-and-grow transform

The mockup's tilt is rotateX(32 * (1 - p)), inside a perspective: 1200px stage — so at p = 0 it's tilted back 32° and at p = 1 it's perfectly upright. Simultaneously it scales from 0.86 to 1.0 (0.86 + p * 0.14), so the screen grows as it rises to face you. With transform-origin: center top, the rotation pivots from the top edge, so the mockup appears to stand up rather than spin in place. The heading, meanwhile, translates up by p * -60px and fades, handing focus to the product as it arrives.

Efficient, jank-free scroll handling

The scroll listener is { passive: true } and throttled with requestAnimationFrame behind a ticking flag, so no matter how many scroll events fire, the layout read and style writes happen at most once per frame. A resize listener re-runs the math because the scrollable distance depends on viewport height. This is the standard pattern for smooth scroll-driven effects without a library.

A pure-CSS mockup

The "dashboard" is built entirely from divs — a traffic-light title bar, a sidebar, list rows, and a row of gradient cards — so there are no image assets and it stays crisp at any scale. Swap the inner content for a real screenshot <img> and the scroll animation is unchanged.

Customizing it

Change the starting 32deg tilt and the 0.86 start scale for a more or less dramatic reveal, lengthen the section beyond 200vh to slow the animation, adjust how far the heading lifts, or replace the mockup with your own UI. Pair it with stacking scroll cards below or an animated gradient CTA to close the launch story.