How gsap.com is built: one typeface, named colors, a short list of easings

Issue 001 · measured, not guessedUpdated October 22, 2026

gsap.com sets every character in one typeface and spends its effort on motion. This issue is what a real browser found on 21 October 2026: the type, the color system, the easing vocabulary and the GSAP calls behind the scroll reveals. Every number below comes from a measurement, and the last section links to tools that repeat most of them.

One typeface, two weights, and a fluid scale

The font file the page loads is PP Mori. Its own name table credits Caio Kondo, Mathieu Desjardins & Satsuki Arakaki of Pangram Pangram. It draws 100% of the text from two real files, PPMori-Regular and PPMori-SemiBold, at weights 400 and 600. Those are the only @font-face rules on the page, so this is not a synthesized bold.

All the variety comes from size. The page uses 12 distinct sizes, from 14px up to 76.5px, including odd ones like 33.5px. Odd sizes are what fluid type produces, and 24 of the page's 71 font-size rules are fluid, written as a max() around a min() that mixes vw and rem. One of them reads max(5.625rem,min(5.58824vw + 1.29412rem,8rem)). All of that CSS is inline: the page links no external stylesheets.

One family with a fluid scale gives you hierarchy without a second font to download.

24 named colors, three of them carrying the page

The root element declares 24 color variables and 20 gradient tokens, with names like --color-shockingly-green. Measured by coverage, three carry the page and a fourth is the accent:

Text on background has a contrast ratio of 18.4:1. The accent covers a sliver of the page, which is why it reads as loud. The greys are named by step rather than by mood: --color-surface25, --color-surface50 and --color-surface75.

6 easing variables, and 3 in constant use

The site declares 6 easing curves as custom properties. Its CSS transitions lean on 3 of them, which between them cover 97% of the elements that transition: cubic-bezier(0.645, 0.045, 0.355, 1) (--ease-in-out-quart) on 49 elements, cubic-bezier(0.23, 1, 0.32, 1) (--ease-out) on 14, and cubic-bezier(0.86, 0, 0.07, 1) (--ease-in-out) on 10. The most common duration is 0.3s, on 50 elements.

Count the CSS animations running when the page is idle and you get 0. Everything that moves on a scroll is JavaScript.

The GSAP side

The page runs GSAP 3.15.0 with 5 plugins loaded: ScrollTrigger, ScrollSmoother, MotionPathPlugin, DrawSVGPlugin, CustomEase. After a scroll through the page, a local read finds 201 live tweens and 34 ScrollTriggers, 1 of them pinned.

Enrichr's capture, which instruments the page as it loads, records 62 top-level tweens (28 from, 23 set, 11 to) and 25 ScrollTriggers, 3 of them scrubbed, plus 200 tweens inside timelines. The two counts differ because they measure different moments. Both are real.

The ease vocabulary inside those timelines is ordinary: power2.out on 44 tweens, power3.inOut on 25, power3.out on 15. Nothing exotic here. The effect comes from using the same few eases everywhere.

One recipe repeats. 16 of the 62 top-level tweens are the same text reveal, and all 16 are tied to a ScrollTrigger:

gsap.from(".your-line span", {
  autoAlpha: 0,
  yPercent: 100,
  ease: "power2.out",
  duration: 0.6,
  scrollTrigger: ".your-line",
})

Where the triggers start varies. The most common start positions are left 70% on 12 triggers and top 75% on 4. A start on left fires on horizontal scroll.

Steal this

• One family, a fluid scale. Write sizes as max(min-size, min(vw + rem, max-size)) and skip the second font.
• Name colors by role and keep the accent small. Three colors carry the page here, and the accent covers 2.2% of background area.
• Declare your easings once. 3 curves cover 97% of the transitions on a site this animated:

:root {
  --ease-in-out-quart: cubic-bezier(.645,.045,.355,1);
  --ease-out: cubic-bezier(.23,1,.32,1);
  --ease-in-out: cubic-bezier(.86,0,.07,1);
}

Inspect it yourself

Every claim above can be checked. The gsap.com breakdown in the Enrichr gallery has the full capture. Paste gsap.com into the font finder, the color palette extractor, the animation library checker or the design token extractor, or install the Chrome extensions and click.

How this was measured

A local read in headless Chrome at 1440 by 900, after scrolling the page once, run 2 times with identical results. Enrichr's animation capture at 1920 by 1080. The font file's name table, read directly. The page's inline CSS, scanned for font sizes. The evidence files are kept with the issue, and a test fails if a number in the text stops matching them. Sites change, so treat this as a snapshot of 21 October 2026.

FAQ