Search⌘ K
AI Features
Home
Courses
Animations in Angular

Solution Review: Create a Bounce on Click Animations

Explore how to implement bounce animations triggered by click events using four popular animation libraries in Angular. Learn to add event listeners and apply animation logic, enabling you to create interactive, reusable effects with Animate.css, Motion One, Popmotion, and GreenSock.

We'll cover the following...

To summarize the challenge, you were asked to create a bounce animation using four different animation libraries that would be executed when you clicked on the target element.

Animate.css

Step 1: Add a click event listener to the target element

Attach a click event listener to the target element and pass in the $event variable as a parameter to the click event function (lines 5–7).

HTML
<!-- src/app/app.component.html -->
<div class="boxes-container">
  <!-- animate.css -->
  <div class="box" (click)="animateCss($event)">
    Animate.css
  </div>
  <!-- motion one -->
  <div class="box">
    Motion One
  </div>
  <!-- popmotion -->
  <div class="box">
    Popmotion
  </div>
  <!-- greensock -->
  <div class="box">
    GreenSock
  </div>
</div>

Step 2: Animate the target element

Use the ...