Animations in Angular/

...

/

Solution Review: Create a Bounce on Click Animations

Solution Review: Create a Bounce on Click Animations

Use Animate.css, Motion One, Popmotion, and GreenSock to solve the challenge from the previous lesson.

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).

Press + to interact
<!-- 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 ...