Animation & Motion Design

Create Flutter animations with AnimationController, Tween, Rive, and Lottie.

1|Updated Mar 9, 2026
One-click install
npx skills add https://github.com/vertivolatam/monorepo --skill animation-motion-design
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: Animation & Motion Design
Source: https://github.com/vertivolatam/monorepo/tree/main/skills/flutter/animation-motion
Command: npx skills add https://github.com/vertivolatam/monorepo --skill animation-motion-design

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires lottie, rive, animated_text_kit, shimmer, and includes scripts (resource) and references (resource) and assets (resource) components.

What problem does it solve?

This Skill addresses the challenge of creating engaging and dynamic user interfaces in Flutter by providing tools and examples for implementing various animation and motion design techniques.

Core Features & Use Cases

  • Implicit & Explicit Animations: Easily add fade, scale, slide, and custom animations using AnimatedContainer, AnimatedOpacity, AnimationController, and Tween.
  • Advanced Libraries: Integrate Rive and Lottie animations for complex, pre-designed motion graphics.
  • Transitions: Implement smooth Hero animations and custom page transitions for a polished user experience.
  • Use Case: Enhance user onboarding with animated sequences, provide visual feedback on user interactions, or create captivating loading states.

Quick Start

Implement animations with Rive and Lottie.

Frequently Asked Questions about Animation & Motion Design

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I add Lottie and Rive animations to my Flutter UI?

To add Lottie and Rive animations to a Flutter UI, you integrate their respective libraries to render complex, pre-designed motion graphics directly within your application widgets. This provides advanced visual feedback and animated onboarding sequences.

What is the best way to create custom page transitions and Hero animations in Flutter?

The best way to create custom page transitions and Hero animations in Flutter is by utilizing explicit animation techniques with AnimationController and Tween. This approach ensures smooth, polished transitions between screens for an improved user experience.

How do I use AnimationController and Tween for explicit animations in Flutter?

You use AnimationController and Tween in Flutter to build explicit animations by defining the start and end values, then driving the animation timeline manually. This enables precise control over dynamic UI components like slide and scale effects.

Can I use implicit animations like AnimatedContainer and AnimatedOpacity for Flutter loading states?

Yes, you can use implicit animations like AnimatedContainer and AnimatedOpacity to build captivating Flutter loading states. They automatically handle transitions when underlying widget properties change, requiring less boilerplate than explicit controllers.

Do I need Rive or Lottie dependencies to implement micro-interactions in my Flutter app?

You do not need Rive or Lottie dependencies to implement micro-interactions in your Flutter app. You can easily add visual feedback and interactive UI elements using implicit animations like AnimatedOpacity and explicit Tween sequences.