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.

主な機能

01Optimized Lottie asset implementation for non-interactive sequences

021 GitHub stars

03Standardized timing guidelines for consistent UX motion across components

04Rive state machine integration for interactive, low-overhead animations

05Declarative micro-interactions using the flutter_animate package

06Pre-configured patterns for Hero transitions and implicit animations

ユースケース

01Optimizing mobile app performance by replacing heavy GIFs/videos with high-performance vector runtimes

02Improving application polish through consistent micro-interaction timing and page transitions

03Building complex, interactive UI components with state-driven vector animations

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add antoineschaller/cortex-skills flutter-animations

For use in Claude.ai and ChatGPT

Download Skill