How to trigger animation events using React

Animations play an important role in improving User Experience by making it smooth and pleasant to use. There is no doubt that this has become part of every User Interactions on apps that we use everyday.

In this tutorial, I will teach you how to trigger events when you’re using CSS animations in ReactJS in a simple way.

So, let’s get started!

What is CSS animation?

First, if you’re wondering what CSS animations are, it should be quite obvious by now: it’s literally animating your User Interface to make the User Interactions smooth and engaging.

But here is the concrete definition of CSS animation: It is a method of applying animations to HTML elements without having the need of using JavaScript to do it.

Back then we used scripts such as flash or JavaScript to initiate animations within a webpage through the use of “keyframes” but to the detriment of the browser performance. Luckily with the advent of CSS animations, things are starting to get better and they also have the same concept as flash which we will show later.

Regardless of the definition, CSS animations help us make our HTML elements come to life and add meaning to User Interactions. They move things up and make User Experience more engaging.

How CSS animations were made?

We can create our own CSS animations through the use of keyframes which will allow us to define our animation sequences for each element. We then use that keyframe into the CSS animation property and attach it to a particular element.

Animation property has a couple of sub-elements:

animation-name — specifies the keyframe name

animation-duration — specifies how long the animation should run

animation-timing-function — this configures the timing of the animation, which animation transitions through keyframes

Animation property can be declared like this:

.mydiv {  
animation-duration: 3s;  
animation-name: my-animation;  
animation-iteration-count: 3;  
animation-direction: alternate;
}

Or shorthand version like this:

/* @keyframes duration | timing-function | delay | name */
animation: 3s linear 1s my-animation;

For more information about animation property, check the official documentation of Mozilla.

Sample CSS animation demonstration

This is the sample code snippet for CSS animation:

div {  
background-color: orangered;  
height: 90px;  
width: 90px;    
left: 0px;  
top: 0px;    
position: absolute;    
animation: sampleanimation 1s infinite;
}

@keyframes sampleanimation {  
0% {    left: 0px;    top: 0px;  }  
25% {    left: 300px;    top: 0px;  }  
50% {    left: 300px;    top: 150px;  }  
75% {    left: 0px;    top: 150px;  }
}

Where keyframes contain our animation.

This code sample perfectly demonstrates how CSS animations were created and attached to the element:

We can also do animations through the use of transition/transform approach when the state of your UI changes like when you hover or clicked them, this transitions us from one state to another. The key here is adding transition time and you’ll have a similar animation like the one above:


We’ll now combine both CSS animations and React to trigger an event. Some of you might wonder: What is the typical use-case for triggering such events before or after an animation finished doing its job? Is it worth delving deeper and how can we make use of it in our projects?

Use-case for triggering animation events

Consider the following problem: You want some cool stuff to happen after the animation has finished doing its job. The problem is, the functionality you’re building triggers even though the animation is not yet finished animating.

This is where the animation events built-in from React will come into play.

Food ordering sample using React animation events

From the sample above, I triggered the functionality of adding orders to cart after the animation is done doing its job in shrinking the order the user added to cart. This way, the animation is complimenting with our functionalities which is what we want in the first place so we can deliver fluid User Experience app for our users.

Enter React’s animation events

Thankfully, React offers some built-in events for catching animation transitions in our components through the use of SyntheticEvent which is a cross-browser wrapper around the browser’s native event. Meaning, our React components can use native events because of this wrapper, including preventDefault() and stopPropagation() native events.

This allows us to insert some events before or after the animation was done doing its part.

SyntheticEvent has some support for animation, these are:

onAnimationStart — This event triggers the moment the animation started

onAnimationEnd — This event triggers the moment the animation ended

onAnimationIteration — This event triggers the moment the animation starts looping again

Now, let’s start putting them into practical use.

Triggering event using onAnimationStart and onAnimationEnd

As the name implies, one event triggers the moment animation started and the other when animation just ended. Here is the sample demo for this:

Here we can see that when the animation starts and ends, events were triggered. This is especially useful when you have some functionality that needs to be triggered when an animation starts or ends.

The example earlier at the top makes use of onAnimationStart and onAnimationEndevents to compliment my functionality with animation timings.

Triggering event using onAnimationIteration

This event triggers when you use an animation that doesn’t stop and keeps repeating over and over. Here is the sample demo for this:

Every time the animation finished its cycle, the event will trigger. Then this triggers in every iteration of animation if it’s looping infinitely.

Conclusion

CSS Animation has increasingly become a big part of Front-End ecosystem due to the increasing fluidity of our User Experience being designed these days. 

One advice I can give is to use these events with your CSS animations when appropriate so that it makes sense to blend with your User Experience and functionality that it receives. Learning when to apply them will dramatically improve the User Experience.

Learning how to mix it with libraries like React and apply it in components will certainly help you to become one of the best Front-End Developers out there in the long run. So it’s best to learn how you can mix the best of both CSS and JavaScript libraries.

A Software Engineer who loves to code and write articles.

Leave a reply:

Your email address will not be published.

Site Footer