Need help with popmotion?
Click the “chat” button below for chat support from the developer who created it, or find similar developers for support.

About the developer

Popmotion
18.0K Stars 654 Forks 2.9K Commits 22 Opened issues

Description

Simple animation libraries for delightful user interfaces

Services available

!
?

Need anything else?

Contributors list

No Data

Popmotion

The animator's toolbox

npm version npm downloads Twitter Follow

Popmotion is: - Powerful: It supports keyframe and spring animations for numbers, colors and complex strings. - Low level: It's designed to be composable and portable into any JavaScript environment, with an eye on worklets in the future. - Stable: It's written in TypeScript and enjoys over 95% test coverage. - Tiny:

animate
is just ~4.5kb, and every function is individually importable.

Quick start

npm install popmotion
import { animate } from "popmotion"

animate({ from: 0, to: 100, onUpdate: latest => console.log(latest) })

Animation

animate

animate
performs a keyframes or spring animation.
import { animate } from "popmotion"

animate({ from: 0, to: 100, onUpdate: latest => console.log(latest) })

It can animate numbers:

animate({ from: 0, to: 100 })

Or strings of the same type:

animate({ from: "0px", to: "100px" })
animate({ from: "#fff", to: "#000" })

The strings can be pretty complex, for instance box shadows or SVG path definitions. The only limitation is that the numbers and colors contained within must be in the same order:

animate({
  from: "0px 0px 0px rgba(0, 0, 0, 0)",
  to: "10px 10px 0px rgba(0, 0, 0, 0.2)"
})

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.