anim8js by ClickerMonkey

Examples

Each of the following examples show off one or more features of anim8js.

animate.css ScrollMagic easeljs pixi jquery movie parametrized animation reference travel sequence physics builder and defer unplay filters orbit move move direct and builder queue builder relative shadow spring spring builder text shadow transform parse transition transition before transition into smart transition smooth transition tween tween tester tween builder tween to cubic curve path hermite path linear path quadratic curve path quadratic curve corner path subset path tween path bezier path b-spline path catmull-rom spline path

This example shows using & to combine multiple animations into one.

anim8( window.box1 ).play( 'fadeIn & rubberBand, fadeOut & pulse !4');

This example shows using the Animator.unplay function which transitions to the starting values of a given animation.

anim8( window.box1 ).unplay( 'fadeIn', '2s >500ms /100' );

This example shows using parametrized animations to create procedurally generated animations.

anim8.save('headTo', {
  tweenTo: {
    translate: anim8
      .param('angle', 'number')
      .vectorDegrees() // convert angle to 2d vector
      .scale( anim8.param('distance', 'number') )
      .relative()
  }
});

var m8or = m8( window.box1 );

m8or.play('headTo angle=0 distance=100, headTo angle=-45 distance=50, headTo angle=90 distance=200');

m8or.queue('headTo', {
  parameters: {
    angle: -180,
    distance: 150
  }
});

This example shows using the Movie and MoviePlayer classes. You can setup any number of animation sequences with any number & type of subjects and you can play through the sequences at any speed and direction and jump to any point in the movie.

var mov = new anim8.Movie();
mov
  .setAutoEnd( true )
  .at( '1s' )
  .intro( window.box )
  .play( 'fadeIn' )
  .play( 'wiggle' )
  .play( 'bounceOut')
  .seek( '1s' )
  .play( 'zoomIn' )
  .play( 'tada' )

  .setAutoEnd( false )
  .at( '1s' )
  .intro( $( window.sequence ).sequence().get() )
  .sequence( '50ms' )
  .play( 'fadeInDown 2s' )
  .queue( 'zoomOut !2 ~1s 2s quad' )

  .at( '0s' )
  .with( window.box2 )
  .play( 'pathUpAndDown linear-yoyo inf' )
  .seek( '1.4s' )
  .transition( '1s >500 <100 /0', 'pathLeftAndRight x3 linear-yoyo' )
;

var ply = new anim8.MoviePlayer( mov );

ply.play();

This example shows using anim8js-easel to animate EaselJS objects.

var circle = new createjs.Graphics.Circle(0,0,30);
var shape = new createjs.Shape();
shape.graphics.beginFill("DeepSkyBlue").append(circle);
shape.x = 100;
shape.y = 100;

anim8( shape ).play({
  springs: {
    position: {
      type: 'linear',
      rest: Mouse,
      damping: 2.5,
      stiffness: -30
    }
  }
});

anim8( circle ).tween('radius', 30, 50, 'infinite quad-yoyo');

This example shows using anim8js-pixi to animate PixiJS objects.

var circle = new PIXI.Circle(0, 0, 30);
var tinter = {tint: anim8.Color.parse('#3333FF')};
var outliner = {lineWidth: 1, lineColor: 0xFFFFFF};
var graphics = new PIXI.Graphics();

anim8( graphics ).play({
  springs: {
    position: {
      type: 'linear',
      rest: Mouse,
      damping: 2.5,
      stiffness: -30
    }
  }
});

anim8( tinter ).tween('tint', 'red', 'blue', 'infinite yoyo 4s ~0.5s');
anim8( circle ).tween('radius', 30, 50, 'infinite yoyo');
anim8( outliner ).tween('lineWidth', 1, 5, 'infinite yoyo 2s');

This example shows the animate.css test page using anim8js instead of CSS animations.

This example shows how you use the defer function to wait for an event to trigger before executing the following functions on the animator.

anim8( window.box1 )
  .play( 'fadeIn' )
  .defer( 'once', 'finished' ) // 'on' could be used instead of 'once' which would cause the following chain to be called repeatedly
    .play( 'tada' )
    .defer( 'once', 'finished' )
      .play( 'fadeOut' )
      .defer( 'once', 'finished' )
        .play( 'zoomIn' )
      .undefer()
    .undefer()
  .undefer()
;

This example shows the blur and hueRotate filters being used at the same time.

m8( window.text ).play({
  keyframe: {
    from: {
      hueRotate: 0,
    },
    to: {
      hueRotate: -360
    }
  }
}, {
  duration: '20s',
  repeat: 'inf'
});

m8( window.text ).play({
  keyframe: {
    '0': {
      blur: 0
    },
    '50': {
      blur: 5,
      opacity: 1
    },
    '100': {
      opacity: 0
    }
  }
}, {
  delay: '3s',
  duration: '2s',
  sleep: '3s',
  teasing: 'quad-yoyo',
  repeat: 'inf'
});

This example shows the jquery functions for playing animations in data attributes.

<div id="box"
  data-intro="zoomInRight 2s"
  data-emphasis="pulse 2s x3 quad-out !5"
  data-outro="hinge"></div>

$('#box')
  .dataPlay('intro')
  .dataQueue('emphasis')
  .dataQueue('outro')
;

This example shows using the move animation type. This animation type adds a value to the current value. Use the arrow keys to move the box around.

m8.save('moveLeft', {
  move: {
    left: -100,
    rotate: -90
  }
});

m8.save('moveRight', {
  move: {
    left: 100,
    rotate: 90
  }
});

m8.save('moveUp', {
  move: {
    top: -100,
    rotate: 90
  }
});

m8.save('moveDown', {
  move: {
    top: 100,
    rotate: -90
  }
});

var anim8or = m8( window.box1 );

$listen( document, 'keydown', function(mouse, ev)
{
  if ( ev.keyCode === 37 ) anim8or.queue('moveLeft linear 250');
  if ( ev.keyCode === 38 ) anim8or.queue('moveUp linear 250');
  if ( ev.keyCode === 39 ) anim8or.queue('moveRight linear 250');
  if ( ev.keyCode === 40 ) anim8or.queue('moveDown linear 250');
});

This example shows directly calling the move function on the animator.

var anim8or = m8( window.box1 );

$listen( document, 'keydown', function(mouse, ev)
{
  if ( ev.keyCode === 38 ) anim8or.move('rotate', 90);
  if ( ev.keyCode === 40 ) anim8or.move('rotate', -90);
  if ( ev.keyCode === 37 ) anim8or.move('left', -100);
  if ( ev.keyCode === 39 ) anim8or.move('left', 100);
});

This example shows the orbit functionality which combines two fake attributes: angle & distance.

m8( window.box1 ).play({
  keyframe: {
    '0': {
      angle: 0,
      rotate: 0,
      distance: 100,
      easing: 'linear'
    },
    '100': {
      angle: 360,
      rotate: -720,
      distance: 100,
      easing: 'linear'
    },
    '10,30,50,70,90': {
      distance: 150,
      easing: 'quad-inout'
    },
    '20,40,60,80': {
      distance: 100,
      easing: 'quad-inout'
    }
  }
}, {
  duration: '3s',
  repeat: 100
});

This example shows and being used in an animation definition to include an entirely new animation definition or an existing animation.

m8.save('anding1', {
  values: {
    rotate: [0, 360, 0]
  },
  and: {
    values: {
      scale: [1, 2, 1]
    }
  }
});

m8.save('anding2', {
  values: {
    borderWidth: [2, 10, 2],
    borderColor: ['#0F0', '#F00']
  },
  and: 'anding1'
});

m8( window.box1 ).play('anding1 4s');
m8( window.box2 ).play('anding2 8s');

This example shows queue being used in an animation definition to include an entirely new animation definition or an existing animation.

m8.save('q1', {
  values: {
    rotate: [0, 360, 0],
    scale: [1, 2, 1]
  },
  queue: {
    values: {
      rotate: [0, -360, -360, 0]
    }
  }
});

m8.save('q2', {
  values: {
    translate: [0, 100, 0]
  },
  queue: 'q1 x3 2s'
})

m8( window.box1 ).play('q1 4s');
m8( window.box2 ).play('q2 4s');

This example shows the physics animation type being used to apply velocity and acceleration to the element. The elements are spawned from the mouse position - move your mouse around the example.

anim8.save('shoot', {
  physics: {
    center: { // the attribute to apply physical forces to
      position: MousePosition,
      // Random Velocity
      velocity: anim8.computed.random({min:{x:-300,y:-900}, max:{x:300,y:-600}}),
      acceleration: {x: 0, y: 600},
      terminal: 1000,
      stopAt: '3s'
    }
  },
  initial: {
    // Random Angle
    rotate: anim8.computed.random({min:0, max:360})
  },
  tweenTo: {
    // Random Angle
    rotate: anim8.computed.random({min:0, max:360})
  },
  keyframe: {
    '0': {
      scale: 1,
      backgroundColor: 'blue'
    },
    '50': {
      // Random Scale
      scale: anim8.computed.random([1, 1.5, 2, 2.5, 3]),
      backgroundColor: 'red'
    },
    '75': {
      opacity: 1
    },
    '100': {
      scale: 0.1,
      opacity: 0,
      backgroundColor: 'yellow'
    }
  }
}, {
  duration: '3s'
});

This example shows using the reference to an attribute in another animation. The can be used as a point in an animation or a resting point for a spring. In this example a box is attached by a spring to another box orbitting around a point.

sprite2.spring( // add a distance spring
{
  type: 'distance',
  attribute: 'center',
  rest: sprite1.ref( 'center' ),
  position: {x: 100, y: 100},
  distance: 100,
  damping: 2.5,
  stiffness: -30,
  gravity: {x: 0, y:1000}
});

Relative values can be used anywhere in an animation. Relative values like -100 and +25 add the given value to the existing value. This example also uses the true keyword in the start position which means "use the current value"

m8( window.box1 )
  .tween('opacity', true, '-0.5', '2s ~1s')
  .defer('once', 'finished')
    .tween('opacity', true, '+0.5', '2s')
    .tween('left', true, '+200', '2s')
    .tween('rotate', true, '+1080', '4s')
    .defer('once', 'finished')
      .tween('rotate', true, '-360', '500ms')
      .defer('once', 'finished')
        .tween('center', true, '+100', '2s')
        .defer('once', 'finished')
          .tween('center', true, {x:'-200', y:20})
        .undefer()
      .undefer()
    .undefer()
  .undefer()
;

This example shows the animate.css test page using anim8js sequence animations.

This example tests the shadow properties: shadowPosition, shadowColor, and shadowBlur.

m8( window.box1 ).play({
  keyframe: {
    from: {
      shadowPosition: 10,
      shadowColor: {r:0, g:0, b:0, a:0},
      shadowBlur: 30
    },
    to: {
      shadowPosition: 4,
      shadowColor: {r:0, g:0, b:0, a:255},
      shadowBlur: 0
    }
  }
}, '4s');

This example shows off the two different types of springs - an additional distance spring is added with a gravitational pull. Click in the example box to set the resting point for the springs.

m8( window.box1 ).spring(
{
  type: 'linear',
  attribute: 'center',
  rest: MouseClicked,
  damping: 2.5,
  stiffness: -30
});

m8( window.box2 ).spring(
{
  type: 'distance',
  attribute: 'center',
  rest: MouseClicked,
  distance: 100,
  damping: 2.5,
  stiffness: -30,
  gravity: {x: 0, y:1000}
});

m8( window.box3 ).spring(
{
  type: 'distance',
  attribute: 'center',
  rest: MouseClicked,
  distance: 100,
  damping: 2.5,
  stiffness: -30
});

This example shows distance springs which are attached to the previous springs current position and the mouse.

var previous = MousePosition; // dynamic resting point

for (var i = 1; i <= 6; i++)
{
  var e = window[ 'box' + i ];

  m8( e ).spring(
  {
    type: 'distance',
    attribute: 'center',
    rest: previous,
    distance: 50,
    damping: 20,
    stiffness: -100
  });

  previous = m8( e ).ref( 'center' ); // next dynamic resting point
}

This example shows using the springs animation type to create an animation which attaches an element to the mouse.

m8.save('toMouse', {
  springs: {
    center: {
      type: 'linear', // spring type (linear|distance)
      rest: MousePosition,
      damping: 2.5,
      stiffness: -30
    }
  }
});

m8( window.box1 ).play( 'toMouse' );

This example tests the text shadow properties: textShadowPosition, textShadowColor, and textShadowBlur.

m8( window.box1 ).play({
  keyframe: {
    from: {
      textShadowPosition: 10,
      textShadowColor: {r:0, g:0, b:0, a:0},
      textShadowBlur: 30
    },
    to: {
      textShadowPosition: 4,
      textShadowColor: {r:200, g:200, b:200, a:255},
      textShadowBlur: 0
    }
  }
}, '4s');

This example shows anim8js ability to determine the current orientation/values of an element even when its defined in CSS.

#box1 {
  -webkit-transform: translateX(40px) translateY(10px) rotate(20deg) scale(1.2);
}
m8( window.box1 ).get({
  rotate: 'deg', // 20
  scale: false, // {1.2,1.2}
  translate: 'px', // {40,10}
  scaleX: false, // 1.2
  rotate3d: 'rad', // {0,0,1} 0.349
  skew: false, // {0,0}
  translateX: '%' // 90.9
});

This example shows how you can transition from one animation to the beginning of another through tweening.

// 1s = spend 1 second transitioning
// >0 = spend 0ms smoothly transitioning from current value to path to next animation
// <0 = spend 0ms smoothly transitioning from the end of the transition path into the next animation
// linear = easing for transitioning between the current and next animation
anim8or.transition( '1s >0 <0 linear', {
  keyframe: {
    from: {
      center: mouse
    },
    to: {
      center: getRandomPoint()
    }
  }
});

This example shows how you can transition from one animation to before another using a smooth curve which respects ending and starting animation velocity.

// 500 = spend 500 ms transitioning
// >100 = spend 100ms smoothly transitioning from current value to path to next animation
// <-100 = look back 100ms in the next animation to smoothly transitioning into the next animation
// linear = easing for transitioning between the current and next animation
// /100 = specifies a number of points along the transition path to calculate to generate a transition path that maintains a consistent exit velocity from the current animation into the entrance velocity into the next animation
anim8or.transition( '500 >100 <-100 linear /100', {
  keyframe: {
    from: {
      center: mouse
    },
    to: {
      center: getRandomPoint()
    }
  }
});

This example shows how you can transition smoothly out of the current animation into the beginning of the next animation.

// 500 = spend 500 ms transitioning
// >250 = spend 250ms smoothly transitioning from current value to path to next animation
// <0 = spend 0ms smoothly transitioning from the end of the transition path into the next animation
// linear = easing for transitioning between the current and next animation
anim8or.transition( '500 >250 <0 linear', {
  keyframe: {
    from: {
      center: mouse
    },
    to: {
      center: getRandomPoint()
    }
  }
});

This example shows how you can transition from one animation to another using a smooth curve which respects ending and starting animation velocity.

// 500 = spend 500 ms transitioning
// >250 = spend 250ms smoothly transitioning from current value to path to next animation
// <250 = spend 250ms smoothly transitioning from the end of the transition path into the next animation
// linear = easing for transitioning between the current and next animation
// /100 = specifies a number of points along the transition path to calculate to generate a transition path that maintains a consistent exit velocity from the current animation into the entrance velocity into the next animation
anim8or.transition( '500 >250 <250 linear /100', {
  keyframe: {
    from: {
      center: mouse
    },
    to: {
      center: getRandomPoint()
    }
  }
});

This example shows how you can transition from one animation to another using a smooth curve.

// 500 = spend 500 ms transitioning
// >250 = spend 250ms smoothly transitioning from current value to path to next animation
// <250 = spend 250ms smoothly transitioning from the end of the transition path into the next animation
// linear = easing for transitioning between the current and next animation
anim8or.transition( '500 >250 <250 linear', {
  keyframe: {
    from: {
      center: mouse
    },
    to: {
      center: getRandomPoint()
    }
  }
});

This example shows using the travel animation type. This animation type moves from point A to point B at a given velocity. You can click on the example box to see small boxes travel towards your mouse. Occassionally they will move pretty fast!

This example shows calling the tween function directly on the animator. Click in the example to have the box tween from the mouse position to a random point.

m8( window.box ).tween( 'center', mouse, getRandomPoint() );

This example is a simple interface for testing out tweening of most of the available animatable HTML properties.

This example shows calling the tweenTo function directly on the animator. Click in the example to have the box tween from its current position to the mouse.

m8( window.box1 ).tweenTo( 'center', mouse );

This example shows using the tweenTo animation type. This animation tweens from the current value to the given value.

m8( window.box1 ).play({
  tweenTo: {
    center: mouse
  }
});

This example shows a circle following a cubic curve path which consists of a starting and ending point and a control point.

var myPath = m8.path({
  type: 'cubic',
  calculator: '2d',
  p0: [20, 20],
  p1: [300, 50],
  p2: [300, 400],
  p3: [50, 130]
});

m8( window.box1 ).follow('center', myPath, '8s inf linear-yoyo');

Remember: you can animate numbers, 3d points, and colors along any type of path.

This example shows a circle following a hermite path which consists of a starting and ending point and has two vectors which sit at the starting and ending points respectively and point in the direction the curve should follow.

var myPath = m8.path({
  type: 'hermite',
  calculator: '2d',
  start: [200, 40],
  startTangent: [-1000, 0],
  end: [100, 400],
  endTangent: [-800, 100]
});

m8( window.box1 ).follow('center', myPath, '8s inf linear-yoyo');