Popmotion

The JavaScript motion engine.

Animate with tweens, physics, and input tracking. Natively supports CSS and SVG, with plugins for React, Three.js, and A-Frame.

Install | API | Guides | Twitter

Flexible

• Native DOM support: CSS, SVG, SVG path and DOM attribute support, out of the box.
• Unlimited: Custom callbacks allow you output to any numerical property or API.
• Power anything: Use with React, Canvas, Three.js, WebSockets, etc.
• Seamless interaction: Tracks velocity for hand-off between input, animation and physics.
• Node support: Run on any Node environment to fuel the IoT.
• Open rAF loop: Run any Process on the core requestAnimationFrame loop.

Extendable

Develop your own:

• Easing: Easing functions and bezier curves.
• Physics: Add new physics simulation methods.
• Input: Create custom Input interfaces for Oculus/Leap/anything.
• Roles: Extend our CSS/SVG/Attr support with routes for Canvas, Three.js, Google Map Symbols or any standardised numerical property.

Performant

• Uses and exposes a single requestAnimationFrame thread that automatically winds down when not in use.
• Never magically reads the DOM, leaving you in total control of performance.
• The same size as Velocity.js, over 66% smaller than GreenSock TweenMax.

####Get started