● v2.0 · 60+ motion utilities · 0 dependencies

Motion that ships
in a class name.

Trigger and combine modern web animations with io- classes. The Tailwind way — but for motion. Scroll reveals, kinetic text and micro-interactions in one CSS file.

Get started See it move
<link rel="stylesheet" href="io.css">
🧩

Composable by design

Stack effects like utilities — io-fade io-slide-up io-blur — instead of choosing one baked animation. Any combination just works.

🎚️

Fully tunable

Duration, delay, easing and distance are separate classes you mix freely.

👁️

Scroll reveals

Elements animate in as they enter the viewport. ~3 KB of optional JS.

✍️

Kinetic text

Reveal headlines word-by-word or character-by-character, with stagger.

♿

Reduced-motion aware

Honors prefers-reduced-motion automatically.

Scroll-linked motion

These don't just trigger once — they track your scroll. The effect progresses as the element moves toward the centre of the screen. Scroll slowly to feel it.

Slides with scroll →
io-scrub io-fade io-slide-left
JSio.css + io.js
Colour shifts with scroll
io-scrub io-scrub-color
JSio.css + io.js
Zooms with scroll
io-scrub io-fade io-zoom-in
JSio.css + io.js
Sharpens with scroll
io-scrub io-fade io-blur io-slide-up
JSio.css + io.js
Underlines as you scroll
io-scrub io-scrub-underline
JSio.css + io.js
Letters pop up
io-scrub io-scrub-chars
JSio.css + io.js
Letters from right
io-scrub io-scrub-chars io-fade io-slide-left
JSio.css + io.js
Words drift in from left
io-scrub io-scrub-words io-fade io-slide-right
JSio.css + io.js
Colour fills letter by letter
io-scrub io-scrub-colorize · --io-color-from/--io-color-to
JSio.css + io.js
Rise & recolour
io-scrub io-scrub-chars io-scrub-colorize io-slide-up
JSio.css + io.js

Build your motion

Toggle classes, watch it play, copy the result. This is the whole library — composed live.

Effects · combine freely
Trigger · when it plays
Speed
Easing
Distance
Delay
io
plays on · io-reveal
Class string
io io-fade io-slide-up io-reveal
HTML snippet
<div class="io io-fade io-slide-up io-reveal">…</div>

Install in 30 seconds

CDN, npm, or a plain file. No build step required.

1 Always add the stylesheet — this powers every effect:
<link rel="stylesheet" href="io.css">
2 Only for effects marked JS (scroll, click, stagger, kinetic text, confetti) add:
<script src="io.js" defer></script>
CDN
cdn.jsdelivr.net/npm/io-motion
npm
npm install io-motion
Plain file
<link href="io.css">