Notifications list

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 animate function for creating entry and exit animations
• The press function 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.

Get started

Let's start with the basic markup and styles for our notification system:

<div id="notifications">
    <ul id="notification-list"></ul>
    <button class="add" id="add-button">Add notification +</button>
</div>

<style>
    /** Copy styles from example source code */
</style>

The notification list is positioned at the bottom center of the screen, with pointer-events: none on the container so it doesn't block interactions, but pointer-events: all on the list items and buttons so they remain interactive.