# Taste Gsap

> |

- **Type:** Skill
- **Install:** `agentstack add skill-madebymustafa-design-taste-taste-gsap`
- **Verified:** Yes — security-reviewed for prompt injection and unsafe behavior
- **Seller:** [madebymustafa](https://agentstack.voostack.com/s/madebymustafa)
- **Installs:** 0
- **Category:** [AI & ML](https://agentstack.voostack.com/c/ai-and-ml)
- **Latest version:** 0.1.0
- **License:** MIT
- **Upstream author:** [madebymustafa](https://github.com/madebymustafa)
- **Source:** https://github.com/madebymustafa/design-taste/tree/main/skills/taste-gsap

## Install

```sh
agentstack add skill-madebymustafa-design-taste-taste-gsap
```

Requires the [AgentStack CLI](https://agentstack.voostack.com/docs/cli). Works with Claude Code, Cursor, and any MCP-compatible agent.

## About

# taste-gsap

> GSAP is a scalpel, not a glitter gun. One clean pinned section beats nine parallax layers — and survives a code review.

## 1. ARCHITECTURE (The Non-Negotiable Shell)

- Wrap every page's animations in a single `gsap.context(() => { ... }, rootElement)` — it scopes selectors and gives you instant teardown.
- Gate everything through `gsap.matchMedia()`:
  - `(prefers-reduced-motion: no-preference)` — all animation lives here. Reduced-motion users get the static, complete page.
  - `(min-width: 768px)` — heavy effects (pins, scrubs, per-character splits) desktop-only; small screens get fades or nothing.
- The matchMedia callback returns a cleanup function; on SPAs, call `ctx.revert()` on unmount.
- One timeline per section, named by section; never one giant global timeline with 40 tweens.
- Lenis (free, not ScrollSmoother): `new Lenis({ duration: ~1.1, anchors: true })`, pipe it to ScrollTrigger with `lenis.on("scroll", ScrollTrigger.update)` + `gsap.ticker.add(t => lenis.raf(t * 1000))` + `gsap.ticker.lagSmoothing(0)`. `lenis.stop()` during the preloader, `lenis.start()` after. Never smooth-scroll under reduced motion.

## 2. PIN & SCRUB HYGIENE (Where Agents Fail Loudest)

- **Max two pinned sections per page.** Every pin costs the scroll thread. Two is the budget; one is the norm.
- Pins: `pin: true, pinSpacing: true` (default — keep it), `start: "top top"`, `end: "+=200%"` to `"+=300%"`. Longer ends = slower scrub = more jank on mobile.
- Horizontal galleries (the signature Awwwards move): pin the *section*, translate the *track* (`x` only, never `left`), `end: () => "+=" + (track.scrollWidth - innerWidth)` so the distance recalculates on resize, `scrub: 1`, desktop-only. Native `overflow-x` + scroll-snap must remain as the no-JS / reduced-motion fallback.
- Drag carousels (Magma-school): `Draggable.create(track, { type: "x", inertia: true, bounds: () => ({ minX: -(track.scrollWidth - wrap.offsetWidth), maxX: 0 }) })` — bounds as a *function* so it recalibrates on resize. `edgeResistance` ~0.9, native `overflow-x` + snap as the no-JS fallback, and a cursor/UI hint that the strip is draggable.
- `scrub: 0.6`–`1` on heavy sections; `scrub: true` only on trivial tweens. A scrubbed tween without smoothing fights the scroll.
- Never pin inside another pin; never start a second pin before the first's spacer ends. `ScrollTrigger.refresh()` after fonts/images (`window.load` + `document.fonts.ready`) or everything misaligns.
- Test pins at 768px width before shipping — pinned sections that trap mobile users are a bug, not a feature (this is why pins live in the `(min-width: 768px)` gate).
- `invalidateOnRefresh: true` on refresh-dependent triggers so re-layouts don't drift.

## 3. WHAT TO ANIMATE (Transform and Opacity Only)

- Animate `x`, `y`, `scale`, `rotation`, `opacity` — never `top/left/width/height/margin/filter` (layout thrash = jank).
- Text reveals: line-level splits (`overflow: hidden` wrapper + `yPercent: 110` → 0) by default. Character-level only for hero headlines, and only inside the desktop gate.
- No `will-change` spam — set it on the animated element's wrapper while animating, remove after (or let GSAP manage it). Every `will-change` is a memory promise.
- Keep 60fps honesty: no 200-element stagger in one frame, no scrubbing 40 DOM properties. Batch with `gsap.utils.toArray` and stagger — one tween, many targets, cheap.

## 4. REVEAL PATTERNS (The Professional's Defaults)

- **From-states stay in code, not CSS:** elements start visible in CSS; `gsap.from(...)` with `immediateRender: true` inside the matchMedia gate hides them only when JS + motion are active. If GSAP never loads, the page is complete — this is the safety contract.
- Standard reveal: `opacity: 0, y: 40, duration: 0.9, ease: "power3.out"`, trigger `top 82%`, `once: true` for content sections.
- Hero intro: a `gsap.timeline()` on load — 80–120ms stagger between elements, `ease: "expo.out"` or `power4.out`, total under 1.4s. The page is a story with a first line, not a slideshow.
- Count-ups: tween a proxy object (`gsap.to(obj, { v: target })`), write `el.textContent` in `onUpdate`, `snap` optional. `once: true` on the trigger.

## 5. THE FULL STACK OF SINS (Each Is a Fail)

- Scroll-jacking the wheel without a smooth-scroll layer (Lenis) and then not testing it — native scroll is a feature.
- Animations that trigger before the content exists (missing `ScrollTrigger.refresh()`).
- Infinite marquees that aren't paused under reduced motion — kill them in CSS with `@media (prefers-reduced-motion: reduce)` too, not just in JS.
- Autoplaying anything: hero video, accordions, carousels that move without input. Awwwards confidence is stillness between moments.
- A page whose "wow" depends on animation: if the still screenshot is boring, the animation is makeup, not design.

## 6. CHECKLIST (Fail the Animation If…)

- [ ] No `gsap.context` + `matchMedia` gating (reduced-motion users see animation).
- [ ] More than two pinned sections, or a pin under 768px.
- [ ] Any animated layout property (`top/left/width/height`).
- [ ] No `ScrollTrigger.refresh()` after fonts/images.
- [ ] Per-character splits outside the desktop gate.
- [ ] Marquee or autoplay without a reduced-motion kill switch.
- [ ] The still frame (no JS) isn't a complete, beautiful page.
- [ ] Any animation that exists for its own sake — every move serves the story or dies.

## Source & license

This open-source skill is cataloged on AgentStack and links to its original source — we do not rehost the code.

- **Author:** [madebymustafa](https://github.com/madebymustafa)
- **Source:** [madebymustafa/design-taste](https://github.com/madebymustafa/design-taste)
- **License:** MIT

Install and usage instructions live in the source repository linked above.

## Pricing

- **Free** — Free

## Security capabilities

Automated source analysis of v0.1.0 — what this tool can access:

- **Network access:** no
- **Filesystem access:** no
- **Shell / process execution:** no
- **Environment & secrets:** no
- **Dynamic code execution:** no

*"Yes" means the capability is present in the source — more access means more to trust, not that it is unsafe.*


## Versions

- **0.1.0** — security scan: passed — Imported from the upstream source.

## Links

- Listing page: https://agentstack.voostack.com/l/skill-madebymustafa-design-taste-taste-gsap
- Seller: https://agentstack.voostack.com/s/madebymustafa
- Browse the marketplace: https://agentstack.voostack.com/browse

---
Listed on AgentStack — the marketplace for AI agent skills and MCP servers. Every listing is security-reviewed. Creators keep 70%.