animations

What problem does it solve?

This Skill addresses common pitfalls in UI animation implementation, ensuring animations are visually contained, performant, and adhere to best practices for timing and transitions.

Core Features & Use Cases

• Containment Enforcement: Prevents animated content from overflowing parent views using .compositingGroup().clipped().
• Modifier Order Guidance: Ensures animations are applied correctly after layout and transformations.
• Performance Optimization: Recommends GPU-accelerated transforms over layout-driven animations.
• Timing and Transitions: Provides guidelines for appropriate timing curves and safe transition application.
• Use Case: When implementing a card-based UI where cards animate in or out, this skill ensures the animations do not break out of the card's bounds, maintaining a clean and professional look.

Quick Start

Apply containment modifiers to ensure animated content does not overflow its parent container.