motiondivision/motion

Motion is an open-source animation library for JavaScript, React, and Vue that makes it easy to add smooth, production-quality animations to web interfaces. It solves the challenge of creating complex animations, like elements sliding in on scroll, springs that mimic physical bounce, or layout changes that transition gracefully, without having to manually calculate keyframes or manage timing code. The library works by providing a simple API where you describe what you want an element to animate to rather than writing step-by-step animation code. For React, you replace a normal HTML tag with a special motion version of it and add an animate property. For plain JavaScript, you call an animate function with a CSS selector and the target values. The library then handles the timing, easing, and interpolation behind the scenes. It combines JavaScript-level control with native browser APIs and GPU-accelerated paths to achieve smooth 120fps animations. The library ships with a hybrid rendering engine, gesture support for hover and tap interactions, spring physics, scroll-linked effects where animations tie to scroll position, and timeline sequencing to coordinate multiple animations. It also supports layout animations, which automatically handle situations where elements move or resize due to DOM changes. You would use Motion when building a website or app where visual transitions and interactions matter, such as a marketing site with scroll-triggered reveals, a dashboard with animated charts, or a mobile-style navigation with smooth enter and exit animations. The tech stack is TypeScript, published as the npm package named motion. It works with React, Vue, and vanilla JavaScript, and supports modern browsers. There is also a paid Motion+ tier for premium examples, tutorials, and additional APIs.