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).