Animations on top of each other
Okay, today I’ll give you a teaser with a promise that I’ll dive deeper into this topic later with a full Vibe post.
I recently discovered a new (to me) friend in the animation family called animation-composition. This one’s nice because it lets you merge or layer animations together. Imagine you have a component with two or more animations happening at the same time. With animation-composition, you can control how those animations interact.
There are three different properties, add, replace, and accumulate, that you can use separately or combine if you’re working with multiple animations. Replace overrides the underlying value, this is the default. Add builds on top of the existing value and accumulate combined animations together. You apply animation-composition to the same element that has the animation.
.item {
transform: translateX(50px);
animation: slideRight 5s infinite;
animation-composition: add;
}
@keyframes slideRight {
70%,
100% {
transform: translateX(200px);
}
}In this case, the animation will add to the existing transform, so it first slides 50px, then an additional 200px.
Smart, right!?
