Blog

🚀 How to Trigger Animation Events using React

👨‍💻 By Sonny Recio

How CSS animations were made?

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;

MDN-CSS Animation

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.

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

Animation Start and Stop React Example

Animation Iteration