skills.rest
ccediland
ccedilandCOMMUNITY
Explore all skills by this author →
GitHub

motion-system

Routes web animation to CSS scroll-driven, GSAP, or Motion engines on Astro 7 sites.

Updated Jun 17, 2026
Search Tags:#animation#csp#astro#gsap#reduced motion#view transitions#css scroll-driven
One-click install
npx skills add https://github.com/ccediland/web-stack-skills --skill motion-system-ccediland
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: motion-system
Source: https://github.com/ccediland/web-stack-skills/tree/main/plugin/skills/motion-system
Command: npx skills add https://github.com/ccediland/web-stack-skills --skill motion-system-ccediland

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires gsap, @gsap/react, motion, and includes references (resource) components.

What problem does it solve? Choosing the wrong animation engine wastes JavaScript budget and breaks under strict CSP or reduced-motion requirements. This Skill routes every animation job on an Astro 7 plus Cloudflare site to the lightest engine that can express it, with verified loading patterns, CSP rules, and accessibility gates. ## Core Features & Use Cases - Engine selection ladder: Native CSS scroll-driven animations for reveals, parallax, and progress; GSAP plus ScrollTrigger for scrubbed, pinned, or snapped cinematic timelines; Motion only inside React islands that already exist. - CSP and reduced-motion recipes: Ship-safe loading under Astro 7 hash-based CSP (bundled scripts, never is:inline) and per-engine prefers-reduced-motion gating that protects the 0.95 accessibility floor. - View transitions and hover micro-interactions: The animateView and ClientRouter ladder for page navigation, plus token-driven CSS hover effects. - Use Case: You need a pinned cinematic section on a static Astro page. The Skill directs you to GSAP plus ScrollTrigger loaded via a bundled script, lazy-loaded on intersection, gated with gsap.matchMedia, budgeted at about 45 KB gzipped. ## Quick Start Ask the assistant to add a scroll reveal or pinned cinematic section to your Astro page and let it pick the right animation engine.

Frequently Asked Questions about motion-system

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I add scroll reveal animations in Astro?▼

Use native CSS scroll-driven animations with animation-timeline: view() wrapped in an @supports guard and a prefers-reduced-motion media query. Author the default state as the final visible state so unsupported browsers and reduced-motion users keep readable content, with zero JavaScript.

GSAP vs CSS scroll-driven animations: which should I use?▼

Use native CSS for reveals, parallax, progress bars, sticky effects, and staggered reveals at zero JS cost. Escalate to GSAP plus ScrollTrigger only when you need scrubbed multi-element timelines, true pinning with content lock, panel snapping, nested orchestration, or motion paths.

Does GSAP work with a strict Content-Security-Policy?▼

Yes, under Astro 7 hash-based CSP when loaded as a bundled Astro script or hydrated island, never is:inline. GSAP's per-property element.style writes are exempt from style-src, so no unsafe-inline is needed; avoid bulk cssText and setAttribute style writes.

How do I handle prefers-reduced-motion with GSAP and CSS animations?▼

Gate CSS scroll-driven animations inside @media (prefers-reduced-motion: no-preference) with a static default state. For GSAP, use gsap.matchMedia with a no-preference condition so the reduce branch builds nothing; for Motion, use the useReducedMotion hook or MotionConfig.

Why is my CSS scroll-driven animation not working in Firefox?▼

Firefox requires a non-zero animation-duration (convention 1ms) for scroll-driven animations to apply, and stable Firefox still gates the feature behind the layout.css.scroll-driven-animations.enabled flag. Always ship behind an @supports guard with an accessible fallback.

When should I use Motion instead of GSAP in React?▼

Use Motion only inside a React island that already exists: Mini useAnimate (about 2.3 KB) for imperative sequences, full motion/react for declarative component motion. Choose GSAP via the useGSAP hook when the island specifically needs ScrollTrigger pin, scrub, or snap.

Related Skills

Explore More Software Engineering Skills→
sernstbergersernstberger

css-variables

Apply theme tokens as CSS variables to UI components at runtime.

Community
Intermediate
Hack23Hack23
8

performance-optimization

Enforce frame time, bundle size, and Lighthouse performance budgets in Three.js CI workflows.

Official
Advanced
syncfusionsyncfusion

syncfusion-aspnetcore-security

Configure Content Security Policy nonces for Syncfusion ASP.NET Core EJ2 components.

Official
Intermediate
nexu-ionexu-io
93.2k

webgl-liquid-iridescence

Generate a self-contained WebGL2 interactive hero animation featuring an iridescent oil-on-water flow field.

Official
Intermediate