defaults

Defines the Scope defaults properties which are then used for all Timer, Animation and Timeline created within that scope.

Accepts

An Object with the following optional properties:

Name Accepts
playbackEase Easing name String | Easing Function
playbackRate Number
frameRate Number
loop Number | Boolean
reversed Boolean
alternate Boolean
autoplay Boolean
duration Number | Function
delay Number | Function
composition Composition types String | Function
ease Easing name String | Easing Function
loopDelay Number
modifier Modifier Function
onBegin Callback Function
onUpdate Callback Function
onRender Callback Function
onLoop Callback Function
onComplete Callback Function

defaults code example

import { createScope, animate } from 'animejs';

const rows = utils.$('.row');

rows.forEach(($row, i) => {
  createScope({
    root: $row,
    defaults: { ease: `out(${1 + i})` }
  })
  .add(() => {
    animate('.square', {
      x: '17rem',
      loop: true,
      alternate: true
    });
  });
});
<div class="medium row">
  <div class="square"></div>
  <div class="padded label">scope 1</div>
</div>
<div class="medium row">
  <div class="square"></div>
  <div class="padded label">scope 2</div>
</div>
<div class="medium row">
  <div class="square"></div>
  <div class="padded label">scope 3</div>
</div>