skills.rest
josippapez
josippapezCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

animation-systems

Designs product-grade web motion systems with easing, choreography, and accessibility guidance.

Updated May 5, 2026
Search Tags:#web design#animation#motion design#gsap#easing#framer motion#reduced motion
One-click install
npx skills add https://github.com/josippapez/ai-setup --skill animation-systems-josippapez
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: animation-systems
Source: https://github.com/josippapez/ai-setup/tree/main/claude/plugins/better-design/skills/animation-systems
Command: npx skills add https://github.com/josippapez/ai-setup --skill animation-systems-josippapez

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Web animations often feel janky, excessive, or inconsistent because teams lack a shared motion system. This Skill provides the principles, defaults, and choreography patterns used by Stripe, Linear, Apple, and Vercel so you can ship tasteful, performant motion instead of ad-hoc animation. ## Core Features & Use Cases - Motion tokens and defaults: Practical duration ranges (120ms micro to 1600ms hero), easing guidance, and stagger values you can adopt as a design system. - Choreography patterns: Reusable primitives like fade-and-rise entrances, hover lift-and-glow, scroll-triggered section reveals, and hero-to-supporting-element sequencing. - Performance and accessibility rules: Transform/opacity-only animation, GPU constraints, and full prefers-reduced-motion support. - Use Case: You are building a marketing landing page and want Stripe-style polish. Ask for a motion plan and receive goals, tokens, a timeline-based choreography plan, performance notes, and a GSAP or Framer Motion code recipe. ## Quick Start Ask the AI to add Stripe-style animation to your landing page hero section with reduced-motion support.

Frequently Asked Questions about animation-systems

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

FAQPage Schema
How do I add Stripe-style animations to my website?▼

Start with restrained motion primitives: fade-and-rise entrances (opacity 0 to 1, Y 12-24px to 0) over 300-700ms with ease-out curves. Animate the hero element first, then stagger supporting elements by 40-90ms, and keep hover effects to subtle lifts of 2-6px.

What duration and easing should UI animations use?▼

Use 120-200ms for hover and press feedback, 180-260ms for state changes, 220-320ms for popovers and toasts, and 400-800ms for section entrances. Prefer ease-out for entering elements and faster ease-in for exits, avoiding elastic or bouncy curves for serious product UI.

GSAP vs Framer Motion for web animations?▼

Both work for complex sequences; the Skill is library-agnostic and recommends picking one motion library per project. Use CSS transitions for simple hovers and toggles, and reserve GSAP timelines or Framer Motion for hero sequences and choreographed multi-element entrances.

How do I support prefers-reduced-motion in animations?▼

Detect the prefers-reduced-motion media query and replace motion with instant state changes plus subtle opacity fades. Keep all content visible, and disable scroll-scrubbing and pinned scroll effects entirely for users who request reduced motion.

Why do my web animations cause jank and layout shifts?▼

Jank usually comes from animating layout properties like width, height, top, or left instead of transform and opacity. Also avoid measuring layout every frame, heavy blurs on large areas, and many simultaneous animated shadows; batch scroll reads and writes with a library.

Related Skills

Explore More Design & Creative Skills→
180VRisLife180VRisLife

dsg-bolder

Identify design weaknesses and propose bold, coherent interventions with a hero moment and risk budget.

Community
Advanced
beelabstudiobeelabstudio

improve-animations

Audits codebase animation code and writes self-contained implementation plans for motion fixes.

Official
Advanced
IFIR649IFIR649

visual-design-foundations

Build cohesive visual design systems with typography, color, spacing, and iconography tokens.

Community
Advanced
oakossoakoss
14

css-animation-patterns

Provide CSS animation patterns for keyframes, scroll-driven effects, and view transitions.

Official
Intermediate