# Free GSAP animations and templates

> 29 free GSAP effects, animated website templates and UI components with live demos and full source. MIT licensed, no account needed.

Canonical: https://gsapvault.com/free

Animated website templates, scroll and text effects, and drop-in UI components, each with a live demo and the complete source. MIT licensed and downloadable without an account.

There are 8 free website templates, 10 free effects and 11 free UI components here. The templates are whole animated pages you can publish as they are or rework. The effects are single pieces of motion for a page you already have: scroll reveals, text, hover and backgrounds. The UI components are the small interactive parts most sites need, such as menus, tabs, accordions and toggles.

Each one is plain HTML, CSS and JavaScript. There is no framework to adopt and no build step, so the code drops into a static page, a CMS theme or a React or Vue component. Every product page runs the live demo next to the source, so you can see exactly what you are getting before you copy a line.

Free products are built and checked the same way as the paid library: responsive layouts tested at desktop and mobile sizes, reduced-motion handling, and ScrollTrigger instances cleaned up when they are no longer needed. They are free because they are useful on their own and show how the rest of the library is made.

GSAP itself is free, including every plugin, so animating a website with these costs nothing: load GSAP from the CDN, paste the product's markup, styles and script, and adjust the copy and colours.

## Free templates (8)

- [Online CV](https://gsapvault.com/templates/online-cv-template): 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.
- [Waitlist Page Template](https://gsapvault.com/templates/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.
- [QR Table Menu Template](https://gsapvault.com/templates/qr-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.
- [Charity Campaign Template](https://gsapvault.com/templates/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.
- [Link in Bio Template](https://gsapvault.com/templates/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.
- [Astronomy Template](https://gsapvault.com/templates/observatory-template): Six-page planetarium and science centre website template on a cream engineering-drawing grid: titles set up the side of framed photos with numbered callouts, a tuning-band nav, a radio dish you slew across tonight's sky, spec sheets, filters and a real map.
- [Sticker Link in Bio](https://gsapvault.com/templates/sticker-link-in-bio-template): 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.
- [Resume Template](https://gsapvault.com/templates/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.

## Free effects (10)

- [Spotlight Background](https://gsapvault.com/effects/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.
- [Tailwind Component Remixer](https://gsapvault.com/effects/tailwind-class-playground): Generate fresh Tailwind component recipes with procedural SVG artwork, coordinated colour palettes and animated GSAP layout transitions.
- [Scroll Text Highlight](https://gsapvault.com/effects/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.
- [Typewriter Text](https://gsapvault.com/effects/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.
- [Parallax Hero](https://gsapvault.com/effects/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.
- [Image Clip Reveal](https://gsapvault.com/effects/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.
- [Hover Underline](https://gsapvault.com/effects/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.
- [Scroll Progress Indicator](https://gsapvault.com/effects/scroll-progress): A precise GSAP reading-progress indicator in four shapes: a top bar, an SVG ring, a side rail, and a numeric percentage.
- [CSS Scroll Reveal](https://gsapvault.com/effects/css-scroll-reveal): Native CSS scroll-driven reveals for crisp fade, slide, and scale entrances with accessible static fallbacks and no animation JavaScript.
- [3D Card Flip Gallery](https://gsapvault.com/effects/3d-card-flip): Tactile GSAP 3D cards with deep perspective, reactive edge lighting and shifting shadows. Flip on hover, keyboard focus or tap, with grouped auto-close.

## Free UI elements (11)

- [FAQ Accordion](https://gsapvault.com/ui-elements/faq-disclosure-accordion): An accessible FAQ accordion: answers open to their natural height, a plus morphs into a minus, with expand all and #deep links.
- [Animated Tabs](https://gsapvault.com/ui-elements/sliding-indicator-tabs): Animated tabs: the indicator slides and stretches between tabs, panels change directionally and the container eases between heights.
- [Announcement Bar](https://gsapvault.com/ui-elements/announcement-banner-bar): An announcement bar for sites: pushes the page down instead of covering it, rotates messages with a masked swap and collapses on dismiss.
- [Fullscreen Hamburger Menu](https://gsapvault.com/ui-elements/hamburger-fullscreen-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.
- [Collapsible Sidebar Menu](https://gsapvault.com/ui-elements/accordion-sidebar-nav): A collapsible sidebar menu for docs and admin apps: sections open on a measured height tween and an indicator slides to the current link.
- [iOS Toggle Switch](https://gsapvault.com/ui-elements/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.
- [Progress Stepper](https://gsapvault.com/ui-elements/step-progress-indicator): A progress stepper for checkouts and onboarding: the track fills to the active step and completed steps flip into a drawn checkmark.
- [Skeleton Loader](https://gsapvault.com/ui-elements/skeleton-to-content-reveal): A skeleton loader: shimmering placeholders crossfade into real content with a stagger, and each card's height eases to what it loaded.
- [Copy to Clipboard Button](https://gsapvault.com/ui-elements/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.
- [Scrollspy Table of Contents](https://gsapvault.com/ui-elements/scrollspy-toc-rail): A scrollspy table of contents for long pages: a marker slides to the section in view and a progress line tracks reading.
- [Star Rating](https://gsapvault.com/ui-elements/star-rating-input): 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.

## How to add a free animation to your website

Every free product follows the same pattern: GSAP from the CDN, then the product’s own HTML, CSS and script.

1. **Pick a product and open its page.** The live demo shows how it behaves on desktop and mobile, and the tabs below it hold the HTML, CSS and JavaScript.
2. **Load GSAP.** Add the GSAP script tags before your own script, plus any plugin the product lists, such as ScrollTrigger. The GSAP CDN page has every current link.
3. **Copy the code or download the ZIP.** Paste the markup where it should appear, the styles into your stylesheet and the script after GSAP. No account is needed for free downloads.
4. **Make it yours.** Change the text, images and colours, and tune the timings. Reduced-motion handling is already in place, and each README explains the options.

```html
<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>
<script>
  gsap.registerPlugin(ScrollTrigger);
  gsap.from('.reveal', {
    y: 40,
    opacity: 0,
    stagger: 0.1,
    scrollTrigger: { trigger: '.reveal', start: 'top 80%' },
  });
</script>
```

## Frequently asked questions

### Can I use the free templates and effects in commercial projects?

Yes. Free products are MIT licensed: use them in personal, commercial and client projects, change them however you like, and keep the licence notice in the source.

### Do I need an account to download them?

No. The full source is on each product page and the download needs no account or email address.

### Is GSAP free?

Yes. GSAP is free, including every plugin, for commercial use too. The free products here load it from the public CDN.

### How do I animate a website for free?

Start from a free template if you want a whole animated page, or add a free effect or UI component to a page you already have. Load GSAP from the CDN, paste the product’s HTML, CSS and JavaScript, and edit the content. Nothing needs installing or building.

### What is the difference between the free and paid products?

Range, not quality. Free and paid products are built to the same standard and documented the same way; the paid library is much larger and covers more techniques, page types and industries. You can see every paid product’s live demo before buying.

### Are the free products on GitHub?

Yes. Every free product is mirrored in a public GitHub repository, so you can clone the lot, star the repo or open an issue there.

Every free product is mirrored on GitHub: https://github.com/jaydickinson/free-gsap-effects

Full catalog for agents: https://gsapvault.com/llms-full.txt