playbackEase V4

Applies and easing function to the entire playback of the timeline.

0 ──────────playbackEase──────────› 1
A ──ease──› B ──ease──› C ──ease──› D

Accepts

ease

Default

null

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

import { engine } from 'animejs';
engine.defaults.playbackEase = 'inOut';

playbackEase code example

import { createTimeline } from 'animejs';

const tl = createTimeline({
  playbackEase: 'inOut(3)', // this ease is applied across all children
})
.add('.circle', { x: '15rem', ease: 'out(1)' })
.add('.triangle', { x: '15rem', ease: 'out(2)' })
.add('.square', { x: '15rem', ease: 'out(3)' });
<div class="large row">
  <div class="medium pyramid">
    <div class="triangle"></div>
    <div class="square"></div>
    <div class="circle"></div>
  </div>
</div>