add() V4

Creates and adds animations and timers to a timeline.
The type of element added to the timeline depends of the parameters passed to add().

Add animation

timeline.add(targets, parameters, position);

Parameter	Accepts
targets	Targets
parameters	Animatable properties & Tween parameters & Animation playback settings & Animation callbacks
position ^(opt)	Time position

Add timer

timeline.add(timerParameters, position);

Parameter	Type
timerParameters	Timer playback settings & Timer callbacks
position ^(opt)	Time position

Returns

The timeline itself

Can be chained with other timeline methods.

add() code example

import { createTimeline, utils } from 'animejs';

const [ $value ] = utils.$('.value');

const tl = createTimeline()
// Add labels
.label('start timer 1', 0)
.label('animate circle', 1000)
.label('start timer 2', 2000)
// Add Timer
.add({
  duration: 1000,
  onUpdate: self => $value.innerHTML = self.currentTime,
}, 'start timer 1')
// Add Animation
.add('.circle', {
  duration: 2000,
  x: '16rem',
}, 'animate circle')
// Add Timer
.add({
  duration: 1000,
  onUpdate: self => $value.innerHTML = self.currentTime,
}, 'start timer 2');

<div class="large row">
  <div class="circle"></div>
  <pre class="large log row">
    <span class="label">value</span>
    <span class="value lcd">0</span>
  </pre>
</div>

Previous Next