angular.tar.gz

angular

Animations play a crucial role in an application’s user experience (UX). A set of well-designed animations can make an application feel fast, polished, and professional. However, creating animations can be a daunting task that involves knowing what is available and how to choose the right approach for each task.

You will start with the easiest methods and move on to more advanced animation methods as you make your way through this course. You’ll start with general animation techniques, covering CSS transitions, animations, and the Web Animations API, followed by Angular animations and integrating external animation libraries. Lastly, you’ll finish with a deep dive into animation performance and debugging.

This course will provide you with information and advice to help you create beautiful and performant animations in Angular applications. By the end of the course, you will be able to create performant animations and choose the right tools to create them effectively.

Animations in Angular

```html
<div class="animate__animated animate__bounce"></div>
```

```html
<div class="animate__animated" [class.animate__bounce]="startAnimation"></div>
```

```typescript
@ViewChild('box', { static: true }) box: ElementRef;

startAnimation(): void {
    this.box.nativeElement.classList = 'animate__animated animate__bounce';
}
```

```html
<div class="animate__animated" [ngClass]="{ 'animate__bounce': startAnimation }"></div>
```

```html
<div class="animate__animated" [class]="{ 'animate__bounce': startAnimation }"></div>
```

**(Select all that apply.)** Which of the following are ways to trigger a bounce animation from `animate.css` in an Angular application?


<p><strong>(Select all that apply.)</strong> Which of the following are ways to trigger a bounce animation from <code>animate.css</code> in an Angular application?</p>


The box moves `100px` to the left -> then the circle shrinks to `0.5` of its original size -> the box moves to its original position.


The box moves `100px` to the right -> the circle shrinks to `0.5` of its original size -> the box moves to its original position.


The box moves `100px` to the right in parallel as the circle shrinks to `0.5` of its original size -> the box moves back to its original position as it expands to its original size.


The box moves `100px` to the left -> the circle shrinks to `0.5` of its original size -> the box moves to its original position as it expands to its original size.


What’s the output of the Motion One animation code below?

```typescript
import { Component, ViewChild, ElementRef } from '@angular/core';
import { timeline } from 'motion';

@Component({
  selector: "app-root",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.scss"],
})
export class AppComponent {
  @ViewChild('box', { static: true }) box: ElementRef;
  @ViewChild('circle', { static: true }) box: ElementRef;

  animate(): void {
    const sequence = [
      [this.box.nativeElement, { x: 100 }, { duration: 0.5 }],
      [this.circle.nativeElement, { scaleX: 0.5, scaleY: 0.5 }, { duration: 0.5 }],
      [this.box.nativeElement, { x: 0, scaleX: 0.5, scaleY: 0.5 }, { duration: 1 }],
    ];
    timeline(sequence);
  }
}
```

<p>What’s the output of the Motion One animation code below?</p>
<pre><code class="language-typescript">import { Component, ViewChild, ElementRef } from '@angular/core';
import { timeline } from 'motion';

@Component({
  selector: &quot;app-root&quot;,
  templateUrl: &quot;./app.component.html&quot;,
  styleUrls: [&quot;./app.component.scss&quot;],
})
export class AppComponent {
  @ViewChild('box', { static: true }) box: ElementRef;
  @ViewChild('circle', { static: true }) box: ElementRef;

  animate(): void {
    const sequence = [
      [this.box.nativeElement, { x: 100 }, { duration: 0.5 }],
      [this.circle.nativeElement, { scaleX: 0.5, scaleY: 0.5 }, { duration: 0.5 }],
      [this.box.nativeElement, { x: 0, scaleX: 0.5, scaleY: 0.5 }, { duration: 1 }],
    ];
    timeline(sequence);
  }
}
</code></pre>


The target element will move `200px` to the right.

The target element will move `200px` to the left.


The target element will move `200px` to the right and reset to its original position after the animation is complete.

The target element will move `200px` to the right and animate back to its original position.


What’s the output of the code below?

```typescript
import { Component, ViewChild, ElementRef } from "@angular/core";
import { animate } from "popmotion";
import styler from 'stylefire';

@Component({
  selector: "app-root",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.scss"],
})
export class AppComponent {
  @ViewChild("box", { static: true }) box: ElementRef;

  rotate(): void {
    const boxStyler = styler(this.box.nativeElement);
    animate({
        from: 0,
        to: 200,
        duration: 500,
        type: 'spring'
        onUpdate: (latest) => {
            boxStyler.set('translateX', latest);
        },
        onComplete: () => {
            boxStyler.set('translateX', 0);
        }
    })
  }
}
```

<p>What’s the output of the code below?</p>
<pre><code class="language-typescript">import { Component, ViewChild, ElementRef } from &quot;@angular/core&quot;;
import { animate } from &quot;popmotion&quot;;
import styler from 'stylefire';

@Component({
  selector: &quot;app-root&quot;,
  templateUrl: &quot;./app.component.html&quot;,
  styleUrls: [&quot;./app.component.scss&quot;],
})
export class AppComponent {
  @ViewChild(&quot;box&quot;, { static: true }) box: ElementRef;

  rotate(): void {
    const boxStyler = styler(this.box.nativeElement);
    animate({
        from: 0,
        to: 200,
        duration: 500,
        type: 'spring'
        onUpdate: (latest) =&gt; {
            boxStyler.set('translateX', latest);
        },
        onComplete: () =&gt; {
            boxStyler.set('translateX', 0);
        }
    })
  }
}
</code></pre>


`onStart` -> Set 1 -> Set 2 -> Set 3 `onComplete`

`onStart` -> Set 1 -> `onComplete` -> Set 2 -> `onComplete` -> Set 3 -> `onComplete`

`onStart` -> Set 1, Set 2, Set 3 (executed in parallel at the same time) -> `onComplete`

`onStart` -> Set 1, Set 2, Set 3 (executed in parallel at the same time) -> `onComplete` (once for each set)

What’s the animation’s order of execution of the GreenSock animation code below?

```typescript
animate(): void {
    if (!(this.box && this.box.nativeElement)) {
        return;
    }
    const timeline = gsap
        .timeline({
            onComplete: () => {
                console.log('animation completed')
            },
            onStart: () => {
                console.log('animation started')
            },
        }).to(
            // Set 1
            this.box.nativeElement,
            { x: 100, duration: 0.5 },
        )
        .to(
            // Set 2
            this.box.nativeElement,
            { scaleX: 0.5, scaleY: 0.5, duration: 0.5 },
        )
        .to(
            // Set 3
            this.box.nativeElement,
            { scaleX: 1, scaleY: 1, x: 0, duration: 1 },
        );
  }
```

<p>What’s the animation’s order of execution of the GreenSock animation code below?</p>
<pre><code class="language-typescript">animate(): void {
    if (!(this.box &amp;&amp; this.box.nativeElement)) {
        return;
    }
    const timeline = gsap
        .timeline({
            onComplete: () =&gt; {
                console.log('animation completed')
            },
            onStart: () =&gt; {
                console.log('animation started')
            },
        }).to(
            // Set 1
            this.box.nativeElement,
            { x: 100, duration: 0.5 },
        )
        .to(
            // Set 2
            this.box.nativeElement,
            { scaleX: 0.5, scaleY: 0.5, duration: 0.5 },
        )
        .to(
            // Set 3
            this.box.nativeElement,
            { scaleX: 1, scaleY: 1, x: 0, duration: 1 },
        );
  }
</code></pre>


**(Select all that apply.)** Which of the following animation events are emitted over the lifecycle of an animate.css animation?


<p><strong>(Select all that apply.)</strong> Which of the following animation events are emitted over the lifecycle of an animate.css animation?</p>


Test your knowledge of third-party animation libraries!

Before We Start

CSS Transitions

CSS Animations

Web Animations API (WAAPI)

Angular Animations

Third-party Animation Libraries

Appendix

Conclusion

Quiz Yourself: Third-party Animation Libraries