anime.js

JavaScript animation engine | animejs.com

Anime.js (/ˈæn.ə.meɪ/) is a lightweight JavaScript animation library with a simple, yet powerful API.
It works with CSS properties, SVG, DOM attributes and JavaScript Objects.

Getting started | Documentation | Demos and examples | Browser support

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

Demos and examples

Browser support

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

sherif-magdy / anime Goto Github PK

anime's Introduction