autoplay

Defines the play mode of a timeline.

Accepts

Boolean | onScroll()

If set to true the timeline plays automatically
If set to false the timeline has to be manually played
If set to onScroll() the timeline will starts when the scroll thresholds conditions are met

Default

true

To change the default value globally, update the engine.defaults object.

import { engine } from 'animejs';
engine.defaults.autoplay = false;

autoplay code example

import { createTimeline, utils } from 'animejs';

const [ $paused ] = utils.$('.paused');
const [ $play ] = utils.$('.play');

const tl = createTimeline({
  autoplay: false,
  onUpdate: self => $paused.innerHTML = !!self.paused,
  onComplete: self => $paused.innerHTML = !!self.paused
})
.add('.circle', { x: '15rem' })
.add('.triangle', { x: '15rem' }, '-=500')
.add('.square', { x: '15rem' }, '-=500');

const playTl = () => tl.paused ? tl.restart() : tl.play();

$play.addEventListener('click', playTl);

<div class="large row">
  <div class="medium pyramid">
    <div class="triangle"></div>
    <div class="square"></div>
    <div class="circle"></div>
  </div>
  <pre class="large log row">
    <span class="label">paused</span>
    <span class="paused value">true</span>
  </pre>
</div>
<div class="large row controls">
  <button class="play">Play</button>
</div>

Previous Next