About

Animorio collects animations and interface components ready to use on websites: 492 animations, 468 components and 3 3D objects. Every piece has a live preview, the full code to copy, a zip that runs on its own and a Playground where you change values, colours and text and see the result straight away. It is all free.

The most beautiful animations live on award-winning websites, but they are hard to study: the code is minified, tangled with the rest of the site, and nobody explains the choices. Animorio does the opposite. Every motion lives in a folder that runs on its own, with readable, commented code and a page that tells how it is built and why.

The idea is that anyone who builds websites can take an animation, understand it and adapt it to their own project in a few minutes, instead of copying something they cannot change.

The library sorts animations by family: scroll, text, hover, SVG, transitions, physics, WebGL, 3D and images. Components are everyday interface pieces (buttons, menus, navigation bars, cards, form fields) with carefully crafted motion. Kits group them by kind of project.

Each piece’s Playground turns its “values to change” into knobs: durations, colours, distances, text. 3D objects download as web-ready models. For people who work with a coding assistant there is the connector for Claude, which searches the library and brings the code straight into the project.

For people who build websites: front-end developers, designers who write code, students who want to understand how an interface moves. You do not need to know GSAP or WebGL to use a piece; to understand it fully, its page is enough.

Every animation is designed and written from scratch: no templates, no code taken from others. We use standard web tools (GSAP, CSS, SVG, canvas and WebGL), and every piece is tested on a computer, on a phone and with reduced motion turned on, for people who prefer fewer animations.

On each page we explain what it does, how it works step by step, which values you can change and which problems we ran into while building it.

The same rules apply to every piece: the same animations on phones, with adapted sizes; with reduced motion no movement, only fades or the final state already in place; before publishing, a preview recorded from the real demo, from start to finish.

In “How it’s made” we take apart animated websites we love. We read their public code to understand how they are made, tell the story in an article and rebuild the best animations from scratch, with our own text, images and code. The articles are in English and Italian.

You can use the animations in your own projects and in your clients’ projects, including commercial ones; you cannot resell or redistribute them as they are. The details are in the license. GSAP, the library many animations rely on, has been free for commercial use too since 2025.

Previews, the code, the Playground and the journal are open to everyone, with no account. To download the zip, a free account is all you need.

Animorio is free and means to stay that way. To support it, some pages may show ads in the future, only in dedicated spaces between cards or articles, never full screen.

Behind Animorio is the Animorio team: a small group that designs, writes and tests every piece before publishing it, and picks the next ones partly from the requests of the people who use the site.

For questions, ideas or reports there is the Contact page. To ask for an animation you cannot find, or a site to take apart in the journal, there is the “Ask away” form.