skill
free-gsap-effects
Free, MIT-licensed GSAP animation effects, UI components and website templates with live demos. Copy, paste, ship. Accessible, framework-agnostic, memory-safe. The free tier of GSAP Vault.
Set up
Skills are installed by placing their folder where your agent loads skills.
The download comes from github.com/jaydickinson/free-gsap-effects itself, not from our server, so what you get is exactly what its author published.
Install instructions come from the README
README
synced Oct 25, 2026Free GSAP Effects
Ten free, production-ready GSAP animation effects, eleven animated UI components and seven complete website templates, all MIT licensed. Copy, paste, and ship. Everything is self-contained, framework-agnostic, accessible, and memory-safe.
From GSAP Vault, a library of 135 copy-paste GSAP animation effects, 54 UI components and 90 complete website templates.
The Effects
| Effect | What it does | Live demo |
|---|---|---|
| Tailwind Component Remixer | Generate fresh Tailwind component recipes with procedural SVG artwork, coordinated colour palettes and animated GSAP layout transitions. | Demo |
| Spotlight Background | A theatrical GSAP and WebGL spotlight background: two stage follow-spots in a hazed room sweep in from the wings, cross over your headline and land on it, then trail the cursor like spots worked by an operator. | Demo |
| 3D Card Flip Gallery | Tactile GSAP 3D cards with deep perspective, reactive edge lighting and shifting shadows. Flip on hover, keyboard focus or tap, with grouped auto-close. | Demo |
| Scroll Progress Indicator | A precise GSAP reading-progress indicator in four shapes: a top bar, an SVG ring, a side rail, and a numeric percentage. | Demo |
| Typewriter Text | A typewriter that types a line character by character, holds it, accelerates through deletion, and cycles to the next phrase, with optional cursor, status and progress hooks. | Demo |
| Parallax Hero | A pinned hero that pulls its layers into depth from one scrubbed ScrollTrigger: a headline sandwiched inside the stack, ridges or photographs climbing over it, and a sun that sets behind the far layer. | Demo |
| Image Clip Reveal | A cinematic image reveal where a directional polygon aperture opens as the photograph settles from a restrained Ken Burns scale and its caption lands. | Demo |
| Hover Underline | Four material link underlines (an exit-through line, marker sweep, hand-drawn wave, and an endlessly travelling wave) with coordinated type and active-index responses. | Demo |
| Scroll Text Highlight | A scrubbed orange-to-lime reading front lifts each active word before completed copy settles to white and unread copy remains ghosted. | Demo |
| CSS Scroll Reveal | Native CSS scroll-driven reveals for crisp fade, slide, and scale entrances with accessible static fallbacks and no animation JavaScript. | Demo |
The UI Components
Interface components rather than page effects: docks, switches, toasts, dialogs. Each one ships its variants, its keyboard model and its ARIA contract.
| Component | What it is | Live demo |
|---|---|---|
| Fullscreen Hamburger Menu | A fullscreen hamburger menu: the burger icon morphs into an X while the overlay wipes in and the links stagger up, with focus trapping. | Demo |
| Collapsible Sidebar Menu | A collapsible sidebar menu for docs and admin apps: sections open on a measured height tween and an indicator slides to the current link. | Demo |
| iOS Toggle Switch | An iOS-style toggle switch on a native checkbox: tap or drag the knob, it snaps to the nearer side and the track colour cross-fades. | Demo |
| Progress Stepper | A progress stepper for checkouts and onboarding: the track fills to the active step and completed steps flip into a drawn checkmark. | Demo |
| Skeleton Loader | A skeleton loader: shimmering placeholders crossfade into real content with a stagger, and each card's height eases to what it loaded. | Demo |
| Copy to Clipboard Button | A copy to clipboard button: the clipboard icon morphs into a drawn check, a Copied label floats up and the copied value flashes. | Demo |
| Scrollspy Table of Contents | A scrollspy table of contents for long pages: a marker slides to the section in view and a progress line tracks reading. | Demo |
| Star Rating | A star rating input on native radios: hover sweeps the fill to the pointer, a click locks it in with a spring pop and a label. | Demo |
| Announcement Bar | An announcement bar for sites: pushes the page down instead of covering it, rotates messages with a masked swap and collapses on dismiss. | Demo |
| Animated Tabs | Animated tabs: the indicator slides and stretches between tabs, panels change directionally and the container eases between heights. | Demo |
| FAQ Accordion | An accessible FAQ accordion: answers open to their natural height, a plus morphs into a minus, with expand all and #deep links. | Demo |
The Templates
Complete single-purpose web pages, not just isolated effects: open index.html and you have a finished site to reskin. Same folder structure as the effects.
| Template | What it is | Live demo |
|---|---|---|
| Resume Template | A personal CV site that morphs between two layouts: a signature Flip-driven toggle reflows the whole page from a spacious web resume into an A4 document, backed by a real print stylesheet so the site is also the PDF. | Demo |
| Charity Campaign Template | A free one-page appeal template where visitors give by packing a crate: drag tins, pasta and nappies off a shelf, watch the total rewrite what the gift does, and carry it into the donation form. Worked as a Sheffield food bank's winter appeal. | Demo |
| Link in Bio Template | A free link-in-bio page, links first: a giant wordmark on one loud colour, a small pile of photo prints for the three latest things (flick one away to see the next, tap to open) and the full list of links on the first screen. Mariam Odede, a potter in Margate, is the worked example; it suits musicians, podcasters, small shops and writers just as well. | Demo |
| QR Table Menu Template | A phone-first digital menu made to open from a QR code at the table, with a sticky category bar that crossfades between sections and dietary chips that filter every dish at once. | Demo |
| Waitlist Page Template | A one-screen pre-launch waitlist page built round one product photograph: visitors drag the radio's tuning knob, static gives way to stations that tune in the price, materials and batch, and launch day holds the email sign-up. Worked example: a pocket radio from a Glasgow workshop. | Demo |
| Online CV | A one-page online CV website: the A4 CV itself on an ultramarine desk, with a switch between a one-page and a full two-page CV, PDF download, print and email. Fills from your LinkedIn data export. Suits teachers, nurses, engineers, solicitors and graduates. | Demo |
| Sticker Link in Bio | A free creator profile page whose link cards toss onto the page like stickers landing on a desk, drag anywhere with momentum, and tween back into a neat stack on 'Tidy up' - while a tap always just opens the link. | Demo |
Quick Start
Every folder contains:
effect-name/
├── index.html # Working demo page, open it in a browser
├── README.md # Full documentation: options, examples, accessibility
├── START-HERE-AI.md # Copy-paste integration brief for an AI coding assistant
└── assets/
├── style.css # Styles
├── script.js # Commented source
└── script.min.js # Minified production build
- Open the folder's
index.htmlin a browser to see it working. - Read its
README.mdfor the copy-paste quick start and all options. - Copy the markup pattern and the script into your project. GSAP loads from CDN:
<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>
Using with Claude Code, Cursor, ChatGPT or Copilot
Every folder ships a START-HERE-AI.md: a product-specific brief that tells a coding assistant to inspect your stack first, read the README and source, keep the design and accessibility intact, scope the selectors, add framework-appropriate GSAP cleanup, and report what it tested. Paste it in, or point the assistant at the folder:
Read ./parallax-hero/START-HERE-AI.md and follow it to integrate the effect into this project.
AI is optional. Every folder is ordinary, documented HTML, CSS and JavaScript, and the README is the reference either way. How the brief is put together, and what it asks of the assistant: gsapvault.com/vibe-coding.
Claude Code, Cursor and Codex: install the skill
This repo ships an agent skill, skills/gsap-vault, that knows the whole GSAP Vault catalogue (327 products, free and paid), fetches any free one straight from this repo, and carries the integration rules. Install it into your project or globally:
npx skills add jaydickinson/free-gsap-effects
Then ask your assistant for what you need ("add a parallax hero to the landing page", "which GSAP Vault effect does a scroll-scrubbed image sequence?"). It installs the free products directly and points you to the product page for the rest.
What "production-ready" means here
- Accessibility built in: every effect respects
prefers-reduced-motionwith a static fallback, and keyboard focus mirrors hover interactions. - Memory-safe:
gsap.context()scoping,gsap.matchMedia()for responsive and motion branches, event handlers tracked for cleanup, ScrollTriggers killed on teardown. - Framework-agnostic: plain HTML/CSS/JS that drops into WordPress, Webflow, React, Vue, Astro, or static sites. The GSAP Vault getting started guide covers framework integration patterns.
- LLM-friendly: clearly commented code that AI assistants can read, explain, and adapt for your project.
Want more?
This repo is the free tier of GSAP Vault. The full library has 135 effects, 54 UI components and 90 templates, including scroll-image sequences, infinite marquees, draggable galleries, text scramble/decode, magnetic cursors, particle systems, and complete portfolio, restaurant, and SaaS landing templates.
- Browse everything: effects, templates and UI elements
- By category: GSAP effects by type, templates by use case, every category page
- All of it, one payment: The Vault, a one-time purchase covering every collection in the Vault library, plus future items added to those collections, unlimited commercial projects. Current prices are on the pricing page
- Tutorials and guides: gsapvault.com/blog, including GSAP animation examples with code
- For assistants and agents: gsapvault.com/llms.txt
License
Everything in this repository is MIT licensed: use it in personal and commercial projects, no attribution required (a link back to gsapvault.com is always appreciated).
GSAP itself is created by Greensock/Webflow and is 100% free including all plugins.