Stagger Animation with Vue 3 and CSS

Animating your site could make your site looks more polished. one of the popular types of animation is stagger animation it looks cool to watch elements in your site appears one by one. you might think it is difficult to implement stagger animation on your site, but it is not, Using the Vue transition component and modern CSS you can make stagger animation with a few lines of code.

What is the Vue Transition Component?

The transition component is a built-in component in Vue that applies CSS-based enter and leave animations to its children, The transition can be triggered by v-if, v-show or toggling a dynamic component.

According to the documentation, there are six classes applied throughout the cycle of the transition.

1. .v-enter-from: Added before the element is inserted, removed one frame after the element is inserted.
2. .v-enter-active: Active state for entering. Applied during the entire entering phase. Added before the element is inserted, removed when the transition/animation finishes. This class can be used to define the duration, delay and easing curve for the entering transition.
3. .v-enter-to: Added one frame after the element is inserted (at the same time v-enter-from is removed), removed when the transition/animation finishes.
4. .v-leave-from: Starting state for leave. Added immediately when a leaving transition is triggered, removed after one frame.
5. .v-leave-active: Active state for leave. Applied during the entire leaving phase. Added immediately when a leave transition is triggered, removed when the transition/animation finishes. This class can be used to define the duration, delay and easing curve for the leaving transition.
6. .v-leave-to: Ending state for leave. Added one frame after a leaving transition is triggered (at the same time v-leave-from is removed), removed when the transition/animation finishes.

most likely you don't need to use all of the six classes, the most important is the .v-enter-from class. for example, if your page is static and you only want to animate elements entering the screen and never remove them, so let's do that and implement it.

Implementation

First, let's create a button to toggle the element's visibility, and then add a few div elements, give it a class of .box and wraps them in the transition component, Then define the element styling, transition properties, duration and timing functions of the element in the .box class and then we define what to animate, in this case, we will set the opacity to 0 and scale to 0 to give it a popup effect in the .v-enter-from .box class.

as you can see when we toggle the element to be visible it animates a popup effect on entering but they are all popping up at the same time, we need to make them pop up one by one so we need to add a transition delay to all of them, We also need to specify the duration as a prop of the transition component, the value should match the transition duration + total delay of all elements combined, In this case, its 500ms + 250ms + 500ms = 1250

but that doesn't look very scalable, what if we have a dynamic number of elements? we don't want to manually specify a delay every time we add a new element. that is when the CSS variable comes into the picture. we can set a CSS variable as an inline style in our element. let's pass it the index of the element. then we can use this index to calculate the transition delay value for each element like this.

but what if we also want to animate when the elements are leaving the screen well it's easy we can just apply our animation above in the .v-leave-to .box class.

and that's about it.