Tiers
Lightweight, GSAP, Premium — and when to escalate.
Three tiers, each additive. A tier decision is made once per engagement at design audit — it is not changed per component or per page section.
Tier comparison
| Tier | Files required | Use when | Load cost |
|---|---|---|---|
| Lightweight | tokens/animations.css + tokens/motion-classes.css + css/animations.css + a scroll observer snippet | Default for every mockup. Fade / slide reveals, hover micro-interactions, stagger. | ~8 KB CSS, no JS library |
| GSAP | Above + GSAP CDN (gsap + ScrollTrigger + optionally SplitText) | Design calls for scroll pinning, scrubbing, horizontal scroll panels, text splitting. | ~120 KB JS (CDN-cached) |
| Premium | Above + css/premium-effects.css + js/premium-scroll.js | Design calls for atmosphere: hero sequences, background morphs, grain, glass, magnetic buttons, video scrub. | ~140 KB JS + ~25 KB CSS |
Decision tree
Read through these questions in order. Stop at the first match.
-
Does the design mention scroll scrubbing, pinning, horizontal scroll panels, or letter-by-letter text splitting? → GSAP tier. These effects require ScrollTrigger or SplitText — they cannot be replicated with CSS transitions.
-
Does the design reference atmosphere words: grain, film texture, glass, frosted, magnetic cursor, video scrub, hero sequence, color morph? → Premium tier. These require
premium-effects.cssandpremium-scroll.js. -
Everything else — fade reveals, slide-up on scroll, hover lifts, stagger entrances? → Lightweight. Default. Most client sites live here.
The tiers are not a quality ladder. A well-composed Lightweight site can be more effective than a Premium site that reaches for effects without purpose. The tier selection reflects what the design needs, not the ambition level of the build.
Per-tier pages
Each tier's page shows the exact files to load, the CSS / JS patterns specific to that tier, and the demos of effects that belong there.
- Lightweight — fade / slide / stagger, scroll IntersectionObserver, CSS hover
- GSAP — pinning, scrubbing, horizontal scroll, SplitText
- Premium — grain, glass, magnetic buttons, hero sequences, video scrub
Tier ambiguity
Clip-path reveals (circle, curtain, wipe, rise, diagonal, diamond) are implemented in css/animations.css and triggered with .is-visible via IntersectionObserver — making them Lightweight in file dependency. However, they produce a cinematic effect more commonly associated with Premium-feeling sites. They are classified here as Lightweight because they carry no JS library dependency. If the design audit calls for them on a GSAP or Premium site, they compose cleanly with both.
Stagger patterns are Lightweight when driven by animation-delay via .bds-stagger-* classes. They become GSAP when driven by gsap.from() with a stagger parameter — the latter allows dynamic stagger values, reversed sequences, and from/to ranges that CSS delay cannot express. Pick based on whether you need runtime control, not visual outcome.
Related
- Motion Overview — the three-tier philosophy
- Vocabulary — the
animation_tierfield captured in the portal - Effects — implementation patterns by category