Micro-interactions

Tether

A popover that grows out of the corner nearest its trigger, and moves that origin when it flips.

Install

Props

What It Demonstrates

Pop in
Element appears with a slight overshoot, like it bounces into place.
Origin-aware animation
An element animates out of its trigger, like a popover growing from the button that opened it instead of from its own center which is the default in CSS.
Transform origin
The anchor point a scale or rotation grows or spins from.
Enter / Exit
The animation an element plays when it's added to or removed from the screen.
Spring
Motion driven by physics (tension, mass, damping) rather than a set duration.

Related Components

Appears In