Create the Pulse Animation

Pulse Animation

We create reusable pulse animation by calling the animation() function. It accepts {{ timings }} , and {{ scale }} input parameters. The pulse animation is created by changing the element’s scale by calling the keyframes function.

useAnimation(

pulseAnimation,

{ params: { timings: 200, scale: 1.1, } }

) at 0ms scale equals 1

at 100ms scale equals 1.1

at 200ms scale equals 1

Next, we’ll consume the animation inside our first component.

Create the FAB Component

FAB with Pulse Animation

Inside the component’s animations array, we call the trigger() function with a descriptive counterChange name.

Next we define a transition, and use :increment as the state transition expression. It is a perfect fit, as we want to perform the animation when the user taps on the button, incrementing the claps counter.