# September 2026: a new look for the site, refreshed demos, and a new free parallax hero > GSAP Vault has a quieter design, around two dozen effect demos rebuilt on a neutral ground, a new Scroll Story Flow effect, and a redesigned free parallax hero. Published 2026-09-05 by Jake. Canonical: https://gsapvault.com/blog/vault-update-september-2026 --- The site looked like every generated landing page of 2025: a near-black ground, an acid accent, tracked-out mono labels above every heading, a glow under anything you could hover. The products had moved on and the shell was undercutting them. So the shell has been rebuilt, and while the paint was out, so were a couple of dozen effect demos that had inherited the same look by default. Here is what changed, starting with the part you can take away for nothing. ## A new free parallax hero The old free demo was a restrained hotel hero: a photograph, a headline, a rate card, each on its own scroll depth. It showed the mechanic and nothing else. Since it is the effect most visitors meet first, it now shows what the mechanic is for. [Live interactive demo](https://gsapvault.com/demos/parallax-hero/index.html) The headline now sits inside the depth stack rather than on top of it. A near ridge with a line of pines climbs up over the type as you scroll, the far ridges sink at their own rates, and a red sun at a negative speed sets behind the furthest one. A second layer set, behind the switch in the corner, swaps the ink silhouettes for a photograph and two photo tiles so you can see the same script working on real imagery. **What is new in the script:** - **Negative speeds.** Travel is `(1 - speed) × distance`, so a layer at `-0.15` moves against everything else. That is how the sun sets while the ridges rise. - **Pointer drift.** Set `data-parallax-pointer` on the scene and fine-pointer devices get a cursor parallax from the same depth values. It tweens `xPercent` and `yPercent`, separate transform components from the scroll's pixel `y`, so the two inputs compose instead of fighting. Touch devices never get it. - **Everything else is as it was.** One pinned, scrubbed ScrollTrigger per scene, one `data-parallax-speed` per layer, optional blur, scale, rotation, x travel and opacity on the same progress. The whole API is still one attribute per layer: ```html

Higher ground.

Your lede.

``` The README's "Using it with your own design" section now covers the two things that catch people out with layered heroes: overscanning anything that paints to an edge, or its travel drags the edge into view, and keeping the script's transform off any element you also transform in CSS. [Try it out →](/effects/parallax-hero) ## New: Scroll Story Flow Three pinned photographic scenes, each with an oversized single line of type travelling across the viewport while the image behind it wipes, drifts and settles on a custom ease. It is the kind of opening sequence an editorial or campaign site uses to set a tone before the content starts. [Live interactive demo](https://gsapvault.com/demos/scroll-story-flow/index.html) **Key features:** - Three scene types in one script: a text sweep, an image wipe, and a parallax drift, each driven by the same pinned ScrollTrigger - Photographs ship baked into the download, so the demo is what you get, not a placeholder - Reversible scrub with a considered settle, and a static reduced-motion composition [View effect →](/effects/scroll-story-flow) ## The demo refresh Most of the effects built before September had inherited the demo scaffold's costume: `#0a0a0a` ground, a lime or cyan accent, Syne headings, mono HUD readouts, glow shadows. Sixty-odd demos looked like the same 2025 landing page, and a buyer could not picture their own site in any of them. The new register is simpler. A grey ground, light or dark, chosen per effect so the catalogue stays a mix. One ink. One saturated accent, different for each effect, on the thing the effect moves. Mona Sans or Inter. Hairlines instead of glows. And the furniture is gone: fake telemetry, invented reference codes, ghost watermark letters, scanlines. If an element was not the effect, the one prompt line, or plausible content of the page the demo pretends to be, it came out. Several demos were rebuilt rather than restyled, because the composition was the product and the old one did not show it: - **[Flip Layout Morph](/effects/flip-layout-morph)** is now a photographic archive: a tile travels into a detail view while its neighbours reflow into a strip, and swaps with any of them in one crossing move. - **[Hover Image Trail](/effects/hover-image-trail)** trails real photographs behind a list of links, and every card keeps its own photograph's shape instead of cropping to a square. - **[Scroll Hijack Sections](/effects/scroll-hijack-sections)** became five pinned editorial chapters that assemble word by word, with a velocity lean that settles after each flick. - **[Cursor Spotlight Mask](/effects/cursor-spotlight-mask)** and **[Draggable Card Stack](/effects/draggable-card-stack)** were recomposed around what they reveal and what you throw. - **[Canvas Shape Vortex](/effects/canvas-shape-vortex)** was rebuilt as a spiral galaxy on a 2D canvas, flown by scroll and pointer, no WebGL. - **[Sticker Peel](/effects/sticker-peel)** went back to its black ground, on purpose: a sticker on a sheet is the one composition where the dark was the design and not the default. The rest of the batch kept their mechanics and changed their surface: [Hover Underline](/effects/hover-underline), [Scroll Progress](/effects/scroll-progress), [3D Card Flip](/effects/3d-card-flip), [Typewriter Text](/effects/typewriter-text), [Stagger Grid Reveal](/effects/stagger-grid-reveal), [Scroll Zoom Portal](/effects/scroll-zoom-portal), [Scroll Image Sequence](/effects/scroll-image-sequence), [Horizontal Scroll Section](/effects/horizontal-scroll-section), [Liquid Morph](/effects/liquid-morph), [Liquid Fill Reveal](/effects/liquid-fill-reveal), [Scroll Stack Cards](/effects/scroll-stack-cards), [Scroll Velocity Skew](/effects/scroll-velocity-skew), [Text Decode](/effects/text-decode), [Scroll Text Highlight](/effects/scroll-text-highlight), [Halftone Image](/effects/halftone-image), [Page Turn Book](/effects/page-turn-book) and [CSS Scroll Reveal](/effects/css-scroll-reveal). Nothing in any script's options changed. If you built on one of these before, your integration is untouched; re-download from your library if you want the new demo files. ## The site itself - **Paper, one ink, one typeface.** The ground is light, dark is scarce and deliberate, and Mona Sans is the only face in the interface. The lime survives as a mark, not a mood. - **Product cards are captures of the demo.** Every card is the effect at its signature state, with the number, title and technique set beside it, so the grid reads as work rather than as tiles. - **The catalogue filters moved to the top** of every browse page, with a filter popover and applied pills, and the featured rows went. What you see is the filtered set. - **Scrolling inside a page no longer fights the page.** A scrollable panel or a demo frame takes the wheel while it can still move and hands the rest to the page, smoothly. This was the most-reported scroll bug on the site and it read as lag rather than as breakage. - **Documentation publishes before purchase.** Quick Start, Options, Accessibility and Dependencies for every product are on the product page and in its Markdown twin, so you can judge an effect on its docs, not only on its demo. ## What's next The remaining pre-September demos are a restyle backlog and will move to the same register in batches. The free repo mirrors every free product as it changes, so the [free GitHub repo](https://github.com/jaydickinson/free-gsap-effects) already has the new parallax hero. *Browse the [scroll animation category](/categories/gsap-scroll-animations) for the pinned and scrubbed effects mentioned here, or the full [GSAP Vault effects library](/effects).*