Does this skill support RTL languages like Hebrew?

Yes, it includes specific presets like slideInRight and staggerItemRight designed for natural motion in RTL (Right-to-Left) user interfaces.

Is this compatible with the latest version of React?

Yes, the skill is specifically tailored for React 19 and uses the updated 'motion/react' package conventions.

Does it handle exit animations automatically?

The skill provides mandatory patterns for using AnimatePresence, which is required for Framer Motion to correctly animate components as they are removed from the DOM.

Why does the skill discourage inline animation values?

Centralizing animations in a dedicated library ensures design consistency, makes global changes easier, and prevents performance issues caused by unoptimized inline objects.

How does this skill ensure high-performance animations?

It enforces the use of hardware-accelerated properties like opacity and transform while discouraging layout-shifting properties that drop frame rates.

Motion Animation Patterns

Name: Motion Animation Patterns
Author: yonatangross

byyonatangross

•

디자인 도구

Implements standardized, high-performance Framer Motion animations for React applications using centralized presets and RTL-aware patterns.

소개

This skill provides a comprehensive framework for adding professional animations to React 19 applications using Framer Motion. It streamlines UI development by offering a library of pre-configured, RTL-aware presets for page transitions, modal entrances, staggered lists, and micro-interactions. By enforcing a centralized animation architecture, it ensures a consistent motion language across the entire codebase while optimizing for 60fps performance and accessibility through hardware-accelerated transforms.

주요 기능

RTL-aware animation patterns optimized for Hebrew and Arabic layouts
Standardized AnimatePresence implementation for smooth enter/exit states
Centralized animation preset library for maintainable UI motion
29 GitHub stars
Comprehensive micro-interaction presets for hover, tap, and loading states
Performance-first strategy targeting 60fps using transform-based transitions

사용 사례

Implementing smooth, hardware-accelerated page transitions between React routes
Creating staggered loading sequences for data-heavy lists and grid layouts
Adding accessible modal and dialog entrance/exit animations with backdrop effects

소개

주요 기능

RTL-aware animation patterns optimized for Hebrew and Arabic layouts
Standardized AnimatePresence implementation for smooth enter/exit states
Centralized animation preset library for maintainable UI motion
29 GitHub stars
Comprehensive micro-interaction presets for hover, tap, and loading states
Performance-first strategy targeting 60fps using transform-based transitions

사용 사례

Implementing smooth, hardware-accelerated page transitions between React routes
Creating staggered loading sequences for data-heavy lists and grid layouts
Adding accessible modal and dialog entrance/exit animations with backdrop effects