Taste Gsap

Community

madebymustafa

taste-gsap

GSAP implementation craft for agent-built sites: timeline architecture, gsap.context and matchMedia, ScrollTrigger pin and scrub hygiene, SplitText discipline, transform-only animation, refresh-after-fonts, and full prefers-reduced-motion gating. The 90% of award-tier motion is structure, not effects — this is that 90%. Use whenever generating GSAP animation code. Stack on the design-taste core skill and taste-motion.

Overview

Publisher	madebymustafa
Repository	`design-taste`
Skill name	`taste-gsap`
Stars	198
Forks	10
Bundled files	Instructions only
License	MIT
Links	Skill source Repository

Markdown instructions
A SKILL.md file the model loads on demand, so it only costs tokens when a request actually matches.
Works with any LLM
AI skills are plain Markdown, not provider-specific code, so this works with GPT, Claude, Gemini, Grok, or a local model.
Self-contained
Everything the model needs lives in the instructions — no extra files to sync.
Open source
Published by madebymustafa on GitHub. Read the source before you install it.

Installation

Install the Taste Gsap AI skill in TypingMind to use it with any LLM, or drop it into another agent that reads SKILL.md.

Install in TypingMind

TypingMind installs a skill straight from its GitHub folder — it reads SKILL.md, bundles the resource files, and stores the result locally.

Open the app and go to Plugins → Skills.
Choose "Install from GitHub".
Paste the skill folder URL below and confirm.
https://github.com/madebymustafa/design-taste/tree/main/skills/taste-gsap
Enable the skill in any chat where you want it available.

Plugins → Skills → Add skill → From GitHub URL, then paste the folder URL and press Continue.

Install in another agent

Any agent that reads the Agent Skills format can use this skill — copy the folder into that agent's skills directory.

Claude Code — .claude/skills

git clone --depth 1 https://github.com/madebymustafa/design-taste.git /tmp/design-taste
mkdir -p .claude/skills
cp -r /tmp/design-taste/skills/taste-gsap .claude/skills/taste-gsap

Restart Claude Code after copying so it picks up the new skill.

Use it in TypingMind

Enable Taste Gsap in any TypingMind chat and the model takes it from there. Its name and description sit in the system prompt, and the moment a request matches, the model loads the full instructions itself — you never invoke it by hand, and it costs no tokens until it is actually used.

The model loads Taste Gsap on its own as soon as a request matches it.

Works with any AI model

AI skills are plain Markdown instructions rather than provider-specific code, so Taste Gsap is not tied to the model it was written for. Install it once in TypingMind and use it with GPT-5, Claude, Gemini, Grok, DeepSeek, Mistral, Llama, or a local model you run yourself — all on your own API keys.

Loaded only when it is needed
The system prompt carries just the name and description. The instructions are fetched on the first matching request, so an idle skill costs nothing.
Switch models mid-chat
Because the skill is instructions rather than code, changing model does not break it — the next model reads the same SKILL.md.

Skill instructions

This is the SKILL.md content the model loads. Read it before installing — a skill is instructions your model will follow.

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.

Frequently asked questions

What does the Taste Gsap AI skill do?

Why use Taste Gsap on TypingMind?

Because you install it once and use it with any model. Taste Gsap is plain Markdown rather than provider-specific code, so the same skill runs on GPT-5, Claude, Gemini, Grok, or a local model — and you can switch model mid-chat without it breaking. TypingMind runs on your own API keys, so you pay providers directly instead of a per-seat subscription, and your skills and chats stay in your own storage.

How do I install Taste Gsap in TypingMind?

Open Plugins → Skills → Install from GitHub in TypingMind and paste https://github.com/madebymustafa/design-taste/tree/main/skills/taste-gsap. TypingMind reads its SKILL.md and installs it as a skill you can enable per chat.

Which AI models can use Taste Gsap?

Any model you connect in TypingMind. AI skills are plain Markdown instructions rather than provider-specific code, so GPT, Claude, Gemini, Grok, and local models can all load this skill when a request matches it.

How many AI models can I use with Taste Gsap?

As many as you like. As long as a model supports skills, you can use Taste Gsap with it — GPT, Claude, Gemini, Grok, DeepSeek, Mistral, Llama and more — all on TypingMind with your own API keys.

Is the Taste Gsap AI skill free?

Yes. It is published on GitHub by madebymustafa under the MIT license. You only pay your own AI provider for the tokens you use.

What are AI skills?

An AI skill is a reusable instruction bundle that teaches an AI model how to do one specific task. It follows the open Agent Skills format: a SKILL.md file with a name and description, plus any scripts, templates or reference files the model may need. The model reads the instructions only when your request matches the skill, so an installed skill costs nothing until it is used.

How are AI skills different from plugins or MCP servers?

A plugin or MCP server gives a model new tools to call — code that runs somewhere and returns a result. An AI skill gives the model knowledge and process instead: how to approach a task, which steps to follow, what good output looks like. Skills are plain Markdown, so they need no server, no API key and no runtime, and they work with any model.

View all

Archify

NousResearch

OrganizationPopular

Validated interactive HTML diagrams, upstream-maintained.

Auteur

Design and build cinematic, award-level web pages.

Concept Diagrams

Generate flat, minimal educational SVG visuals as HTML.

Hyperframes

Render MP4/WebM videos from HTML compositions.

Overview

Installation

Install in TypingMind

Install in another agent

Use it in TypingMind

Works with any AI model

Skill instructions

taste-gsap

1. ARCHITECTURE (The Non-Negotiable Shell)

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

3. WHAT TO ANIMATE (Transform and Opacity Only)

4. REVEAL PATTERNS (The Professional's Defaults)

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

6. CHECKLIST (Fail the Animation If…)

Frequently asked questions

Related AI Skills

Set up your own AI workspace now