Motion+

Notifications stack

A iOS inspired notifications stack using Motion's variants.

Time
5 min
Difficulty
Intermediate
Access
Motion+
>Live exampleOpen in new tab

Introduction

The Notifications stack example shows an iOS-inspired notification interface that expands and collapses with smooth spring animations. When collapsed, the notifications stack on top of each other with scaling and opacity effects. When opened, they spread apart to reveal all notifications individually.

This example uses two key APIs from Motion: the animate function to create spring-based animations, and the press function to handle click interactions. By organizing animation values into variant objects, we can easily animate between different states while keeping the code clean and maintainable.