Popcorn is the Lodash of animation.

It contains utility functions to help animation and UI developers manipulate values over time and space.


  • Powerful interpolation: The powerful interpolate function can map a range of numbers onto another range of numbers, colors and complex strings.
  • Linear RGB mixing: Hex and RGB values are mixed as linear RGB, which avoids the usual brightness dips in many animation libraries. Learn more
  • Tiny: Import only what you need with ES6 imports.


Package managers

Popcorn is currently available as @popmotion/popcorn on npm.

npm install @popmotion/popcorn
yarn add @popmotion/popcorn

File download

Download or link to the latest version of Popcorn. All functions will be available on the popcorn global variable (e.g. popcorn.velocityPerSecond).

Hey! Did you find this article useful? Popmotion relies on contributions from the community to operate.