Add animations

Animations can be added to a timeline using the add() method or the sync() method.

Animation creation

Creates and adds an animation directly to the timeline with the add() method.
This allows tween value composition with the timeline's existing children.

timeline.add(targets, parameters, position);

Parameters

Name	Accepts
targets	Targets
parameters	An Object of Animatable properties, Tween parameters, Playback settings and Animation callbacks
position (opt)	Time position

Animation synchronisation

Synchronises an existing animation with the sync() method.
Tween value composition is handled when the animation is created, and won't affect the timeline's existing children when added.

const animation = animate(target, { x: 100 });

timeline.sync(animation, position);

Parameters

Name	Accepts
animation	Animation
position (opt)	Time position

Returns

The timeline itself

import { createTimeline, animate } from 'animejs';

const circleAnimation = animate('.circle', {
  x: '15rem'
});

const tl = createTimeline()
.sync(circleAnimation)
.add('.triangle', {
  x: '15rem',
  rotate: '1turn',
  duration: 500,
  alternate: true,
  loop: 2,
})
.add('.square', {
  x: '15rem',
});

<div class="large row">
  <div class="medium pyramid">
    <div class="triangle"></div>
    <div class="square"></div>
    <div class="circle"></div>
  </div>
</div>