then() V4
Returns a Promise that resolves and execute a callback when the timeline completes.
The then() method can be directly inlined like this:
createTimeline(parameters).add(targets, parameters).then(callback);Or used in an async / await context:
async function waitForTimelineToComplete() {
return createTimeline()
.add('.square', { x: 100 })
.add('.square', { y: 100 });
}
const asyncTimeline = await waitForTimelineToComplete();Parameters
| Name | Type |
|---|---|
| callback | A Function whose first argument returns the timeline itself |
Returns
Promise
then() code example
import { createTimeline, utils } from 'animejs';
const [ $value ] = utils.$('.value');
const tl = createTimeline({
defaults: { duration: 500 },
loop: 1,
})
.add('.circle', { x: '15rem' })
.add('.triangle', { x: '15rem' })
.add('.square', { x: '15rem' });
tl.then(() => $value.textContent = 'fulfilled');<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">promise status</span>
<span class="value">pending</span>
</pre>
</div>