Try free in browserTry free
ExodeUI

EXODEUI DESKTOP

A little space for good ideas.

Choose your platform to get the official ExodeUI installer.

Download for macOSv7.4.9 · Apple Silicon (.dmg)Download for Windowsv7.4.5 · 64-bit (.exe)

Looking for Intel Mac or other builds? Explore the web studio or check all download options.

Prefer the browser? Open web studio →

JavaScript animation example

JavaScript Scroll Animation: Reveal-on-Scroll Timeline

Reveal-on-scroll is the most common scroll animation on the web, and a timeline shows it best. The vertical line draws itself to match scroll progress, each milestone's dot fills as the line reaches it, and its card slides in from alternating sides. Drag inside the demo to scroll.

  • 4.3 KB file
  • 4 live inputs
  • JavaScript runtime
Live, try it

How this scroll reveal timeline works

  • The line's length is tied directly to scroll position, so it moves exactly with the user.
  • Each card has a trigger point; once passed it eases in over 400 ms and stays revealed.
  • Scroll position can also be driven from your page with the scroll input.

Add it to your JavaScript app

Install exodeui-vanilla, download the file below, and paste this. The code updates as you customize. Other runtimes are in the other tabs.

import { ExodeUICanvas } from 'exodeui-vanilla';

// <canvas id="javascript-scroll-animation" style="width: 100%; height: 640px"></canvas>
const player = new ExodeUICanvas({
  element: '#javascript-scroll-animation',
  fit: 'Layout',
  onReady: (engine) => { },
});
player.load(await (await fetch('/javascript-scroll-animation.exode')).json());
player.play();

Inputs

InputTypeDefaultRange
milestonesTextFounded,First customer,Seed round,1.0 launch,10k users,Series A—
accentText#f43f5ehex colour
inkText#fafafahex colour
bgText#0a0a0ahex colour

More JavaScript animations

Segmented Ring SpinnerTwelve segments in a ring with a rotating bright head and fading tail: the classic activity spinner.Terminal Typing EffectA terminal that types commands with human rhythm, prints their output and loops through a script.Particle TextHundreds of particles that assemble into a word, scatter from the cursor and spring back.Curtain Wipe TransitionStaggered curtain panels sweep across, the page swaps underneath and the curtains pull away.Magnetic Confetti ButtonA button that leans toward the cursor like a magnet and bursts into spinning confetti on click.Blob Cursor LinksA blob cursor that stretches with speed and swells over links whose underlines draw in and out.

The same idea in other frameworks: React depth parallax scene · Flutter parallax scroll list · SwiftUI shimmer reveal text