How to Trigger Animation Events using React

Learn the simplest way to listen to CSS animation events in ReactJS.

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.

Before we start: Use Bit to encapsulate React components with all their dependencies and setup. Build truly modular applications with better code reuse, simpler maintenance and less overhead.

Share and collaborate on individual React components.

What is a 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 make 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: