What is Popmotion?

Popmotion is a lightweight 12kb JavaScript motion engine that makes creating engaging user interactions quick and simple.

It provides powerful actions like tweening, physics and user input tracking, and has inbuilt renderers for CSS and SVG, amongst others. New actions and renderers are easy to develop, making it extremely flexible.

Example syntax

1
2
3
tween({ values: { x: 200 } })
    .on(document.querySelector('div'))
    .start();

Features

  1. Tiny: Only 11.7kb gzipped/minified
  2. Tween: Stagger, timelines and cubic bezier easing
  3. Physics: Velocity, friction and spring simulations
  4. Input: Native mouse and touch support
  5. Renderers: CSS, DOM attribute, SVG and path drawing
  6. Open render loop: Frame-sync and schedule any task at discrete render steps
  7. Complex value types: Colors, path definitions and more
  8. Extendable: Add easing, inputs, actions and render adapters
  9. Plugins: Inertia, Scroll To, A-Frame and Three.js adapters