GravityJS

Physics-driven scroll-triggered animations scroll down to see them!

Trigger variants: viewport · half · previous · custom · progress · easing · bounce · spring
Adjust the Physics Variables panel, then click Apply & Reset to replay all animations with new values.

Viewport Trigger

Animates when the element enters the viewport.

data-gravity-scroll-trigger="viewport"

Half Trigger

Animates when the element is 50 % into the viewport.

data-gravity-scroll-trigger="half"

Previous Trigger

Animates when the previous sibling is fully visible.

data-gravity-scroll-trigger="previous"

Custom Trigger

Animates when 100 px from the viewport top (custom offset).

data-gravity-scroll-trigger="custom" data-gravity-scroll-offset="100"

Progress Trigger

Continuously tracks scroll progress parallax-style.

data-gravity-scroll-trigger="progress"

Easing Trigger

Overdamped spring smooth, no overshoot.

data-gravity-scroll-trigger="easing"

Bounce Trigger

Underdamped spring playful overshoot then settle.

data-gravity-scroll-trigger="bounce"

Spring Trigger

Highly underdamped oscillates like jelly.

data-gravity-scroll-trigger="spring" data-gravity-scroll-material="jelly"

Advanced Example

Both-axis movement · strength 0.8 · rubber material · motion blur.

data-gravity-scroll-trigger="viewport"
data-gravity-scroll-direction="both"
data-gravity-scroll-strength="0.8"
data-gravity-scroll-material="rubber"
data-gravity-motion-blur