Can I animate elements when they are removed from the DOM?

Yes, the skill includes a Motion Presence utility that uses AnimatePresence to handle exit animations seamlessly when components unmount.

How do I handle complex sequences of animations?

This skill utilizes Variants, which allow you to define declarative animation states (like 'hidden' and 'visible') that can be orchestrated across parent and child components.

Does this skill support the Next.js App Router?

Yes, all components are optimized for React 19 and the Next.js App Router, utilizing the 'use client' directive to handle client-side animation logic.

What is the difference between Spring and Tween animations in this skill?

Spring animations are physics-based for a natural, bouncy feel (perfect for scale and movement), while Tween animations are duration-based for precise timing (best for opacity).

Motion Animation System

Name: Motion Animation System
Author: mattwoodco

bymattwoodco

•

设计工具

Implements production-grade animations and interactive transitions using Framer Motion for React and Next.js applications.

The Motion skill empowers developers to quickly integrate high-performance animations into Next.js projects using the industry-standard Framer Motion library. It provides a comprehensive suite of pre-configured components for scroll-triggered reveals, staggered list animations, delightful button microinteractions, and seamless page transitions. By automating the setup of complex layout groups and exit animations, it ensures a polished user experience while maintaining best practices for the Next.js App Router and React 19.

主要功能

01Declarative animation variants for complex UI states

023 GitHub stars

03Interactive microinteractions for buttons and gestures

04Scroll-triggered reveal components with physics-based springs

05Shared element transitions and exit animations using AnimatePresence

06Staggered orchestration for list and grid items

使用场景

01Creating smooth, scroll-based entrance animations for landing pages

02Orchestrating complex page and layout transitions in Next.js App Router

03Implementing delightful hover and tap states for interactive UI components

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add mattwoodco/skills motion

For use in Claude.ai and ChatGPT

Download Skill