Getting started

Four steps take an effect from the download to a page. Here they are with a free one, Typewriter Text, and the page at each step beside them.

The whole path, running

Each step is a real page served from the effect's own files, not a mock-up. Step through them and watch the frame.

your-page.html Running.

Two script tags from the CDN, before your own script. ScrollTrigger is a separate file. With a bundler it is npm install gsap and two imports instead.

<script src="https://cdn.jsdelivr.net/npm/gsap@3.15.0/dist/gsap.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/gsap@3.15.0/dist/ScrollTrigger.min.js"></script>

The effect's HTML goes wherever you want it. Every option is a data attribute on the element, and the finished sentence is in the markup, so the page reads before any script runs.

<h1 class="line"
    data-typewriter
    data-type-speed="0.055"
    data-type-delay="0.35"
    data-type-hold="3"
    data-type-delete-speed="0.75"
    data-type-mobile="Read the docs."
    data-type-loop="Edit the code.,Ship it your way."
    data-type-loop-mobile="Edit the code.,Ship it your way.">Read the docs. Edit the code.</h1>

The stylesheet, or the parts of it you keep. Sizes and colours are ordinary CSS on ordinary classes, and the download's README lists the ones meant to be changed.

.line {
    display: flex;
    align-items: center;
    justify-content: center;
    width: min(64rem, 100%);
    min-width: 0;
    font-size: clamp(1.75rem, 5.5vw, 3.5rem);
    font-weight: 500;
    letter-spacing: -0.03em;
    line-height: 1.1;
    white-space: nowrap;
}

/* ...and the cursor, the reduced-motion rules and the ground: 70 lines in all */

One file, after GSAP. It registers ScrollTrigger, reads the data attributes and starts when the element scrolls into view. There is nothing to call.

<script src="assets/script.js"></script>

That is the whole installation. The same four steps apply to every effect and UI element in the catalogue; a template is the page already, so for those it is one folder to open.

What you download

One folder per product, the same shape every time.

index.html

The demo you saw on the product page, as a standalone file. Open it from disk and it runs. The markup you paste is in here.

assets/

script.js and style.css, unminified and commented, plus any images or fonts the demo needs. A minified script sits beside the readable one.

README.md

Every option, what it does and its default; the CSS meant to be changed; the events the effect fires; how to tear it down. Written to be read by you or by a coding assistant.

START-HERE-AI.md

A brief for Cursor, Claude Code, Copilot or whichever assistant you use: what the product is, what to inspect in your project first, and what must survive the integration. Optional. How it is used.

Four words you will meet

Every README uses them. The glossary has the rest.

Tween

One animation that moves one or more properties from a start value to an end value over a duration. The word is short for "in-betweening". Made with gsap.to(), gsap.from() or gsap.fromTo().

Timeline

A container that sequences tweens on one clock. Tweens are added with positions or labels, and the whole thing plays, pauses, reverses, scrubs and repeats as a single unit.

ScrollTrigger

The GSAP plugin that ties animation to scroll position. It can play a tween once when an element enters the viewport, scrub its progress with the scrollbar, pin an element in place for a distance, and snap between states.

matchMedia

gsap.matchMedia() runs a setup function only while a media query matches, and reverts everything it made when the query stops matching. Breakpoints and prefers-reduced-motion in one mechanism.

In a framework

The effects are plain HTML, CSS and JavaScript, so any framework can host one. The one thing a component has to add is cleanup: create the animations inside a context when the component mounts and revert it when the component leaves, or ScrollTriggers pile up across navigations.

React

Initialise in useEffect, scope to a ref, and return the revert as the cleanup.

 useEffect(() => {  gsap.registerPlugin(ScrollTrigger);  const ctx = gsap.context(() => {  // the effect's init, unchanged  }, containerRef);  return () => ctx.revert(); }, []); 

Vue

The same shape with onMounted and onUnmounted.

 let ctx; onMounted(() => {  gsap.registerPlugin(ScrollTrigger);  ctx = gsap.context(() => { /* init */ }, root.value); }); onUnmounted(() => ctx?.revert()); 

Next.js

The React pattern in a client component. GSAP touches the DOM, so it never runs on the server.

 'use client'; import { useEffect, useRef } from 'react'; import gsap from 'gsap'; import { ScrollTrigger } from 'gsap/ScrollTrigger'; 

Astro

Paste the markup into the component and the script into a script tag. With client-side routing, revert on the page-swap event.

 <script>  import gsap from 'gsap';  const ctx = gsap.context(() => { /* init */ });  document.addEventListener('astro:before-swap', () => ctx.revert(), { once: true }); </script> 

GSAP CDN links

Every GSAP plugin, the former Club ones included, is free on the jsDelivr CDN. These are the tags for version 3.15.0, the release every demo on this site runs against. Load the core first, then any plugin, then your own script.

Core and ScrollTrigger

What nearly every effect here needs. ScrollTrigger is a separate file and must come after the core.

 <script src="https://cdn.jsdelivr.net/npm/gsap@3.15.0/dist/gsap.min.js"></script><script src="https://cdn.jsdelivr.net/npm/gsap@3.15.0/dist/ScrollTrigger.min.js"></script> 

Text

SplitText and ScrambleText, both free on the CDN since GSAP 3.13.

 <script src="https://cdn.jsdelivr.net/npm/gsap@3.15.0/dist/SplitText.min.js"></script><script src="https://cdn.jsdelivr.net/npm/gsap@3.15.0/dist/ScrambleTextPlugin.min.js"></script><script src="https://cdn.jsdelivr.net/npm/gsap@3.15.0/dist/TextPlugin.min.js"></script> 

Interaction

Draggable with Inertia for throws, Observer for wheel and touch, Flip for layout changes.

 <script src="https://cdn.jsdelivr.net/npm/gsap@3.15.0/dist/Draggable.min.js"></script><script src="https://cdn.jsdelivr.net/npm/gsap@3.15.0/dist/InertiaPlugin.min.js"></script><script src="https://cdn.jsdelivr.net/npm/gsap@3.15.0/dist/Observer.min.js"></script><script src="https://cdn.jsdelivr.net/npm/gsap@3.15.0/dist/Flip.min.js"></script> 

SVG and paths

DrawSVG, MorphSVG and MotionPath.

 <script src="https://cdn.jsdelivr.net/npm/gsap@3.15.0/dist/DrawSVGPlugin.min.js"></script><script src="https://cdn.jsdelivr.net/npm/gsap@3.15.0/dist/MorphSVGPlugin.min.js"></script><script src="https://cdn.jsdelivr.net/npm/gsap@3.15.0/dist/MotionPathPlugin.min.js"></script> 

Scroll and easing

ScrollSmoother needs ScrollTrigger. CustomEase before CustomBounce or CustomWiggle.

 <script src="https://cdn.jsdelivr.net/npm/gsap@3.15.0/dist/ScrollSmoother.min.js"></script><script src="https://cdn.jsdelivr.net/npm/gsap@3.15.0/dist/ScrollToPlugin.min.js"></script><script src="https://cdn.jsdelivr.net/npm/gsap@3.15.0/dist/CustomEase.min.js"></script><script src="https://cdn.jsdelivr.net/npm/gsap@3.15.0/dist/CustomBounce.min.js"></script><script src="https://cdn.jsdelivr.net/npm/gsap@3.15.0/dist/CustomWiggle.min.js"></script> 

Pin the version as above rather than gsap@3: a floating tag can change under a live site. The unminified builds are at the same paths without .min. With a bundler it is npm install gsap and import { gsap } from "gsap" instead; the plugins import from gsap/ScrollTrigger and so on.

Make it yours

Three layers, in the order to try them. The data attributes on the element change timing, content and behaviour without touching code. The stylesheet changes how it looks. The script is yours to edit last, and it is written to be edited: named functions, one CONFIG block, comments where a value is a judgement.

If you work with a coding assistant, the download's START-HERE-AI.md is the brief to hand it: it tells the assistant to read the README first, inspect your project before editing, keep the reduced-motion and keyboard behaviour, and add the cleanup your framework needs. More on that.