Why are my Tailwind CSS transitions glitching with Motion?

Motion uses inline styles and hardware acceleration that conflict with CSS transitions. This skill provides the best practice of removing Tailwind transition classes when using Motion props.

Does this skill support the latest version of Next.js?

Yes, it includes specific implementation patterns for Next.js App Router and React 19, including the 'use client' wrapper pattern for Server Components.

Can I use Motion with Cloudflare Workers?

Yes, compatibility issues were resolved in December 2024. This skill provides the current verified installation and import methods for Wrangler environments.

How can I reduce the Motion bundle size?

The skill guides you through using LazyMotion to reduce the bundle to 4.6 KB, or the useAnimate hook for a minimal 2.3 KB footprint.

When should I use Motion vs. auto-animate?

Use Motion for complex gestures, scroll effects, and fine-grained control. For simple list reordering or entry/exit animations, auto-animate is recommended as it is significantly smaller (3.28 KB).

Motion Animation

Name: Motion Animation
Author: jezweb

byjezweb

•

디자인 도구

Creates sophisticated, hardware-accelerated React animations and gestures using the Motion library.

소개

This skill provides specialized guidance for implementing production-grade React animations using Motion (formerly Framer Motion). It assists developers in building complex UI interactions—including drag-and-drop, scroll-linked effects, layout transitions, and SVG path morphing—while optimizing for performance. By leveraging techniques like LazyMotion and useAnimate, it helps maintain small bundle sizes while ensuring compatibility with modern frameworks like Next.js 15, Vite, and Cloudflare Workers.

주요 기능

Pre-configured patterns for Next.js App Router and React 19 Server Components.
Declarative gestures including drag, hover, and tap with cross-device support.
Advanced bundle optimization using LazyMotion (4.6 KB) and useAnimate mini (2.3 KB).
Hardware-accelerated scroll-linked and viewport-triggered animations.
91 GitHub stars
Automatic layout transitions and shared element effects via the FLIP technique.

사용 사례

Creating high-performance scroll reveal effects and parallax headers for marketing sites.
Implementing seamless page transitions and shared element hero animations between routes.
Building interactive drag-and-drop interfaces like Kanban boards or sortable lists.

소개

주요 기능

Pre-configured patterns for Next.js App Router and React 19 Server Components.
Declarative gestures including drag, hover, and tap with cross-device support.
Advanced bundle optimization using LazyMotion (4.6 KB) and useAnimate mini (2.3 KB).
Hardware-accelerated scroll-linked and viewport-triggered animations.
91 GitHub stars
Automatic layout transitions and shared element effects via the FLIP technique.

사용 사례

Creating high-performance scroll reveal effects and parallax headers for marketing sites.
Implementing seamless page transitions and shared element hero animations between routes.
Building interactive drag-and-drop interfaces like Kanban boards or sortable lists.