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

The JavaScript motion engine.

Make it pop with animation, physics, and input tracking. In the browser, on Node, anywhere.

Free for personal and non-profit projects. Just $9/month for commercial use!

Download | Subscribe | 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 | Subscribe

Popmotion vs Velocity.js vs Greensock feature comparison