skills.rest
Samuelca6399
Samuelca6399COMMUNITY
Explore all skills by this author →
GitHub

motion-design

Implement web animations with CSS, Framer Motion, and GSAP.

Updated Aug 27, 2026
Search Tags:#accessibility#micro-interactions#motion design#gsap#framer-motion#ui animation#css transitions
One-click install
npx skills add https://github.com/Samuelca6399/AbsolutelySkilled --skill motion-design-samuelca6399
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: motion-design
Source: https://github.com/Samuelca6399/AbsolutelySkilled/tree/main/skills/motion-design
Command: npx skills add https://github.com/Samuelca6399/AbsolutelySkilled --skill motion-design-samuelca6399

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

Eliminates the confusion and trial-and-error that come with adding animations and motion to web interfaces by providing practical patterns that are performant and accessible.

Core Features & Use Cases

  • Motion implementation for real UI states: Covers CSS transitions and keyframes, Framer Motion enter/exit patterns, GSAP timelines, scroll-driven reveals, and micro-interactions like hover/press/toggles.
  • Performance-first guidance: Prioritizes 60fps behavior via compositor-friendly properties (transform/opacity), sensible durations, and restraint to avoid distracting decoration.
  • Accessibility guardrails: Enforces prefers-reduced-motion handling and avoids common pitfalls that cause jank, overlap bugs, or broken exit animations.

Quick Start

Install and start using the motion-design skill by telling your AI agent: "Use the motion-design skill to implement enter and exit animations for my React modal, following prefers-reduced-motion."

Frequently Asked Questions about motion-design

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

FAQPage Schema
How do I implement enter and exit animations in Framer Motion without causing overlap bugs?▼

To implement enter and exit animations safely, use proper Framer Motion enter/exit patterns for UI state changes, ensuring correct component mounting and unmounting to avoid overlap bugs or broken exit animations.

When should I use CSS transitions versus GSAP for scroll-driven UI animation?▼

Use CSS transitions for simple state changes and micro-interactions, while GSAP is better suited for complex scroll-driven reveals and timeline-based effects requiring precise sequencing and JavaScript control.

How do I make web animations accessible for users with prefers-reduced-motion settings?▼

Make web animations accessible by enforcing prefers-reduced-motion handling, which disables or alters motion behavior to prevent vestibular triggers while maintaining essential UI state change feedback.

Why does my UI animation cause jank and drop below 60fps performance?▼

UI animation causes jank when animating non-compositor-safe properties; prioritizing transform and opacity ensures 60fps behavior by keeping motion processing on the compositor thread instead of blocking the main thread.

Can I use Framer Motion and GSAP together for page transitions and timelines?▼

You can use Framer Motion for declarative React enter/exit patterns and GSAP for complex timeline-based effects, selecting the correct CSS vs JS animation mechanism based on the specific UI motion requirements.

Related Skills

Explore More Design & Creative Skills→
bovinphangbovinphang
21

fec-motion-interaction

Standardize frontend motion patterns for accessible, high-performance UI transitions.

Community
Advanced
sgcarstrendssgcarstrends
21

framer-motion-animations

Implement scroll-triggered and entrance animations with Framer Motion variants and TypeScript typings.

Official
Intermediate
abzhawabzhaw

framer-motion

Create UI animations with Framer Motion in Next.js dashboards.

Community
Intermediate
mgd34msumgd34msu
4

view-transitions

Implement animated view transitions in SPAs and MPAs using the View Transitions API.

Community
Intermediate