Animation Sequences

Before animation sequences, let's search a bit about the useAnimate hook.

useAnimate hook

With useAnimate, you can trigger an animation programmatically. Click a button to trigger an animation. Submit a form to trigger an animation. Anything you want to animate, you can do with useAnimate.

Essentially, we are trying to animate the background property of the container block with a button which is inside of the container.

To do that, we need to use the animate function with a scope reference.

The scope defines where the animate function can actually function.

const [scope, animate] = useAnimate();
 
    // ... some other code
 
<div ref={scope} className="h-dvh w-full flex items-center justify-center">
 
    // .. some other code
 
</div>

With this, we have access to the animate function that does most of the work.

animate(".some-selector", {
    opacity: 1,
    scale: 1.2,
    boxShadow: "0 0 10px 0 rgba(0, 0, 0, 0.5)",
});

You can use an id, className, element, data-attribute or even an object that you'd like to animate. It can either be a motion value as well.

const x = useMotionValue(0);
 
animate(x, 69420, { duration: 0.2 })
 

Animation Sequences

With animate function at your disposal, you can create complex animations with the help of animation sequences.

A sequence is an array that you can pass into animate function. Something that you want to execute sequentially.

const sequence = [
  ["ul", { opacity: 1 }, { duration: 0.5 }],
  ["li", 100, { ease: "easeInOut" }]
]

animate(sequence);

Let's take an example of a form submission animation that we are going to animate.

Submit button

Here' we are orchestrating a sequence of animations to create a form submission animation.

Sequentially, we are animating width, opacity, y, backgroundColor and pathLength properties of the button and the SVG path.

Also, the at comes handy with animation sequences to control the timing of the animations.

• at: "-0.2" - this means that the animation will start 0.2 seconds before the previous animation ends.
• at: "+2" - this means that the animation will start 2 seconds after the previous animation ends.

Conclusion

Animation sequences are a powerful way to create complex animations with the help of the animate function. They are a bit more verbose than the animate function, but they are more powerful and flexible.

They are particularly useful when you want to create complex animations that are not possible with the animate function alone.

They are also useful when you want to create animations that are not possible with the animate function alone.