onRender V4

Executes a function every time a timeline renders something on the screen, this means that no rendering is happening when the currentTime is inside the delay or loopDelay time frames, or if neither of its children are rendering.

Accepts

A Function whose first argument returns the timeline itself

Default

noop

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

import { engine } from 'animejs';
engine.defaults.onRender = self => console.log(self.id);

onRender code example

import { createTimeline, utils } from 'animejs';

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

let renders = 0;

const tl = createTimeline({
  defaults: { duration: 500 },
  loopDelay: 250,
  loop: true,
  onRender: self => $value.textContent = ++renders
})
.add('.circle', { x: '15rem' })
.add('.triangle', { x: '15rem' }, '+=250')
.add('.square', { x: '15rem' }, '+=250');

<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">renders</span>
    <span class="value">0</span>
  </pre>
</div>

Previous Next