Motion is built on native browser APIs for a tiny filesize and superfast performance. It uses hardware acceleration for smooth and eco-friendly animations. Previously Framer Motion.
Stories
Motion – When a Single Line of Code Creates Seamless Motion
In 2022, Matt Perry, a developer at Framer, asked himself:
💡 "Why is creating animations on the web so complicated?"
- Existing JavaScript libraries were bulky and difficult to use.
- CSS animations were too limited for complex interactions.
- GSAP was powerful but often overkill for simple animations.
So, Motion was born—a lightweight yet powerful animation library that enables developers to create smooth motion with just a single line of code.
From a Simple Idea to a Game-Changing Library
Unlike other animation libraries, Motion leverages modern browser capabilities for optimal performance.
✅ Ultra-lightweight – Only 3.9KB, smaller than most libraries.
✅ Easy to use – Just call animate() to get started.
✅ Powered by Web Animations API – More efficient and smoother than raw JavaScript.
✅ Supports timelines, spring physics, keyframes – Features previously exclusive to large libraries like GSAP.
✅ Easy to use – Just call animate() to get started.
✅ Powered by Web Animations API – More efficient and smoother than raw JavaScript.
✅ Supports timelines, spring physics, keyframes – Features previously exclusive to large libraries like GSAP.
With Motion, web animations have never been this effortless!
What Makes Motion Special?
🎯 No Dependencies, No Overhead
Just import a small file, and you're good to go—no heavy installations required.
⚡ Optimized Performance
Built on Web Animations API, allowing the browser to handle animations smoothly while conserving CPU and GPU resources.
💡 Easy to Learn, Easy to Master
You don’t need to be an animation expert—just one line of code:
import { animate } from "motion";
animate(".box", { x: 100, opacity: 1 }, { duration: 0.5 });
animate(".box", { x: 100, opacity: 1 }, { duration: 0.5 });
And you’ve got a stunning animation!
🚀 Seamless Integration with React, Vue, and Svelte
Motion works flawlessly with all major frontend frameworks, making it easy to add animations to your projects.
The Future of Motion – Making Motion an Essential Part of the Web
As the web continues to evolve, animations are no longer just decorative—they play a crucial role in creating intuitive user experiences.
Motion represents a new era in web animations—faster, lighter, and easier than ever before.
👉 Explore it now at motion.dev and bring your designs to life with smooth motion! 🚀
Comment