Does it support RTL (Right-to-Left) layouts?

Yes, the skill includes specific RTL-aware presets like slideInRight and staggerItemRight designed to provide natural motion for Hebrew and Arabic interfaces.

How are exit animations handled?

The skill provides mandatory implementation patterns for AnimatePresence to ensure conditional components exit smoothly before being removed from the DOM.

What animation library does this skill use?

It utilizes Framer Motion (specifically the motion/react package) for declarative, high-performance animations in React 19.

Why use centralized presets instead of inline animations?

Centralized presets ensure UI consistency across the entire application, simplify maintenance, and prevent performance issues associated with non-hardware-accelerated properties.

Is this skill optimized for performance?

Yes, it prioritizes hardware-accelerated transforms (opacity and transform) over layout-heavy properties to maintain a 60fps target.

Motion Animation Patterns

Name: Motion Animation Patterns
Author: yonatangross

byyonatangross

•

设计工具

Implements high-performance Framer Motion animations and RTL-aware transitions in React 19 applications using centralized presets.

This skill provides a comprehensive library of production-ready Framer Motion patterns for React 19, focusing on consistent UI/UX through centralized animation presets. It addresses complex motion challenges like RTL-aware slide transitions (supporting Hebrew and Arabic), stagger effects for dynamic lists, and smooth page transitions using AnimatePresence. Designed for performance and maintainability, it eliminates inline animation anti-patterns and ensures hardware-accelerated transforms for 60fps interactions across modals, cards, and loading states.

主要功能

01Robust page transition and modal entrance/exit patterns using AnimatePresence

02Performance-first approach utilizing hardware-accelerated transforms and skeleton pulses

03RTL-aware transition patterns optimized for Hebrew and Arabic interfaces

0469 GitHub stars

05Centralized animation preset library for consistent UI motion language

06Optimized stagger effects for dynamic list items and grid layouts

使用场景

01Creating interactive micro-interactions like hover lifts, button presses, and skeleton loaders

02Implementing accessible modal and drawer animations with proper exit handling

03Adding smooth page transitions and navigation effects to React single-page applications

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add yonatangross/orchestkit motion-animation-patterns

For use in Claude.ai and ChatGPT

Download Skill