GSAP Instructions

Cursor-Following Tag

data-work-wrapper — the hover area (e.g. a work/project row).

data-work-tag — the small label/tag inside it that follows the cursor.

Curved Text on Scroll

data-text-path — the <textPath> element containing the moving text.

data-motion-path — the SVG path the text travels along.

As the user scrolls, the text slides along the path (startOffset), looping across roughly 82% of the path length. Requires the text path to sit inside an SVG, with a [data-work-wrapper] ancestor acting as the scroll trigger.

Image Clip-Path Reveal

data-work-wrapper — scroll trigger for the reveal.

data-work-image-wrapper — the image element that gets clipped.

The image starts clipped into an angled shape, straightens into a full rectangle as it scrolls through view, then clips into an angled shape again on exit — a scrub-linked reveal/conceal.

Looping Text Stagger

data-gsap-stagger-loop — add to any text element (heading, label, etc.).

Splits the text into words/characters and loops it through three vertical positions (yPercent: 0 → -100 → -200) with staggered timing, repeating infinitely.

Gallery Grid Reveal

data-gallery-grid — the grid container (also gets pinned via its parent).

data-gallery-grid-image — each image tile in the grid.

data-gallery-grid-overlay — overlay element(s) that fade in over the grid.

data-gallery-title — heading text, split and animated character by character.

data-gallery-button — button that fades/slides in last.

This is a pinned scroll sequence: the grid is pinned in place while images fly in from random positions with a 3D rotation, followed by the overlay fading in, the title characters staggering up from below, then the button appearing.

GSAP Editing

For effects without exposed variables, change the numbers directly in the code.

Duration / stagger / delay / ease — example from the looping text stagger:

To speed the loop up, lower delay and stagger.amount. To make it snappier, swap power2.out for power1.out or none.

ScrollTrigger — controls when and how an effect plays:

scrub links the animation directly to scroll position — a number (e.g. 0.3) adds smoothing; remove it for a one-shot play-on-enter animation instead.

Pinned gallery length — how long the grid stays pinned while it animates:

Removing an Animation

To remove an effect from a single element: delete its data-* attribute in the Designer. No code changes needed — the script checks for the attribute before initializing.

Disabling an Effect Site-Wide

Each function only runs if its trigger attribute is found on the page, so disabling the call removes the effect everywhere with nothing left to clean up.