A repository of over 1000 quality jQuery plugins

jQuery Popmotion

Popmotion is a jQuery Animation & Effects plugin.

Created by Popmotion

The Javascript motion engine. Animation, physics and input tracking.

Not what you're looking for? Click here to view more Animation & Effects jQuery plugins

Popmotion

The JavaScript motion engine.

Create unique animations and interactions with tweens, physics and input tracking.

Popmotion is:

  • Tiny: At ~9kb, it's 75% smaller than GreenSock.
  • Fast: Stands up to popular alternatives in performance tests.
  • Compatible: Full browser support and preloaded with CSS, SVG and SVG path renderers.
  • Composable: Actions and output functions can be composed to create complex motion systems.
  • Advanced: Sophisticated tween and color blending for the smoothest possible motion.
  • Powerful: Discrete render step scheduling allows full control over each frame.

npm version npm downloads Twitter Follow

Slack

Examples

Full API documentation

Installation

npm

In your project root:

npm install --save popmotion

In your javascript module:

import { tween } from 'popmotion';

File include

Download popmotion.global.min.js from our GitHub repo and include it in your HTML document:

<script src="path/to/popmotion.global.min.js"></script>

Popmotion is then available as the global variable popmotion.

Quick start

Creating basic motion like tweens and physics in Popmotion is simple. For example, here's a simple tween that prints its output to the console:

import { tween } from 'popmotion';

tween({
  to: 100,
  onUpdate: (v) => console.log(v)
}).start();

To use that tween to move an actual DOM element, we can create a CSS renderer.

const ballRenderer = css(document.getElementById('ball'));

tween({
  to: 100,
  onUpdate: (v) => ballRenderer.set('x', v)
}).start();

Full API documentation



You might also like these other Animation & Effects jQuery Plugins