motion-gravity

Characters fall in from above with staggered spring-physics timing — each one bouncing to a rest at the baseline. An entrance animation built for hero text and section titles.

Preview

Import

Usage

Static content

Write the text as a child. The browser shows it as plain text before the element is defined, so the page never paints an empty gap while the library loads.

Dynamic content

Use the text attribute when text changes at runtime. Setting the property restarts the animation automatically.

If both are present, the attribute wins and the child text stays as the pre-upgrade fallback.

Height

height sets how far each character falls before landing. Larger values give a more dramatic entrance.

Stagger

stagger is the delay in seconds between each character landing. Tighten it for snappy cascades; spread it out for a slow reveal.

Delay

Use delay to hold the animation until after other elements have entered — useful when composing multiple animated elements.

How it works

Each character is wrapped in an inline-block span. On first render (and whenever text changes), all characters are set to opacity: 0 and translateY(-height). Motion One then animates them back to their natural position using a spring (stiffness: 380, damping: 22), staggered by the stagger interval, with an optional leading delay.

Properties

JavaScript API

Trigger the gravity programmatically with play() and cancel().

Accessibility

When prefers-reduced-motion is set, characters render immediately in their final position with no animation.