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>