Is there any way to chain animations in anime.js or have queues / groups of animations that I can wait for in order to proceed with other animations?
Advertisement
Answer
Each animation with anime returns a promise, so you can use async/await in combination with Promise.all, do remember, though, Promise.all makes it so that all animations run concurrently. For example, let’s say you want 3 animations all to run at the same time, then, after that group is done, do another animation:
JavaScript
x
83
83
1
async function animateLockAndBackground() {2
const bigLockAnimation = anime({3
targets: '#big-lock',4
strokeDashoffset: [0, 5],5
easing: 'easeInOutSine',6
duration: 250,7
easing: 'easeInSine'8
}).finished;9
10
const lockLineAnimation = anime({11
targets: '#lock-line',12
strokeDashoffset: [0, 3],13
translateY: [{14
value: '-2px',15
duration: 350,16
easing: 'easeOutExpo'17
},18
{19
value: '2px',20
duration: 350,21
easing: 'easeOutExpo'22
},23
{24
value: '-2px',25
duration: 350,26
easing: 'easeOutExpo'27
},28
],29
}).finished;30
31
const innerCircleAnimation = anime({32
targets: '#inner-circle',33
translateY: [{34
value: '-1px',35
duration: 250,36
easing: 'easeOutExpo'37
},38
{39
value: '1px',40
duration: 250,41
easing: 'easeOutExpo'42
},43
{44
value: '-1px',45
duration: 250,46
easing: 'easeOutExpo'47
},48
{49
value: 0,50
duration: 250,51
easing: 'easeOutExpo'52
},53
],54
}).finished;55
56
await Promise.all([bigLockAnimation, lockLineAnimation, innerCircleAnimation]);57
}58
59
animateLockAndBackground().then(() => {60
console.log('First animation finished.');61
anime({62
targets: '.plugins-not-installed-text',63
translateY: [{64
value: '10px',65
duration: 75066
}]67
});68
anime({69
targets: '#lock-wrapper',70
translateY: [{71
value: '-10px',72
duration: 75073
}]74
});75
anime({76
targets: '#plugins-not-installed-screen',77
opacity: 0,78
duration: 500,79
easing: 'linear'80
}).finished.then(() => {81
console.log('Second animation finished.');82
});83
});JavaScript
1
58
58
1
#plugins-not-installed-screen {2
display: flex;3
flex-direction: column;4
position: relative;5
width: 100%;6
}7
8
#plugins-not-installed-screen .upper {9
display: flex;10
justify-content: center;11
align-items: center;12
flex-direction: column;13
z-index: 2;14
padding: 24px 48px;15
background-image: url('../Images/component.png');16
background-repeat: repeat;17
}18
19
.plugins-not-installed-text {20
font-size: 15px;21
text-align: center;22
}23
24
#lock {25
display: block;26
width: 50px;27
height: 65px;28
}29
30
#plugins-not-installed-screen #lock {}31
32
#plugins-not-installed-screen #big-lock {33
stroke-dasharray: 61 62;34
stroke-dashoffset: 5;35
/* go to 5 */36
}37
38
#plugins-not-installed-screen #lock-line {39
stroke-dasharray: 31 33;40
stroke-dashoffset: 0;41
/* go to 3 */42
}43
44
#components-to-install-list {45
display: flex;46
flex-direction: row;47
flex-wrap: wrap;48
width: 100%;49
}50
51
.install-component-individual {52
display: flex;53
flex-direction: row;54
justify-content: space-between;55
padding: 12px 0;56
border-bottom: 1px solid rgba(0, 0, 0, 0.1);57
width: 100%;58
}JavaScript
1
19
19
1
<script src="https://cdn.jsdelivr.net/npm/animejs@3.1.0/lib/anime.min.js"></script>2
<div id="plugins-not-installed-screen" class="">3
<div class="upper">4
<div id="lock-wrapper">5
<svg version="1.1" id="lock" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 25 35" style="enable-background:new 0 0 25 35;" xml:space="preserve">6
<style type="text/css">7
#big-lock{fill:none;stroke:#686868;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;}8
#inner-circle{fill:none;stroke:#686868;stroke-width:2;stroke-linecap:round;stroke-miterlimit:10;}9
#lock-line{fill:none;stroke:#686868;stroke-width:2;stroke-linecap:round;stroke-miterlimit:10;}10
</style>11
<path id="big-lock" d="M4.4,13.5c-1.2,0.8-2,2.1-2,3.6v4c0,2.8,1.1,5.4,3.1,7.4c1.9,1.9,4.5,2.9,7.2,2.912
c0.1,0,0.2,0,0.3,0c5.5-0.1,10-4.9,10-10.5v-3.8c0.1-1.8-0.9-3.3-2.4-4l-6.5-2.7c-0.8-0.3-1.8-0.4-2.6,0L10.1,11"/>13
<circle id="inner-circle" cx="12.7" cy="21.9" r="2.9"/>14
<path id="lock-line" d="M7.1,15.1V9.9c0-3.1,2.5-5.6,5.6-5.6h0c3.1,0,5.6,2.5,5.6,5.6v8"/>15
</svg>16
</div>17
<h5 class="plugins-not-installed-text">Plugins not installed.</h5>18
</div>19
</div>What, then, if you want to, inside that function, have the lock-line animate at the same time the 2 other elements are animating, so instead of 3 animation timelines, you only have 2? Here:
JavaScript
1
53
53
1
async function animateLockAndBackground() {2
const bigLockAnimation = anime({3
targets: '#big-lock',4
strokeDashoffset: [0, 5],5
easing: 'easeInOutSine',6
duration: 250,7
easing: 'easeInSine'8
}).finished;9
10
const innerCircleAnimation = anime({11
targets: '#inner-circle',12
translateY: [13
{value: '-1px', duration: 250, easing: 'easeOutExpo'},14
{value: '1px', duration: 250, easing: 'easeOutExpo'},15
{value: '-1px', duration: 250, easing: 'easeOutExpo'},16
{value: 0, duration: 250, easing: 'easeOutExpo'},17
],18
}).finished;19
20
await Promise.all([bigLockAnimation, innerCircleAnimation]);21
}22
23
animateLockAndBackground().then(() => {24
return anime({25
targets: '#lock-line',26
strokeDashoffset: [0, 3],27
translateY: [28
{value: '-2px', duration: 350, easing: 'easeOutExpo'},29
{value: '2px', duration: 350, easing: 'easeOutExpo'},30
{value: '-2px', duration: 350, easing: 'easeOutExpo'},31
],32
}).finished;33
}).then(() => {34
anime({35
targets: '.plugins-not-installed-text',36
translateY: [37
{value: '10px', duration: 750}38
]39
});40
anime({41
targets: '#lock-wrapper',42
translateY: [43
{value: '-10px', duration: 750}44
]45
});46
anime({47
targets: '#plugins-not-installed-screen',48
opacity: 0,49
duration: 500,50
easing: 'linear'51
});52
});53
We moved that lock-line animation outside of the original group, made it wait for the group, then whatever else comes after the lock-line animates after.
You should think about an animation as a simple promise that you can chain.