A functional, reactive motion library.

Get Started

Full API documentation

Popmotion does:

• Decay: Exponentially-decayed velocity for smooth deceleration.
• Keyframes: Define a series of keyframes to animate between.
• Pointer: Full support for mouse and multitouch inputs.
• Physics: Integrated, mutable simulation of velocity, acceleration, friction and springs.
• Spring: An accurate spring-mass system ported from Apple's CASpringAnimation.
• Tween: Change a value over specific duration of time. Full suite of easing functions.

Popmotion is:

• Tiny: At 6kb max, it's 85% smaller than GreenSock TweenMax. Everything is also individually importable.
• Reactive: Super-simple Rx-inspired API for subscribing to streams of animation events.
• Composable: All actions can be delayed, staggered merged, crossfaded and chained.
• Cross-platform: Runs on IE9+, plus Node-based environments like Arduino.
• Performant af: Batches jobs on the Framesync update render step. Stands up to popular alternatives in performance tests.
• Typesafe and tested: Written in TypeScript, with Flow definitions available on flow-typed. Full test coverage.
• Supported: Full ecosystem of awesome plugins.

Examples

TODO

Official plugins

TODO: Not yet compatible with Popmotion 8

Installation

npm install --save popmotion

In your javascript module:

import { tween } from 'popmotion';

Get Started

Full API documentation