Getting started

Download

Via npm

$ npm install @sherifmagdy/animejs --save

Via yarn

$ yarn add @sherifmagdy/animejs

or manual download.

Usage

ES6 modules

import anime from '@sherifmagdy/animejs';

CommonJS

const { default: anime } = require('@sherifmagdy/animejs');

Classic ES5 file include

Link anime.browser.min.js in your HTML :

<script src="anime.browser.min.js"></script>
<script>
  const { default: anime } = anime;
</script>

Using a CDN

<script src="https://cdn.jsdelivr.net/npm/@sherifmagdy/animejs@latest/lib/anime.browser.min.js"></script>
<script>
  const { default: anime } = anime;
</script>

In case you are using modules in the browser:

<script type="module">
  import anime from 'https://cdn.jsdelivr.net/npm/@sherifmagdy/animejs@latest/lib/anime.esm.browser.min.js';

  //init
  const animeInstance = anime(...);
</script>

New Features (v3.3)

• Improving timeline's add method to accept anime instance, timeline, function and instance parameters.
• Add call method to the timeline.
• Add kill method to anime instance and timeline.
• Add speed method to anime instance and timeline.
• restart, seek, play, pause, reverse, remove methods are now chainable in addition to speed and call methods.
• Add a reversed instance or timeline to a normal timeline.
• Add addMark() and removeMark() methods to the timeline.
• seek() method and time offset parameter are now supporting adding a mark's name or a percentage of the duration as a string.

Sandbox demo to highlight the powerful of the new features here

new Methods (v3.3)

call ( callback :Function ) : self

Adds a callback to the timeline which gets executed at creation.

//simple example to show a 3d object in 3d space follows an empty helper

const 3dObject = { x: 1 , ...};
const 3dHelper = { x: 3 , ...};

const tl = anime
  .timeline({
    targets: 3dObject
  })
  .add({
    x: 3dHelper.x, // translate the 3dObject's x position to 3
  })
  .call(() => {
    3dHelper.x = 5; // then change the helper's x position to 5
  })
  .add({
    x: 3dHelper.x // translate the 3dObject's x position to 5
  });

  // we could NOT use begin or complete properties because the callback appended to them won't execute at creation of the timeline.

kill () :undefined

Kills the anime instance (or timeline), so that the instance is eligible for garbage collection.

const instance = anime({
  targets: '.class',
  translateX: '+=100',
  complete: (ins) => ins.kill(),
});

speed (multiplier :Number) :self

Controls the animation speed, where ( multiplier= 0.5 ) means half speed, ( multiplier= 2 ) double speed.

const instance = anime(...);

//Adjust the animation speed
instance.speed(2.5);

addMark (name :String) :self

Adds a mark at particular position in the timeline.

const instance = anime
  .timeline({
    targets: '#elementID',
  })
  .add({ translateY: 200 })
  .addMark('startScale')
  .add({ scaleX: 0.5 }, 'startScale')
  .add({ scaleY: 0.7 }, 'startScale');

removeMark (name :String) :self

Removes a predefined mark from the timeline.

const instance = anime
  .timeline({
    targets: '#elementID',
    complete: (tl) => tl.removeMark('startRotate'), // removes the mark after the animation complete
  })
  .add({ translateY: 200 })
  .addMark('startScale')
  .add({ scaleX: 0.5 }, 'startScale')
  .addMark('startRotate')
  .add({ rotateX: '50deg' }, 'startRotate');

Hello world

anime({
  targets: 'div',
  translateX: 250,
  rotate: '1turn',
  backgroundColor: '#FFF',
  duration: 800,
});

More Advanced Examples

add() method in the timeline

const instance = anime({
  targets: 'div',
  translateX: 250,
});

const tl = anime
  .timeline({
    targets: '.class',
  })
  .add({
    rotateZ: '2turn',
  })
  .add(instance); // adding an instance to the timeline

const anotherTl = anime
  .timeline({
    targets: '.anotherClass',
  })
  .add(tl) // adding a timeline to the another timeline
  .addMark('MARK')
  .add(() => {
    //do something in this particular time
  }) // adding a function to get executed in this position in the timeline
  .add(
    {
      scaleY: 0.4,
    },
    'MARK'
  );

//You can add a reversed animation to a normal timeline
const reversedTl = anotherTl.reverse();
const normalTl = anime.timeline(...).add(reversedTl); //can be useful in many cases

seek() method & time offset parameter

  const tl = anime
  .timeline(...)
  .add({ translateY : 200 })
  .addMark('scale')
  .add({scaleX : 1.2} , 'scale') // starts at the same time of the mark ('scale')
  .add({scaleY: 0.3} ,'scale'); // starts at the same time of the mark ('scale')

  tl.seek('scale'); // seek to a specefic position
  //OR
  tl.seek('32%') //Use a percentage

Documentation

• Targets
• Properties
• Property parameters
• Animation parameters
• Values
• Keyframes
• Staggering
• Timeline
• Controls
• Callbacks and promises
• SVG Animations
• Easing functions
• Helpers

Demos and examples

• CodePen demos and examples
• Sandbox demo
• juliangarnier.com
• animejs.com
• Moving letters by @tobiasahlin
• Gradient topography animation by @crnacura
• Organic shape animations by @crnacura
• Pieces slider by @lmgonzalves
• Staggering animations
• Easings animations
• Sphere animation
• Layered animations
• anime.js logo animation

Browser support

| Chrome | Safari | IE / Edge | Firefox | Opera | | ------ | ------ | --------- | ------- | ----- | | 24+ | 8+ | 11+ | 32+ | 15+ |

Website | Documentation | Demos and examples | MIT License | © 2024 Sherif Magdy.