{
 "schema_version": 1,
 "generated": "2026-10-30",
 "id": "madebymustafa-design-taste--add-gsap-motion-with-reduced-motion-safety",
 "repo": "madebymustafa/design-taste",
 "repo_url": "https://github.com/madebymustafa/design-taste",
 "repo_slug": "madebymustafa-design-taste",
 "title": "Add scroll animation with GSAP and reduced-motion fallbacks",
 "page_title": "How to add scroll animation with GSAP and reduced-motion fallbacks with Design Taste",
 "summary": "Use taste-gsap and taste-motion so an agent adds GSAP motion with gating and accessibility built in.",
 "who": "A frontend developer building a marketing or product page who wants scroll-driven motion without janky pins or ignored reduced-motion settings.",
 "problem": "Agent-written GSAP code often skips context gating, pin and scrub hygiene, and reduced-motion handling.",
 "outcome": "A page section with GSAP animation that uses context and matchMedia gating, transform-only motion, and a reduced-motion fallback.",
 "steps": [
  "Run `git clone https://github.com/madebymustafa/design-taste.git` and then `cd design-taste`.",
  "Run `./scripts/install.sh` or copy the `skills/taste-gsap` and `skills/taste-motion` folders into your agent's skills directory.",
  "Install the GSAP library in your project following the GSAP documentation, since the README does not describe how to add it. (inferred, check the README)",
  "Ask your agent to add the animation to one section and to apply the taste-gsap and taste-motion rules.",
  "Test the page with the operating system reduced-motion setting turned on and confirm the fallback appears."
 ],
 "agent_prompt": "Using the taste-gsap and taste-motion skills in the design-taste repo, add a scroll animation to the <section name> of <project path>, with context and matchMedia gating and a reduced-motion fallback. Output the changed files and verify that animation runs only through transform properties.",
 "agents": [
  "claude-code",
  "codex",
  "cursor"
 ],
 "difficulty": "Advanced",
 "time": "60 minutes",
 "basis": "readme",
 "caveat": "The README lists GSAP craft rules but does not say which GSAP version or setup the skill expects, so check your project's GSAP setup first.",
 "category": "Software and DevOps",
 "tags": [
  "Software and DevOps"
 ],
 "lang": "javascript",
 "requirements": [
  "git and a terminal to clone the repo",
  "An AI coding agent such as Claude Code, Codex, Cursor, or opencode",
  "A web browser to open the before and after HTML examples",
  "A brief for the page or interface you want to build"
 ],
 "risk": "none",
 "seen_in_the_wild": false,
 "mentioned_publicly": false,
 "risks": [],
 "best": false,
 "score": 0.8,
 "evidence": [],
 "url": "https://dedupedai.com/use-cases/madebymustafa-design-taste/add-gsap-motion-with-reduced-motion-safety/",
 "md": "https://dedupedai.com/use-cases/madebymustafa-design-taste/add-gsap-motion-with-reduced-motion-safety/index.md",
 "disclaimer": "Deduped lists open-source repositories that belong to other people. We do not own, maintain, audit, or vouch for any of them, and a repo appearing here is not an endorsement or a safety check. The use cases, steps, and prompts are written by AI and may be incomplete, outdated, or just wrong. Where a use case is marked \"Seen in the wild\", we link to public posts where someone described something similar, but we have not verified those posts and the use case itself is still our AI's own write-up. Use all of this at your own risk. Only run code, commands, or agents on systems and accounts you are authorized to use, and read the code and every command before you run it, especially anything that touches credentials, files, or the network. Nothing here is professional, security, legal, or financial advice. All trademarks and project names belong to their respective owners, and their use here does not imply affiliation. Content is provided as is, without warranties of any kind. Found a mistake, a safety problem, or something you want removed? Email hello@dedupedai.com and we will look at it promptly.",
 "api": "https://dedupedai.com/api/v1/usecases/madebymustafa-design-taste--add-gsap-motion-with-reduced-motion-safety.json",
 "api_version": "v1"
}