Popmotion — Functional Animation Library for JavaScript

Introduction

Popmotion is a functional, flexible animation library that provides low-level animation primitives such as tweens, springs, decay, and keyframes. It serves as the animation engine behind Framer Motion and can drive any numerical value with physics-based or timing-based interpolation.

What Popmotion Does

• Provides spring, tween, decay, and keyframe animation primitives
• Drives any numerical value, color, or complex value string
• Supports pointer tracking for gesture-driven interactions
• Offers composable animation pipelines via functional utilities
• Works in any JavaScript environment including Node.js and browsers

Architecture Overview

Popmotion uses a frame-synced animation loop built on requestAnimationFrame. Each animation type (spring, tween, decay) is a pure function that takes a configuration object and returns a playback controller. The library separates value interpolation from side effects, letting you pipe animated values through transformers like clamp, snap, and interpolate before applying them to the DOM or any other target.

Self-Hosting & Configuration

• Install via npm and import individual functions for tree-shaking
• Use the animate function for the highest-level API
• Combine with Framer Motion for declarative React animations
• Configure spring stiffness, damping, and mass for realistic physics
• Set type: 'spring' or type: 'keyframes' to switch animation models

Key Features

• Physics-based spring animations with configurable parameters
• Tiny footprint with full tree-shaking support
• Framework-agnostic with no DOM dependency
• Composable value pipelines with functional transformers
• Velocity-aware transitions for seamless gesture handoff

Comparison with Similar Tools

• GSAP — timeline-centric with rich plugin ecosystem; Popmotion is functional and lower-level
• Anime.js — declarative syntax focused on DOM; Popmotion animates any value functionally
• Framer Motion — built on Popmotion but adds React-specific declarative API
• React Spring — similar physics model but React-only; Popmotion is framework-agnostic

FAQ

Q: Is Popmotion the same as Framer Motion? A: No. Popmotion is the underlying animation engine. Framer Motion is a React library built on top of it with a declarative component API.

Q: Can I use Popmotion with Vue or Svelte? A: Yes. Popmotion is framework-agnostic and works in any JavaScript environment.

Q: Does Popmotion handle CSS transforms? A: It animates raw values. You apply them to CSS transforms via the onUpdate callback.

Q: How does the spring animation work? A: It uses a damped harmonic oscillator model with configurable stiffness, damping, and mass.

Sources

• https://github.com/Popmotion/popmotion
• https://popmotion.io