Notifications stack

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.

Get started

Let's build the basic HTML structure for the notification stack. We need a container for the stack, a header with a title and close button, and three notification cards:

<div class="stack">
    <div class="header">
        <h2 class="header-title">Notifications</h2>
        <button class="header-close">Collapse</button>
    </div>
    <div class="notification" style="z-index: 3"></div>
    <div class="notification" style="z-index: 2"></div>
    <div class="notification" style="z-index: 1"></div>
</div>

<script>
    const N_NOTIFICATIONS = 3
    const NOTIFICATION_HEIGHT = 60
    const NOTIFICATION_WIDTH = 280
    const NOTIFICATION_GAP = 8

    // DOM elements
    const stack = document.querySelector(".stack")
    const header = document.querySelector(".header")
    const headerClose = document.querySelector(".header-close")
    const notifications = document.querySelectorAll(".notification")

    // State
    let isOpen = true
</script>

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

We've set up constants for the notification dimensions and spacing, selected all the DOM elements we'll need to animate, and created an isOpen state variable to track whether the stack is expanded or collapsed. The initial styles position the stack in its open state with the header visible above.