Motion

Motion is an animation library for JavaScript and React. It animates elements with natural spring physics, links animations to scroll position and smoothly animates layout changes.

Strengths: what it’s good at

• Natural movement: springs instead of fixed durations make interactions feel responsive.
• Small and modern: builds on the browser’s own animation engine where possible, so animations stay smooth.
• Scroll and in-view: effects that start when an element appears or follow the scroll position.
• React integration: enter and exit animations and shared layout transitions with little code.

Principles: motion with a purpose

Animation should guide attention, explain a change or give feedback, never delay the user. Every animation I build respects the “reduce motion” setting, and anything that moves on its own can be paused.

Use: when I choose it

For interface animations, micro-interactions, scroll reveals and magnetic buttons in websites and apps. This site uses Motion for its scroll effects.