Notifications list
An example of animating a list of animations as they're added and removed, using Motion for JavaScript's animation capabilities. It implements manual FLIP animations so that notifications animate into their new layouts.
Introduction
The Notifications list example shows how to build an animated notification system where notifications can be added and removed with smooth animations. When notifications are added or removed, the remaining items animate smoothly into their new positions.
This example uses three key features from Motion:
- The
animatefunction for creating entry and exit animations - The
pressfunction for handling button interactions - Manual FLIP animations to smoothly transition notifications into their new layouts when the list changes
FLIP (First, Last, Invert, Play) is a technique where you measure element positions before and after a DOM change, then animate from the old position to the new one. This creates smooth layout animations that would otherwise feel jarring.