What are the recommended timings for button animations?

According to the guidelines, micro-interactions like button presses or toggles should typically last between 50ms and 150ms for optimal responsiveness.

Can I use this for page transitions?

Yes, the skill includes specific implementation patterns for Hero animations and page transitions with recommended durations of 300ms to 600ms.

Does it support standard Flutter implicit animations?

Yes, it provides code snippets and best practices for using built-in widgets like AnimatedContainer and AnimatedOpacity for simple property changes.

Why does this skill prioritize Rive over Lottie?

Rive is prioritized because it allows for interactive, state-machine driven animations that are highly performant (60fps) and offer smaller file sizes compared to traditional formats.

Flutter Animations (Rive-First)

Name: Flutter Animations (Rive-First)
Author: antoineschaller

byantoineschaller

•

Mobile Development

Implements high-performance Flutter animations using a Rive-first approach, Lottie, and standardized motion guidelines.

소개

This skill provides a comprehensive framework for integrating professional motion design into Flutter applications. It prioritizes a Rive-first workflow for interactive, 60fps state-machine animations, while offering robust patterns for Lottie assets and quick micro-interactions via flutter_animate. By providing specific timing guidelines for different interaction types and standardized implementation patterns for Hero and implicit animations, it enables developers to create polished, high-performance user interfaces that feel responsive and modern.

주요 기능

Optimized Lottie asset implementation for non-interactive sequences
1 GitHub stars
Standardized timing guidelines for consistent UX motion across components
Rive state machine integration for interactive, low-overhead animations
Declarative micro-interactions using the flutter_animate package
Pre-configured patterns for Hero transitions and implicit animations

사용 사례

Optimizing mobile app performance by replacing heavy GIFs/videos with high-performance vector runtimes
Improving application polish through consistent micro-interaction timing and page transitions
Building complex, interactive UI components with state-driven vector animations

소개

주요 기능

Optimized Lottie asset implementation for non-interactive sequences
1 GitHub stars
Standardized timing guidelines for consistent UX motion across components
Rive state machine integration for interactive, low-overhead animations
Declarative micro-interactions using the flutter_animate package
Pre-configured patterns for Hero transitions and implicit animations

사용 사례

Optimizing mobile app performance by replacing heavy GIFs/videos with high-performance vector runtimes
Improving application polish through consistent micro-interaction timing and page transitions
Building complex, interactive UI components with state-driven vector animations