Motion Animation Library

Motion is a motion library for React and JavaScript that enables developers to declaratively animate elements using a component-based API. The library provides a motion component that accepts animation values as props, automatically handling transitions when those values change, without requiring manual animation lifecycle management. Spring physics are the default easing model, producing natural movement through configurable stiffness and damping parameters, while duration-based animations with custom cubic bezier curves are also available for precise timing control. Layout animations are a signature feature: when elements are added, removed, or repositioned in the DOM, the library automatically interpolates their position and size, creating smooth transitions that would otherwise require manual FLIP technique implementation. Shared layout animations allow a single element to visually transition between two different locations in the component tree, useful for expanding thumbnails into full-screen views. Gesture support includes drag with momentum and snap points, hover tracking, scroll-linked animations, and pinch-to-zoom, all exposed as component props without event listener boilerplate. The animate function works outside React for vanilla JavaScript, accepting selectors or element references and animating CSS properties, SVG attributes, or arbitrary JavaScript values. Performance optimizations include hardware acceleration via transform and opacity properties, frame-skipping prevention through delta clamping, and tree-shakeable imports that keep bundle size under twenty kilobytes for basic usage. Exit animations trigger when components unmount, handled through the AnimatePresence wrapper that defers removal until the animation completes. The library works with server-side rendering, TypeScript, and popular meta-frameworks including Next.js and Remix.