skills.rest
NalinDalal
NalinDalalCOMMUNITY
Explore all skills by this author →
Website𝕏@nalin82929GitHub

ask-motion

Implements UI animations with motion.dev springs, layout transitions, gestures, and scroll effects.

1|Updated Aug 17, 2026
Search Tags:#React#animation#page transitions#spring#framer-motion#animatepresence#motion.dev
One-click install
npx skills add https://github.com/NalinDalal/skillset --skill ask-motion-nalindalal
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: ask-motion
Source: https://github.com/NalinDalal/skillset/tree/main/skills/ui/ask-motion
Command: npx skills add https://github.com/NalinDalal/skillset --skill ask-motion-nalindalal

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires motion, framer-motion.

What problem does it solve? Adding consistent, accessible motion to React interfaces requires knowing the right motion.dev APIs, spring configurations, and reduced-motion handling, which developers often get wrong or implement inconsistently. ## Core Features & Use Cases - House-Style Motion Config: Provides non-negotiable spring presets for page transitions, modals, toasts, and tap feedback. - Full API Coverage: Includes patterns for AnimatePresence enter/exit, shared layout animations, drag drawers, scroll-linked transforms, stagger, useSpring, and LazyMotion bundle optimization. - Reduced Motion Support: Ships a mandatory useReducedMotion hook so animations respect accessibility preferences. - Use Case: When asked to add a page transition or an animated modal to a React app, the Skill produces working motion.dev code using the standardized spring config and AnimatePresence patterns. ## Quick Start Add a smooth enter and exit animation to this modal component using motion.dev with the house-style spring config.

Frequently Asked Questions about ask-motion

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

FAQPage Schema
How do I add page transitions in React with Framer Motion?▼

Wrap your routed content in AnimatePresence with mode="wait" and key the motion element by pathname. Apply initial, animate, and exit opacity/y values with a spring transition so outgoing pages animate out before new ones enter.

Framer Motion vs GSAP: which should I use for animations?▼

Use motion.dev (Framer Motion) for UI motion like page transitions, layout animations, gestures, and basic scroll effects. Use GSAP with ScrollTrigger for complex scroll scrubbing, timeline sequencing, SVG morphing, or canvas/WebGL work.

Why is my Framer Motion exit animation not playing?▼

Exit animations only run when the component is wrapped in AnimatePresence and unmounts while inside it. Use mode="wait" for sequential transitions and ensure each animated child has a stable unique key.

How do I respect prefers-reduced-motion in Framer Motion?▼

Use the useReducedMotion hook or a media query listener for prefers-reduced-motion, then swap spring transitions for zero-duration transitions when the user prefers reduced motion. This should be applied to every animated component.

How do I reduce Framer Motion bundle size?▼

Use LazyMotion with the domAnimation feature set and the m component instead of motion, which loads only DOM animation features at roughly 12kb. Heavy features can also be loaded asynchronously via a dynamic import.

Related Skills

Explore More Software Engineering Skills→
Hamza123545Hamza123545

framer-motion

Implement animations in React applications using motion components, variants, and gestures.

Community
Intermediate
shipiitshipiit

motion-design

Standardize UI motion with token-based easings, durations, and stagger patterns.

Official
Advanced
TekLabsVNTekLabsVN
1

animate

Orchestrate GSAP-powered animations across components, pages, or entire sites.

Official
Advanced
MengToMengTo
4.5k

cinematic-scroll-storytelling

Coordinate Lenis smooth scrolling with GSAP ScrollTrigger for scroll-driven landing page animations.

Community
Advanced