Sign Up for Free

RunKit +

Try any Node.js package right in your browser

This is a playground to test code. It runs a full Node.js environment and already has all of npm’s 1,000,000+ packages pre-installed, including anm with all npm packages installed. Try it out:

var anm = require("anm")

This service is provided by RunKit and is not affiliated with npm, Inc or the package authors.

anm v2.0.4

Page animations by mouse and touch moves

anm

Page animations by mouse and touch moves

Install

npm install --save anm

Usage

var anm = require('anm');

anm('.element')
  .x(15)
  .y(-15)
  .scale(10)
  .opacity(50);

API

anm(element)

Create animation

anm('.element')
anm(document.querySelector('.element'))

.set(prop, val)

Set transform factor

anm('.element').set('scale', 50);

or transform function

anm('.element').set('x', function(cursor) {
  return cursor.x * 0.5;
});

All factors set in percent of max value. Positive values set direct motion, negative - inverse (excluding opacity).

.opacity(val)

Set opacity

anm('.element').opacity(50);

.x(val)

Set horizontal movement

anm('.element').x(-15);

.y(val)

Set vertical movement

anm('.element').y(-15);

.scale(val)

Set rescaling

anm('.element').scale(75);

.rotate(val)

Set rotation

anm('.element').rotate(25);

anm.on()

Enable animations

anm.off()

Disable animations

anm.toggle()

Toggle enabled of animations

Support

  • Chrome
  • Safari
  • Firefox
  • Opera
  • IE 9+

License

MIT

Metadata

RunKit is a free, in-browser JavaScript dev environment for prototyping Node.js code, with every npm package installed. Sign up to share your code.
Sign Up for Free