About

Vanilla Motion is a collection of UI animation case studies inspired by real projects and rebuilt from scratch.

Every example includes working code and a written case study covering the decisions behind it. Why this easing? Why this timing? What changed along the way? Most examples are built with plain HTML, CSS, and TypeScript. When an animation genuinely benefits from a library, you'll see GSAP or Motion, but vanilla always comes first.

The "Vanilla" in Vanilla Motion is about keeping the implementation as close to the platform as possible. The goal is to understand the animation itself, not a framework or library. Every example is written to be easy to read, experiment with, and rebuild.

Once you understand the implementation, you can adapt it to React, Vue, Webflow, or whatever stack you use. You can also hand the source code to an AI assistant and ask it to convert the implementation into your framework of choice.

Every tutorial includes a finished demo and complete source code. Many also include standalone snapshots for each stage of the implementation, so you can follow the animation from the first line of code to the final result.