Gsap

gsap.com

a near-black product site where a 101px "Animate anything" headline in the bespoke Mori sans on creamy off-white (#fffce1) and 3D liquid-form objects animated by GSAP itself make the homepage the most credible product demonstration in the JavaScript-animation category.

Developer Tool Js Animation Library strong

Design tokens

page-near-black
pure-black
cream-text
muted-tan
light-tan
brand-green
pink-lavender
orange-accent
display
Mori, sans-serif
body
Mori, sans-serif
fallback
Times

Do / Don't

Reference it for

  • The "use your own product on your homepage" discipline — every animation on the GSAP site is GSAP. If the client's product is a tool, the homepage should be the most convincing live demo of that tool.
  • A massive headline (101px) carrying the entire brand position — when the product is the verb (animate), the page can just say the verb at scale.
  • Creamy off-white text (#fffce1) on near-black with a green tint (#0e100f) — softer than pure white-on-black, less clinical than the Liveblocks pure-black palette.
  • Decorative oversize curly braces wrapping the tag-line — a typographic flourish that signals "this is a developer tool" without using a code block.
  • A short page (6 main sections) — Animate Anything → Why GSAP® → Tools → Brands using GSAP → Showcase. The product carousel doesn't need feature blocks, just demonstrations.
  • A promo banner above the nav in saturated brand-green (#0ae448) — high contrast against the near-black, used for major announcements ("GSAP is now free for everyone").
  • 3D liquid forms as the only imagery — abstract gradient blobs that animate on hover/scroll. The opposite of stock product screenshots.
  • A zero-keyframes, zero-AOS, ten-CSS-transitions minimal CSS footprint with everything else handled in GSAP — the site IS the demo.

Do not copy

  • Mori — the bespoke sans is licensed and Mori Foundry's, not portable. Substitute with a humanist sans (Inter Display, Söhne Buch, Mona Sans).
  • The exact #0e100f green-tinted near-black with #fffce1 cream off-white — strongly GSAP-coded.
  • The "Animate Anything" headline pattern at 101px — only works for products that ARE the verb. On a SaaS product with multiple capabilities, this hero will read as vague.
  • Loading GSAP for a non-animation-heavy client. GSAP is ~50KB gzip and the smart-money replacement for most use cases is CSS keyframes + IntersectionObserver. Borrow the *aesthetic* of GSAP's site, not the library.
  • The 3D liquid-form imagery — bespoke; commission new abstract objects for each client.
  • The fractional pixel sizes (15.38px, 17.38px, etc.) without GSAP doing the scrub. On a static page these are arbitrary.

Signature moves

product-is-the-demo homepage

every animation on the page is built with the product itself, making the homepage the most convincing live demo, supported by a short 6-section page of demonstrations not feature blocks.

verb-at-scale mega headline on creamy dark

a massive ~101px headline naming the product's core verb sits in creamy off-white (#fffce1) on green-tinted near-black (#0e100f), wrapped in decorative oversize curly braces.

rare-green announcement banner

a promo banner above the nav in a saturated brand-green (#0ae448) lands hard because the rest of the page is near-black, used for major announcements.