Flutter animation: Common animation patterns

Common animation patterns

Most UX or motion designers find that certain animation patterns are used repeatedly when designing a UI.

Animated list or grid

This pattern involves animating the addition or removal of elements from a list or grid.

Shared element transition

In this pattern, the user selects an element—often an image—from the page, and the UI animates the selected element to a new page with more detail.

You can easily implement shared element transitions between routes (pages) using the Hero widget.

Staggered animation

Staggered animation — Animations that are broken into smaller motions, where some of the motion is delayed.

The smaller animations might be sequential, or might partially or completely overlap.

Flutter animation: Common animation patterns — Structure map

Clickable & Draggable!

Flutter animation: Common animation patterns — Related pages: