Skip to content
animorio
IT

Library

492 animations

A live preview, readable code and a zip for each one.

Every animation has its live preview, readable code and a zip that runs on its own. Watch them in slow motion, pause them, step through them one frame at a time.

Here are all of Animorio’s animations, grouped by family. Each page shows the animation live and explains how it is made: the technique, the steps, the values you can change, what happens on a phone and with reduced motion, and the problems we ran into while building it. The code can be copied or downloaded as a zip that runs on its own.

The families, in short

Scroll
Animations that follow the scrolling of the page: sections that hold still, images that open up, headings that assemble as you scroll down.
Text
Letters and words that move: headings that come in, sentences that rebuild themselves, characters that react to the pointer.
Hover
What happens when the pointer passes over an element: light, distortion, magnets, reveals.
WebGL
Effects drawn by the graphics card with shaders: liquids, light, glass, distortion.
3D
Three-dimensional scenes and objects made with Three.js, to turn and explore.
Transitions
Moves from one page to the next, or between two states of the same page, without hard cuts.
SVG
Animated vector drawings: lines that draw themselves, shapes that change, filters that warp.
Images
Galleries and photos that open, slide, warp or reveal themselves.
Physics
Objects with weight: springs, bounces, falls, ropes and cloth computed on every frame.
Intro
Animated previews for logos: the logo arrives, a character makes a mess of it, then it heals. In the Playground you put in your own name or logo.
Backgrounds
Living page backgrounds to put behind a headline or a section: lines, curves, colours and shapes that move slowly and answer the pointer or the scroll, without getting in the way of reading.

Something missing?

Describe the animation you’re after, or send us a site to take apart. We pick the next ones from here.

What are you asking for?

Both is fine too.

It takes a minute.

What kind? optional

No email, no account: see the privacy policy.

Components468 interface pieces, animated and ready to copy: buttons, menus, calendars and many more.