Motion Craft GSAP Review
Goal
Create tasteful motion that improves clarity, storytelling, and perceived quality without hurting performance or accessibility.
When to use
Use for GSAP timelines, ScrollTrigger sections, sticky storytelling, reveal animations, hover/tap microinteractions, parallax, animated hero sections, and motion audits.
Workflow
- Inspect whether GSAP or another motion library is already installed before adding dependencies.
- Ask before adding GSAP as a new production dependency if it is not already present.
- Use client components only where browser APIs or animation lifecycle are needed.
- Prefer transform and opacity over layout properties like top, left, width, and height.
- Use timelines for coordinated sequences and keep motion purposeful, short, and readable.
- Use gsap.context or equivalent cleanup so animations do not leak across route changes.
- Respect prefers-reduced-motion and provide a reduced or disabled motion path.
- For ScrollTrigger, define clear trigger, start/end, scrub/pin only when needed, and clean up on unmount.
Quality bar
- Run lint/type/build or nearest validation command.
- Check browser console for GSAP/ScrollTrigger errors when possible.
- Verify route changes or component unmounts do not leave active animations.
Validation
- Motion supports hierarchy or story instead of decorating randomly.
- Animations feel smooth, quick, and intentional.
- No transition-all spam, no layout-thrashing animations, no motion that blocks interaction.
- Reduced-motion users are respected.
Final response
- List animations added or changed, cleanup strategy, and reduced-motion handling.
1---2name: motion-craft-gsap-review3description: Use this when adding, refactoring, or reviewing GSAP, ScrollTrigger, parallax, reveal animations, page transitions, microinteractions, or motion systems in frontend UI.4---56# Motion Craft GSAP Review78## Goal910Create tasteful motion that improves clarity, storytelling, and perceived quality without hurting performance or accessibility.1112## When to use1314Use for GSAP timelines, ScrollTrigger sections, sticky storytelling, reveal animations, hover/tap microinteractions, parallax, animated hero sections, and motion audits.1516## Workflow17181. Inspect whether GSAP or another motion library is already installed before adding dependencies.192. Ask before adding GSAP as a new production dependency if it is not already present.203. Use client components only where browser APIs or animation lifecycle are needed.214. Prefer transform and opacity over layout properties like top, left, width, and height.225. Use timelines for coordinated sequences and keep motion purposeful, short, and readable.236. Use gsap.context or equivalent cleanup so animations do not leak across route changes.247. Respect prefers-reduced-motion and provide a reduced or disabled motion path.258. For ScrollTrigger, define clear trigger, start/end, scrub/pin only when needed, and clean up on unmount.2627## Quality bar2829- Run lint/type/build or nearest validation command.30- Check browser console for GSAP/ScrollTrigger errors when possible.31- Verify route changes or component unmounts do not leave active animations.3233## Validation3435- Motion supports hierarchy or story instead of decorating randomly.36- Animations feel smooth, quick, and intentional.37- No transition-all spam, no layout-thrashing animations, no motion that blocks interaction.38- Reduced-motion users are respected.3940## Final response4142- List animations added or changed, cleanup strategy, and reduced-motion handling.
YankielDBC2