motion-gravity

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

Preview

Import

import 'motion-components/motion-gravity'   // just this one
import 'motion-components'               // or the whole library

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.

<motion-gravity>GRAVITY</motion-gravity>

Dynamic content

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

const el = document.querySelector('motion-gravity')
el.text = 'UPDATED'   // animation restarts

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.

<motion-gravity height="20">SHORT DROP</motion-gravity>
<motion-gravity height="120">LONG DROP</motion-gravity>

Interval

interval is the delay in seconds between each character landing. Use a small value for a fast cascade and a larger one for a slow reveal.

<motion-gravity interval="0.02">FAST CASCADE</motion-gravity>
<motion-gravity interval="0.15">SLOW REVEAL</motion-gravity>

Delay

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

<motion-gravity delay="0">FIRST</motion-gravity>
<motion-gravity delay="0.5">SECOND</motion-gravity>

Trigger

By default the letters drop as soon as the element renders. Set trigger="view" for text further down the page. The text stays hidden and drops the first time half of it is in view. Under reduced motion it shows at once.

<motion-gravity trigger="view">DROPS ON SCROLL</motion-gravity>

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 then springs them back to their natural position, tuned with duration and bounce. Each character starts interval seconds after the previous one, after an optional delay.

Properties

JavaScript API

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

Accessibility

Screen readers read the whole text once from a visually hidden copy. The animated letters are hidden from them. When prefers-reduced-motion is set, characters render immediately in their final position with no animation.