skills.rest
brunoolf
brunoolfCOMMUNITY
Explore all skills by this author →
GitHub

motion-web

Implements web motion using modern CSS and Motion/Framer Motion without GSAP.

Updated Aug 12, 2026
Search Tags:#react#css#animation#framer-motion#view-transitions#scroll-driven#web motion
One-click install
npx skills add https://github.com/brunoolf/frontend-craft --skill motion-web-brunoolf
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: motion-web
Source: https://github.com/brunoolf/frontend-craft/tree/main/skills/motion-web
Command: npx skills add https://github.com/brunoolf/frontend-craft --skill motion-web-brunoolf

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Choosing and implementing the right animation technique for the web is hard: developers often reach for heavy libraries when native CSS would suffice, or misuse React animation patterns that break exits, layouts, and performance. This Skill provides a decision ladder and concrete implementation patterns for motion that fits the platform. ## Core Features & Use Cases - Tool selection ladder: Maps each need (hover, keyframes, enter/exit, layout shifts, gestures, scroll-linked effects, page transitions) to the cheapest tool that solves it, from CSS transitions up to GSAP. - Modern CSS patterns: Covers @starting-style, transition-behavior: allow-discrete, scroll-driven animations with view() and scroll() timelines, and the View Transitions API with fallbacks. - Motion/Framer Motion recipes: AnimatePresence enter/exit, layout and layoutId FLIP animations, springs for gestures, whileInView reveals, and useReducedMotion for accessibility. - Use Case: A React developer needs a modal that animates in and out cleanly, cards that reveal on scroll without JavaScript, and a shared-element transition between list and detail views — this Skill provides the exact code patterns and pitfalls for each. ## Quick Start Ask the agent to implement enter and exit animations for a React modal using Motion, with a scroll-driven reveal for the page cards in pure CSS.

Frequently Asked Questions about motion-web

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

FAQPage Schema
How do I animate element enter and exit in React?▼

Use AnimatePresence from Motion with a stable key and a motion component as its direct child, defining initial, animate, and exit props. Add mode="wait" when the exiting and entering elements should not overlap.

When should I use CSS animations instead of Framer Motion?▼

Use CSS transitions for hover, focus, and simple state changes, and @keyframes for loops and entrances without JavaScript. Escalate to Motion only for stateful enter/exit, layout shifts, or gestures, since each step up costs bundle size.

How do CSS scroll-driven animations work?▼

Scroll-driven animations bind an animation to a timeline via animation-timeline: view() for element visibility or scroll() for container progress, running off the main thread. Always ensure the no-support fallback shows the final visible state.

Why is my AnimatePresence exit animation not working?▼

Exit animations fail when the child lacks a stable key or when the motion component is not a direct child of AnimatePresence. Verify both conditions and confirm the exit prop is defined on the motion element.

How do I animate an element from display none in CSS?▼

Combine @starting-style with transition-behavior: allow-discrete so display and overlay can participate in the transition. The @starting-style block defines the pre-entry state for elements that just appeared.

When should I use GSAP instead of Motion or CSS?▼

Reach for GSAP when you need complex sequenced timelines, scroll pinning, or fine-grained orchestration that CSS scroll-driven animations and Motion cannot express. Simpler needs should stay on the lower-cost tools first.

Related Skills

Explore More Design & Creative Skills→
Objective-ArtsObjective-Arts

motion

Define motion design rules for digital interfaces using physical metaphors and choreography.

Official
Intermediate
wpsadiwpsadi

fixing-motion-performance

Audit and fix animation performance issues in web UIs.

Community
Advanced
gajjalaashok75-UIgajjalaashok75-UI
2

motion-choreography

Build coordinated GSAP motion sequences with timelines, scroll triggers, and spring easing.

Community
Advanced
davidbasilefilhodavidbasilefilho

animate

Plan and implement UI animations with accessible fallbacks and performance budgets.

Community
Intermediate