popmotion

What is popmotion?

Popmotion is a functional, reactive JavaScript motion library that allows developers to create animations and handle gestures with ease. It provides a powerful API to animate values, handle user input, and define complex animations using simple building blocks.

What are popmotion's main functionalities?

Animation

This feature allows you to animate values from a starting point to an end point. The 'onUpdate' function is called with the latest value as the animation progresses.

import { animate } from 'popmotion';

animate({
  from: 0,
  to: 100,
  onUpdate: latest => console.log(latest)
});

Gestures

This feature handles gesture physics, such as momentum and deceleration, allowing for smooth animations that feel natural. The 'modifyTarget' function can adjust the ending value dynamically.

import { inertia } from 'popmotion';

const { stop } = inertia({
  from: 0,
  velocity: 10,
  power: 0.8,
  timeConstant: 700,
  modifyTarget: target => Math.round(target / 100) * 100,
  onComplete: () => console.log('Animation complete')
});

Pose

This feature allows you to create draggable elements that can be thrown and will return to a specified position. It combines multiple functionalities like pointer tracking and spring physics for realistic motion.

import { styler, spring, listen, pointer, value } from 'popmotion';

const ball = document.querySelector('.ball');
const divStyler = styler(ball);
const ballXY = value({ x: 0, y: 0 }, divStyler.set);

listen(ball, 'mousedown touchstart').start((e) => {
  e.preventDefault();
  pointer(ballXY.get()).start(ballXY);
});

listen(document, 'mouseup touchend').start(() => {
  spring({
    from: ballXY.get(),
    velocity: ballXY.getVelocity(),
    to: { x: 0, y: 0 },
    stiffness: 200,
    damping: 10
  }).start(ballXY);
});

Other packages similar to popmotion

framer-motion

Framer Motion is a popular animation library for React. It offers more integrated React component features compared to Popmotion, which is more low-level and functional.

gsap

GSAP (GreenSock Animation Platform) is a robust animation library that is often considered the industry standard for web animations. It offers a wider range of animation utilities and effects compared to Popmotion, but it is not as lightweight.

animejs

Anime.js is another animation library that provides similar functionalities to Popmotion. It is known for its simple API and lightweight nature, making it a good alternative for those who find Popmotion's functional approach challenging.

README

Popmotion

Anything in, anywhere out

Popmotion is a 12kb JavaScript UX framework. Use it for for animation, physics, and input tracking. In the browser, on Node, anywhere.

Download | API | Guides | Twitter

Flexible

• Native DOM support: CSS and DOM attribute support, out the box.
• Unlimited: Custom callbacks allow you output to any numerical property.
• Power anything: Use with jQuery, Canvas, Three.js, WebSockets, etc.
• Seamless interaction: Tracks velocity for hand-off between input, animation and physics.
• Node support: Run on a server or an Arduino 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 simulators.
• Input: Create custom Input interfaces for Oculus/Leap/anything.
• Value routes: Extend our CSS/Attr support with routes for Canvas, Three.js, Google Map Symbols or any standardised numerical property.
• Value types: Automatically split special values in child values (ie "#000" -> { Red: 0, Green: 0, Blue: 0, Alpha: 1 }.

Peformant

• Uses and exposes a single requestAnimationFrame thread that automatically winds down when not in use.
• Never reads the DOM, leaving you in total control of performance.
• Over 20% smaller than Velocity.js, 72% smaller than GreenSock TweenMax. Boom shak shakalaka.

Get started

Popmotion vs Velocity.js vs Greensock feature comparison