Popmotion: A Free 12kb JavaScript Motion Library

Pure CSS animation has garnered much attention over the past few years – but similar advances have also been occurring with JavaScript development.

A brand new library named Popmotion is a fully-featured motion library. It contains effects for traditional UI animation, real-world physics simulations, and motion based on user input.

Popmotion is, in short, one hell of a motion library.

The file clocks in around 12kb and contains all the features you could ever need. Popmotion even includes a brief getting started guide for new developers. You’ll find everything from initial setup to running your first animation.

Also check out the Popmotion sandbox on codepen which is free for anyone to edit and toy around with. The official Popmotion CodePen profile also has other examples. worthy of consideration.

The library is fully extensible and includes many features:

  • Native DOM support: CSS, SVG, SVG path and DOM attribute support, out of the box.
  • Unlimited: Custom callbacks allow you output to any numerical property or API.
  • Power anything: Use with jQuery, Canvas, Three.js, WebSockets, etc.
  • Seamless interaction: Tracks velocity for hand-off between input, animation and physics.
  • Node support: Run on a server or an Arduino to fuel the IoT.
  • Open rAF loop: Run any Process on the core requestAnimationFrame loop.

Download a full copy of the Popmotion library on GitHub and get started with dynamic animations in your web projects.

Also you can stay up-to-date with the library’s official Twitter account @popmotionjs.

Popmotion animation library

Tags:
0 shares
Jake is a researcher and writer on many design & digital art websites. He frequently writes on topics including UX design, content marketing, and project management. You can find more work on his portfolio and follow his latest tweets @jakerocheleau.
Previous Post

New Git GUI Client open for Beta Invites

Next Post

Adobe Early Sign Up for Project Comet Release Info

Leave a Reply

Your email address will not be published. Required fields are marked *

Next Post

Adobe Early Sign Up for Project Comet Release Info