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