v3.2.1 • Motion • 8kb gzipped • MIT
MotionEase
Physics-based micro-animations with a single call. Spring curves that feel right without a tuning session.
// why motionease
Springs, not keyframes
Describe where an element should end up and MotionEase works out how it gets there. No easing tables, no magic numbers copied from a blog post.
// stack
Composable
Every animation is a plain object you can inspect, pause and hand to another animation. Interrupt one mid-flight and it resolves cleanly.
MotionEase started as a single file in a client project and stayed small on purpose. It does one job, it does it in 8kb gzipped, and it has no runtime dependencies.
Getting started
Install it, import it, call it:
npm i motionease-jsDescribe where an element should end up and MotionEase works out how it gets there. No easing tables, no magic numbers copied from a blog post.
What it does not do
It does not manage your state, style your components or ship a plugin system. Those are your decisions, and keeping them out is what keeps the bundle honest.
- Interruptible by design
- Respects reduced motion
- MIT licensed, commercially friendly
Features
Interruptible by design
Retarget an animation mid-flight and velocity carries through. No snapping, no queued jank.
Respects reduced motion
Reads the user preference and falls back to an instant state change automatically.
ESM and types
Ships module and CommonJS builds with hand-written type definitions and source maps.
Sixty frames, measured
Performance is asserted in CI against a recorded trace, not assumed.
Compositor friendly
Animates transform and opacity only, so nothing triggers layout.
Fully controllable
Play, pause, reverse and seek, all from a plain object.
Get MotionEase v3.2.1
7 files • .min.js 8kb • .zip 89kb • sha384 verified
Changelog
- Velocity handoff between chained springs
- Fixed a leak when unmounting mid-animation
- Bundle down 1.2kb
- Fixed a memory leak on repeated teardown
- Source maps now published with every build
- Type definitions rewritten by hand
- Dropped the last runtime dependency
// related
Related products
ChartForge
Canvas charts in twelve lines. Responsive, accessible and dark-mode ready, with no D3 learning curve.
View →FormFlow
Validation and multi-step logic that works the same in React, Vue and vanilla. Your markup stays yours.
View →DataSync
Offline-first sync for IndexedDB with conflict resolution you can actually reason about.
View →Make it move today.
MIT licensed. Commercial friendly. Five-minute setup.