A split-line reveal that runs on page load. Each line of the headline is masked inside its own container, then slides up from below with a short delay between lines.
When the page loads, the headline is invisible. Each line rises into view from behind a clip, one after another, with a 0.15s stagger. The motion uses a power4.out ease — fast at the start, gentle at the end — which gives the text a confident, editorial feel. Typical duration per line is 1 second; total reveal for a three-line headline is roughly 1.3 seconds.
A combined fade-and-scale entrance for the primary hero visual. The image starts slightly zoomed in and softly fades into place.
On load, the hero image fades from 0 to 100 percent opacity while scaling from 1.05 down to 1.0 over 1.2 seconds with a power3.out ease. The effect is subtle, the viewer mostly registers it as the image 'settling' into frame, but it removes the sense of a static image appearing instantly.
The most common scroll-triggered entrance. Elements start below their final position and invisible, then drift upward into place as they enter the viewport.
As the user scrolls and the element crosses the viewport threshold, it fades in and slides up over roughly 0.8 seconds using a power3.out ease.
A directional scroll entrance. The element starts a little left of its final position and invisible, then slides rightward into place.
Triggers on scroll. The element fades in while translating the distance from left to right over with a power3.out ease.
The mirror of fade-left. The element starts a little right and invisible, then slides leftward into its final position.
Triggers on scroll. The element fades in while translating from right to left over ~0.8 seconds with a power3.out ease.
A masked reveal where the image is hidden behind a clip-path and is progressively uncovered. Direction is configurable; the default sweeps from left to right.
Appears while scrolling. The clip-path animates from inset(0 100% 0 0) to inset(0 0 0 0) over 1.2 seconds with a power4.inOut ease, revealing the image as if a curtain were being drawn across it. More visually striking than a fade — useful for feature photography and anchor images you want the viewer to notice.
A container-level animation that animates each direct child element in sequence. Each element fades up (40px) with a short delay between them.
Triggers on scroll. Each child element fades in and slides up 40 pixels with a 0.08-second stagger between elements. Creates a cascading, rhythmic feel — especially effective on a grid of cards, a list of bullet points, or a row of logos. Total duration scales with the number of children.
Shows all the animations working combined on the live page
A split-line reveal that runs on page load. Each line of the headline is masked inside its own container, then slides up from below with a short delay between lines.
When the page loads, the headline is invisible. Each line rises into view from behind a clip, one after another, with a 0.15s stagger. The motion uses a power4.out ease — fast at the start, gentle at the end — which gives the text a confident, editorial feel. Typical duration per line is 1 second; total reveal for a three-line headline is roughly 1.3 seconds.
