How can I optimize the bundle size?

Utilize the LazyMotion component to load features on-demand or use the useAnimate hook for a minimal 2.3 KB footprint.

Does Motion support Cloudflare Workers?

Yes, as of December 2024, build compatibility issues have been resolved and Motion works directly with Wrangler and Cloudflare environments.

Can I use this with Next.js App Router?

Yes, but you must use 'use client' directives or create a client-side wrapper as Motion components require browser-side APIs to function.

How does this differ from the auto-animate skill?

Use Motion for complex interactions, gestures, and custom physics. Use auto-animate for simple list transitions where a smaller bundle size is the priority.

Can I use Tailwind CSS with Motion?

Absolutely. Best practice is to use Tailwind for static styling and Motion for dynamic animations, ensuring you remove conflicting Tailwind transition classes.

React Motion Animations

Name: React Motion Animations
Author: flosrn

byflosrn

0•

디자인 도구

Implements high-performance, declarative React animations using the Motion library for sophisticated UI interactions and transitions.

The Motion skill empowers developers to build production-grade React animations using the industry-standard Motion (formerly Framer Motion) library. It provides expert guidance on implementing complex gestures like drag and tap, scroll-linked effects, and seamless layout transitions using the FLIP technique. Designed with performance in mind, it helps optimize bundle sizes through LazyMotion and ensures accessibility by respecting user motion preferences, making it ideal for everything from simple micro-interactions to complex, orchestrated page transitions in modern frameworks like Next.js and Vite.

주요 기능

01Performance optimization strategies including LazyMotion and useAnimate mini

020 GitHub stars

03Declarative gesture support for drag, hover, tap, and pan interactions

04Advanced scroll-linked and viewport-triggered animation patterns

05Built-in support for AnimatePresence exit transitions and SVG path morphing

06Seamless layout animations and shared element transitions via FLIP

사용 사례

01Implementing smooth modal transitions and animated navigation menus in Next.js

02Creating interactive drag-and-drop dashboards and sortable kanban boards

03Building immersive parallax hero sections and scroll-triggered reveal effects

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add flosrn/.claude motion

For use in Claude.ai and ChatGPT