DEV Community: William Juan

Bring Your Angular App to Life with Anime.js

William Juan — Tue, 19 Aug 2025 13:57:42 +0000

With recent updates to the Angular framework, it is now recommended to move away from the @angular/animations package in favor of simpler alternatives using CSS or JavaScript. Many common animations can be accomplished with a pure CSS solution, however, JavaScript may be necessary for more complex animations. Additionally, third-party libraries, such as the CSS-based Animate.css or the JavaScript-based Anime.js, GSAP, and Popmotion, can be utilized for more advanced use cases.

This post will explore how to integrate and utilize Anime.js, a fast and versatile JavaScript animation library, in an Angular application.

npm i --save animejs

Setup Element to Animate

To animate an element from your template, you will need to give it an id (#box in the code snippet below) so you can access them from your typescript file. Start with creating a box with some basic styling as follows:

<!-- app.component.html -->
<div class="animation-demo-container">
  <div class="card-container">
    <div #box class="demo-card"></div>
  </div>
</div>

Add the following styling:

// app.component.scss

.animation-demo-container {
    display: flex;
    flex-direction: column;
    border-radius: 0.5rem;
    border-width: 1px;
    border-color: rgb(14 116 144);
    background-color: rgb(30 41 59);
    min-height: 350px;
    .card-container {
        flex-grow: 1;
        padding: 1.25rem;
        .demo-card {
            height: 10rem;
            width: 10rem;
            border-radius: 0.5rem;
            border-width: 1px;
            background-color: rgb(125 211 252);
        }
    }
}

Setup Animation Controls

Add 3 buttons to the template to start a simple animation, a bounce animation, and another button play/pause the animations:

<!-- app.component.html -->
<div class="animation-demo-container">
  <div class="card-container">
    <div #box class="demo-card"></div>
  </div>

  <!-- add the following 👇 -->
  <div class="demo-controller-container">
    <button class="demo-button" (click)="animateDefaultCard()" [disabled]="isAnimating()">Default</button>
    <button class="demo-button" (click)="animateSpringCard()" [disabled]="isAnimating()">Bounce</button>
    @if (isAnimating()) {
      <button class="demo-button" (click)="playPause()">{{
        isPaused() ? 'Play' : 'Pause'
        }}</button>
    }
  </div>
</div>

Add styling to the buttons:

// app.component.scss

.animation-demo-container {
    display: flex;
    flex-direction: column;
    border-radius: 0.5rem;
    border-width: 1px;
    border-color: rgb(14 116 144);
    background-color: rgb(30 41 59);
    min-height: 350px;
    .card-container {
        flex-grow: 1;
        padding: 1.25rem;
        .demo-card {
            height: 10rem;
            width: 10rem;
            border-radius: 0.5rem;
            border-width: 1px;
            background-color: rgb(125 211 252);
        }
    }
    // add the following 👇
    .demo-controller-container {
        display: flex;
        flex-direction: row;
        gap: 0.75rem;
        border-radius: 0 0.5rem 0.5rem 0;
        background-color: rgb(14 116 144);
        padding: 1rem 1.25rem;
        .demo-button {
            border-radius: 0.25rem;
            background-color: rgb(255 255 255);
            padding: 0.5rem 0.75rem;
            font-weight: 500;
        }
    }
}

Add AnimeJS Animation

Start with using the ViewChild decorator to access the target element:

// app.component.ts

// Update this 👇
import { Component, ElementRef, ViewChild } from '@angular/core';

@Component({
  standalone: true,
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {

  // Add this 👇
  @ViewChild('box') box!: ElementRef;

}

Next, add two signal variables - isAnimating and isPaused to track the animation state

// app.component.ts

// Update this 👇
import { Component, ElementRef, signal, ViewChild } from '@angular/core';

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

  // Add this 👇
  isAnimating = signal<boolean>(false)
  isPaused = signal<boolean>(false)
}

Create an _animateCard function that will trigger the AnimeJS animation. This function accepts an easing parameter to set the animation's easing configuration.

// app.component.ts

import { Component, ElementRef, signal, ViewChild } from '@angular/core';

// Add this 👇
import { animate, EasingParam, JSAnimation } from 'animejs';

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

  isAnimating = signal<boolean>(false)
  isPaused = signal<boolean>(false)

  // Add this 👇
  private _animeAnimation: JSAnimation | undefined = undefined

  // Add this 👇
  private _animateCard(ease: EasingParam): void {
    if (this.isAnimating()) {
      return
    }
    this.isAnimating.set(true)
    this.isPaused.set(false)
    this._animeAnimation = animate(this.box.nativeElement, { 
      x: 250,
      duration: 400,
      ease: 'out'
    })
    this._animeAnimation
      .then(() => {
        this._animeAnimation = animate(
          this.box.nativeElement, {
            x: 0,
            duration: 500,
            ease,
          }
        )
        this._animeAnimation
          .then(() => {
            this.isAnimating.set(false)
          })
          .catch(() => {
            this.isAnimating.set(false)
          });
      })
      .catch(() => {
        this.box.nativeElement.x = 0;
        this.isAnimating.set(false)
      });
  }  
}

Create a function to play and pause the animation. This function will perform the checks and set the isAnimating and isPaused variables depending on the current state of the animation. If the animation is playing, it'll enable the ability to pause the animation and if it's not playing, it'll start the animation.

// app.component.ts

import { Component, ElementRef, signal, ViewChild } from '@angular/core';
import { animate, EasingParam, JSAnimation } from 'animejs';

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

  isAnimating = signal<boolean>(false)
  isPaused = signal<boolean>(false)

  private _animeAnimation: JSAnimation | undefined = undefined

  // Add this 👇
  playPause(): void {
    if (!this._animeAnimation) {
      return;
    }
    if (this.isAnimating()) {
      if (this.isPaused()) {
        this._animeAnimation.resume()
        this.isPaused.set(false)
      } else {
        this._animeAnimation.pause()
        this.isPaused.set(true)
      }
    }
  }

  private _animateCard(ease: EasingParam): void {
    if (this.isAnimating()) {
      return
    }
    this.isAnimating.set(true)
    this.isPaused.set(false)
    this._animeAnimation = animate(this.box.nativeElement, { 
      x: 250,
      duration: 400,
      ease: 'out'
    })
    this._animeAnimation
      .then(() => {
        this._animeAnimation = animate(
          this.box.nativeElement, {
            x: 0,
            duration: 500,
            ease,
          }
        )
        this._animeAnimation
          .then(() => {
            this.isAnimating.set(false)
          })
          .catch(() => {
            this.isAnimating.set(false)
          });
      })
      .catch(() => {
        this.box.nativeElement.x = 0;
        this.isAnimating.set(false)
      });
  }  
}

Lastly, add the animateDefaultCard and animateSpringCard functions that will call the _animateCard function with their respective easing configuration.

// app.component.ts

import { Component, ElementRef, signal, ViewChild } from '@angular/core';
import { animate, EasingParam, JSAnimation } from 'animejs';

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

  isAnimating = signal<boolean>(false)
  isPaused = signal<boolean>(false)

  private _animeAnimation: JSAnimation | undefined = undefined

  // Add this 👇
  animateDefaultCard(): void {
    this._animateCard('easeInOut');
  }

    // Add this 👇
  animateSpringCard(): void {
    this._animateCard('outBounce');
  }

  playPause(): void {
    if (!this._animeAnimation) {
      return;
    }
    if (this.isAnimating()) {
      if (this.isPaused()) {
        this._animeAnimation.resume()
        this.isPaused.set(false)
      } else {
        this._animeAnimation.pause()
        this.isPaused.set(true)
      }
    }
  }

  private _animateCard(ease: EasingParam): void {
    if (this.isAnimating()) {
      return
    }
    this.isAnimating.set(true)
    this.isPaused.set(false)
    this._animeAnimation = animate(this.box.nativeElement, { 
      x: 250,
      duration: 400,
      ease: 'out'
    })
    this._animeAnimation
      .then(() => {
        this._animeAnimation = animate(
          this.box.nativeElement, {
            x: 0,
            duration: 500,
            ease,
          }
        )
        this._animeAnimation
          .then(() => {
            this.isAnimating.set(false)
          })
          .catch(() => {
            this.isAnimating.set(false)
          });
      })
      .catch(() => {
        this.box.nativeElement.x = 0;
        this.isAnimating.set(false)
      });
  }  
}

Conclusion

This approach offers a powerful alternative to the @angular/animations package, giving you precise control over animation properties, timing, and easing. The example we walked through is just a starting point. The library's versatility opens up possibilities for complex, choreographed sequences. Try experimenting with different properties and easing functions to bring your UI to life!

Try it yourself! A live demo and more examples with other libraries are available in the Angular Animation Explorer.

Dynamic Island Animations with Popmotion in Angular

William Juan — Mon, 26 Sep 2022 06:03:41 +0000

The introduction of dynamic islands in iPhone 14 piqued the interest of many designers and developers - coming up with creative ways to utilize the shape-shifting bubble. Below are a few examples of the creative ways others have used this new feature.

// Detect dark theme var iframe = document.getElementById('tweet-1573736787855478784-200'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1573736787855478784&theme=dark" }

// Detect dark theme var iframe = document.getElementById('tweet-1570795751764295682-988'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1570795751764295682&theme=dark" }

// Detect dark theme var iframe = document.getElementById('tweet-1572429905220050944-411'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1572429905220050944&theme=dark" }

Most of the iOS implementations you see online use a morphing technique called metaballs. With metaballs, an element will start to stretch towards each other as the objects get closer to each other. The image below shows the difference between the default behavior and when using the metaballs morphing technique when two elements are close to each other.

We will not be implementing this technique in this tutorial. We'll stick to the basics of transforming the element from the default dynamic island to a bigger container with additional contents. Let me know in the comments if you are interested in a more advanced tutorial covering how to create this animation using metaballs.

This blog post will walk you through creating a dynamic island-style animations in your Angular applications. We'll be creating the following animation in an Angular application with the help of Popmotion and Angular Animations.

Prerequisite

To follow along, create a new Angular application by running the following command:

ng new dynamic-island --routing --style=scss

If you are new to Angular, follow the Getting Started guide to set up your local dev environment.

Popmotion

Popmotion is a JavaScript animation library that supports keyframes, spring, and inertia animations. Install PopMotion dependencies by running the following command:

npm i --save popmotion

We'll also be using Stylefire to apply dynamic styles to our target element and access the target element's current styles. Install Stylefire dependencies by running the following command:

npm i --save stylefire

Ionic (Optional)

We'll use Ionic components to create the progress bar and IonIcons for our control buttons. This step is optional. You can use the default HTML progress bar or other icon libraries for your application.

To use Ionic in your Angular applications, install Ionic dependencies by running the following command:

ng add @ionic/angular

Install IonIcons dependencies by running the following command:

npm i --save ionicons

Setup

For simplicity, we'll create the animations in the default AppComponent.

Let's start with creating our template for the dynamic island. Open app.component.html and add the following 👇

<!-- src/app/app.component.html -->

<ion-content [fullscreen]="true">

  <div class="dynamic-island-container">

    <div class="dynamic-island">
    </div>
  </div>
</ion-content>

Next, add some styling to our container and the dynamic island element. Open app.component.scss and add the following 👇

// src/app/app.component.scss

ion-content {
  --background: linear-gradient(to top right, #09033D, #276176);
}
.dynamic-island-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 11px;
  .dynamic-island {
    width: 126px;
    height: 37.33px;
    border-radius: 18.67px;
    background-color: #222329;
  }
}

Checkpoint: Run ng serve and open http://localhost:4200 in your browser. You should see a dynamic island at the top of your page like this:

Dynamic Island Animation

We'll use Popmotion to expand the dynamic island from its default state to its enlarged state. First, we'll need to assign an id to our dynamic island element. We'll also add a click event handler on the dynamic island to toggle between its default and opened state. Open app.component.html and add the following code 👇

<!-- src/app/app.component.html -->

<ion-content [fullscreen]="true">

  <div class="dynamic-island-container">

    <!-- Update this 👇 -->
    <div #dynamicIsland class="dynamic-island" (click)="toggleDynamicIsland()">
    </div>
  </div>
</ion-content>

Next, use the ViewChild decorator to access the dynamic island element. Let's also create the toggleDynamicIsland function and add a variable to track the current state of the dynamic island. Open app.component.ts and add the following code 👇

// src/app/app.component.ts

// Update this 👇
import { Component, ElementRef, ViewChild } from '@angular/core';

@Component({
  selector: 'app-dynamic-island-popmotion',
  templateUrl: 'dynamic-island-popmotion.page.html',
  styleUrls: ['dynamic-island-popmotion.page.scss'],
})
export class DynamicIslandPopmotionPage {

  // Add this 👇
  @ViewChild('dynamicIsland') dynamicIsland: ElementRef;
  dynamicIslandIsOpen = false;

  // Add this 👇
  toggleDynamicIsland(): void {
    if (this.dynamicIslandIsOpen) {
        this.dynamicIslandIsOpen = false;
    } else {
        this.dynamicIslandIsOpen = true;
    }
  }

}

Use the styler function from stylefire to access the default dimensions of the dynamic island in the component's AfterViewInit hook. We'll assign this to a variable so we can use it in our open and close animations later.

// src/app/app.component.ts

import { Component, ElementRef, ViewChild } from '@angular/core';

// Add this 👇
import styler, { Styler } from 'stylefire';

@Component({
  selector: 'app-dynamic-island-popmotion',
  templateUrl: 'dynamic-island-popmotion.page.html',
  styleUrls: ['dynamic-island-popmotion.page.scss'],
})
export class DynamicIslandPopmotionPage {

  @ViewChild('dynamicIsland') dynamicIsland: ElementRef;
  dynamicIslandIsOpen = false;

  // Add this 👇
  private styler: Styler;
  private defaultDimensions; 

  // Add this 👇
  ngAfterViewInit(): void {
    this.styler = styler(this.dynamicIsland.nativeElement);
    this.defaultDimensions = {
      borderRadius: this.styler.get('borderRadius'),
      width: this.styler.get('width'),
      height: this.styler.get('height'),
    }
  }

  toggleDynamicIsland(): void {
    if (this.dynamicIslandIsOpen) {
      this.dynamicIslandIsOpen = false;
    } else {
      this.dynamicIslandIsOpen = true;
    }
  }

}

Import Popmotion's animate function and create two functions - closeDynamicIsland and openDynamicIsland to close and open the dynamic islands. We'll use the styler defined previously to set the style of the dynamic island in Popmotion's onUpdate callback.

// src/app/app.component.ts

// Update this 👇
import { Component, ElementRef, NgZone, ViewChild } from '@angular/core';
// Add this 👇
import { animate as PopmotionAnimate } from 'popmotion';
import styler, { Styler } from 'stylefire';

@Component({
  selector: 'app-dynamic-island-popmotion',
  templateUrl: 'dynamic-island-popmotion.page.html',
  styleUrls: ['dynamic-island-popmotion.page.scss'],
})
export class DynamicIslandPopmotionPage {

  @ViewChild('dynamicIsland') dynamicIsland: ElementRef;
  dynamicIslandIsOpen = false;

  private styler: Styler;
  private defaultDimensions; 

  // Add this 👇
  constructor(private ngZone: NgZone) {}

  ngAfterViewInit(): void {
    this.styler = styler(this.dynamicIsland.nativeElement);
    this.defaultDimensions = {
      borderRadius: this.styler.get('borderRadius'),
      width: this.styler.get('width'),
      height: this.styler.get('height'),
    }
  }

  // Update this 👇
  toggleDynamicIsland(): void {
    if (this.dynamicIslandIsOpen) {
      this.dynamicIslandIsOpen = false
      this.closeDynamicIsland().then(() => {
      })
    } else {
      this.openDynamicIsland().then(() => {
        this.dynamicIslandIsOpen = true
      })
    }
  }

  // Add this 👇
  openDynamicIsland(): Promise<void> {
    return new Promise<void>((resolve) => {
      this.ngZone.runOutsideAngular(() => {
        PopmotionAnimate({
          from: JSON.stringify(this.defaultDimensions),
          to: JSON.stringify({ borderRadius: 25, width: 400, height: 150 }),
          duration: 600,
          type: 'spring',
          onUpdate: (latest) => {
            const latestFormatted = JSON.parse(latest);
            this.styler.set('borderRadius', `${latestFormatted.borderRadius}px`);
            this.styler.set('width', `${latestFormatted.width}px`);
            this.styler.set('height', `${latestFormatted.height}px`);
          },
          onComplete: () => {
            resolve();
          }
        });
      });
    })
  }

  // Add this 👇
  closeDynamicIsland(): Promise<void> {
    return new Promise<void>((resolve) => {
      this.ngZone.runOutsideAngular(() => {
        PopmotionAnimate({
          from: JSON.stringify(
            {borderRadius: this.styler.get('borderRadius'),
            width: this.styler.get('width'),
            height: this.styler.get('height'),}
          ),
          to: JSON.stringify(this.defaultDimensions),
          duration: 600,
          type: 'spring',
          onUpdate: (latest) => {
            const latestFormatted = JSON.parse(latest);
            this.styler.set('borderRadius', `${latestFormatted.borderRadius}px`);
            this.styler.set('width', `${latestFormatted.width}px`);
            this.styler.set('height', `${latestFormatted.height}px`);
          },
          onComplete: () => {
            resolve();
          }
        });
      });
    })
  }

}

Call Popmotion's animate function outside of Angular's zone by wrapping it inside NgZone's runOutsideAngular function. This will escape Angular's zone and skips triggering Angular change-detection while executing the animation.

Checkpoint: Run ng serve and open http://localhost:4200 in your browser. Click on the dynamic island and you should see it expand. Clicking it again should animate the dynamic island back to its original state.

Dynamic Island Expanded Contents

Open app.component.html and add the following code to create the expanded dynamic island's contents 👇

<!-- src/app/app.component.html -->
<ion-content [fullscreen]="true">

  <div class="dynamic-island-container">

    <div #dynamicIsland class="dynamic-island" (click)="toggleDynamicIsland()">
      <!-- Add this 👇 -->
      <ng-container *ngIf="dynamicIslandIsOpen">
        <div class="dynamic-island-contents-container">
          <div class="info-container">
            <img src="https://avatars.githubusercontent.com/u/80924473?s=200&v=4"/>
            <div class="texts-container">
              <span class="playlist">This is Angular</span>
              <span class="title">Animations are pretty cool</span>
            </div>
          </div>

          <div class="progress-container">
            <span>3:20</span>
            <ion-progress-bar mode="ios" value="0.7"></ion-progress-bar>
            <span>-1:30</span>
          </div>

          <div class="controls-container">
            <ion-icon name="play-back"></ion-icon>
            <ion-icon name="play"></ion-icon>
            <ion-icon name="play-forward"></ion-icon>
          </div>

        </div>
      </ng-container>
    </div>
  </div>
</ion-content>

Let's also add some styling to the dynamic island's contents. Open app.component.scss and add the following 👇

// src/app/app.component.scss


ion-content {
  --background: linear-gradient(to top right, #09033D, #276176);
}
.dynamic-island-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 11px;
  .dynamic-island {
    width: 126px;
    height: 37.33px;
    border-radius: 18.67px;
    background-color: #222329;

    // Add this 👇
    .dynamic-island-contents-container {
      display: flex;
      flex-direction: column;
      height: 100%;
      padding: 15px;
      .info-container {
        display: flex;
        flex-direction: row;
        img {
          background-color: #fff;
          width: 50px;
          height: 50px;
          border-radius: 10px;
        }
        .texts-container {
          display: flex;
          flex-direction: column;
          margin-left: 10px;
          align-self: center;
          span {
            &.playlist {
              font-size: 0.7rem;
              color: #999;
            }
            &.title {
              font-size: 1rem;
              font-weight: 500;
              color: #fff;
              margin-top: 2px;
            }
          }
        }
      }

      .progress-container {
        display: flex;
        flex-direction: row;
        align-items: center;
        padding: 10px 0;
        ion-progress-bar {
          height: 3px;
          flex-grow: 1;
          margin: 0 5px;
          --background: #555;
          --progress-background: #fff;
        }

        span {
          font-size: 0.7rem;
          color: #888;
        }
      }
      .controls-container {
        display: flex;
        flex-direction: row;
        align-self: center;
        ion-icon {
          color: #fff;
          margin: 0 10px;
          font-size: 2rem;
        }
      }
    }
  }
}

Checkpoint: Run ng serve and open http://localhost:4200 in your browser. Click on the dynamic island and you should see it expand, displaying additional content. Clicking it again should animate the dynamic island back to its original state.

Dynamic Island Content Animation

We'll use Angular Animations to create a stagger animation for the dynamic island's contents. Instead of rendering the contents immediately, the contents will slide up and fade in one after the other.

Open app.component.ts and add the animation definitions in the animations array inside the Component decorator 👇

// src/app/app.component.ts

import { Component, ElementRef, NgZone, ViewChild } from '@angular/core';

// Add this 👇
import { trigger, transition, style, animate, query, stagger } from '@angular/animations';
import { animate as PopmotionAnimate } from 'popmotion';
import styler, { Styler } from 'stylefire';

@Component({
  selector: 'app-dynamic-island-popmotion',
  templateUrl: 'dynamic-island-popmotion.page.html',
  styleUrls: ['dynamic-island-popmotion.page.scss'],
  // Add this 👇
  animations: [
    trigger('fadeSlideInOut', [
      transition(':enter', [
        query(':enter', [
          style({ opacity: 0, transform: 'translateY(30px)' }),
          stagger('50ms', [
            animate(
              '400ms cubic-bezier(0.17, 0.89, 0.24, 1.11)',
              style({ opacity: 1, transform: 'translateY(0)' }),
              )
          ])
        ])
      ])
    ]),

  ]
})
export class DynamicIslandPopmotionPage {

  @ViewChild('dynamicIsland') dynamicIsland: ElementRef;
  dynamicIslandIsOpen = false;

  private styler: Styler;
  private defaultDimensions; 

  constructor(private ngZone: NgZone) {}

  ngAfterViewInit(): void {
    this.styler = styler(this.dynamicIsland.nativeElement);
    this.defaultDimensions = {
      borderRadius: this.styler.get('borderRadius'),
      width: this.styler.get('width'),
      height: this.styler.get('height'),
    }
  }

  toggleDynamicIsland(): void {
    if (this.dynamicIslandIsOpen) {
      this.dynamicIslandIsOpen = false
      this.closeDynamicIsland().then(() => {
      })
    } else {
      this.openDynamicIsland().then(() => {
        this.dynamicIslandIsOpen = true
      })
    }
  }

  openDynamicIsland(): Promise<void> {
    return new Promise<void>((resolve) => {
      this.ngZone.runOutsideAngular(() => {
        PopmotionAnimate({
          from: JSON.stringify(this.defaultDimensions),
          to: JSON.stringify({ borderRadius: 25, width: 400, height: 150 }),
          duration: 600,
          type: 'spring',
          onUpdate: (latest) => {
            const latestFormatted = JSON.parse(latest);
            this.styler.set('borderRadius', `${latestFormatted.borderRadius}px`);
            this.styler.set('width', `${latestFormatted.width}px`);
            this.styler.set('height', `${latestFormatted.height}px`);
          },
          onComplete: () => {
            resolve();
          }
        });
      });
    })
  }

  closeDynamicIsland(): Promise<void> {
    return new Promise<void>((resolve) => {
      this.ngZone.runOutsideAngular(() => {
        PopmotionAnimate({
          from: JSON.stringify(
            {borderRadius: this.styler.get('borderRadius'),
            width: this.styler.get('width'),
            height: this.styler.get('height'),}
          ),
          to: JSON.stringify(this.defaultDimensions),
          duration: 600,
          type: 'spring',
          onUpdate: (latest) => {
            const latestFormatted = JSON.parse(latest);
            this.styler.set('borderRadius', `${latestFormatted.borderRadius}px`);
            this.styler.set('width', `${latestFormatted.width}px`);
            this.styler.set('height', `${latestFormatted.height}px`);
          },
          onComplete: () => {
            resolve();
          }
        });
      });
    })
  }


}

Finally, add the animation trigger (fadeSlideInOut) to the target element and add *ngIf="true" to its direct children to create a staggering animation effect. Open app.component.html and add the following code 👇

<!-- src/app/app.component.html -->

<ion-content [fullscreen]="true">

  <div class="dynamic-island-container">

    <div #dynamicIsland class="dynamic-island" (click)="toggleDynamicIsland()">
      <ng-container *ngIf="dynamicIslandIsOpen">
        <!-- Update this 👇 -->
        <div @fadeSlideInOut class="dynamic-island-contents-container">

          <!-- Update this 👇 -->
          <div *ngIf="true" class="info-container">
            <img src="https://avatars.githubusercontent.com/u/80924473?s=200&v=4"/>
            <div class="texts-container">
              <span class="playlist">This is Angular</span>
              <span class="title">Animations are pretty cool</span>
            </div>
          </div>

          <!-- Update this 👇 -->
          <div *ngIf="true" class="progress-container">
            <span>3:20</span>
            <ion-progress-bar mode="ios" value="0.7"></ion-progress-bar>
            <span>-1:30</span>
          </div>

          <!-- Update this 👇 -->
          <div *ngIf="true" class="controls-container">
            <ion-icon name="play-back"></ion-icon>
            <ion-icon name="play"></ion-icon>
            <ion-icon name="play-forward"></ion-icon>
          </div>

        </div>
      </ng-container>
    </div>
  </div>
</ion-content>

Checkpoint: Run ng serve and open http://localhost:4200 in your browser. Click on the dynamic island and you should see it expand, animating the additional content as they enter the DOM. Clicking it again should hide the additional content and animate the dynamic island back to its original state.

Wrapping up

The techniques covered in this blog post to create a dynamic island animation can also be applied in other contexts. For example, the same technique can be used to create an animation where a fab button expands into a full page modal when clicked. You can get creative with morphing animations and I think we'll be seeing a lot more of these types of animations as we get more accustomed to Apple's dynamic island interactions. Play around with this technique and I would love to see what you come up with!

If you are interested in more content like this or have any questions, let me know in the comments or tweet me at @williamjuan27.

CSS Animation Events in Angular

William Juan — Fri, 18 Mar 2022 01:51:18 +0000

CSS animations emit events that we can listen to using Javascript. There are slight differences in how we attach event listeners between a vanilla project and an Angular project. Let's start with the list of available events.

animationstart - Emitted when the animation starts
animationend - Emitted when the animation completes
animationiteration - Emitted when an iteration of animation ends and another one begins. This event only fires for the n - 1 iteration - the last iteration of animation will fire the animationend event instead.

Notice that the event names are all in lowercase and not camel-case

General Usage

To listen to these events, we will need to attach an event listener to the element with the transition using addEventListener. addEventListener is a global event listener not specific to just animations or transitions. We can then pass any of the events from the list of available events to listen to any of them.

Approach 1: Using `addEventListener`

The regular Javascript approach functions the same way in an Angular project. The only difference between their usage is how Angular accesses the target element. Instead of accessing the target element using getViewById, we can use Angular's ViewChild decorator.

<!-- src/app/app.component.html -->

<div #targetElement></div>

// src/app/app.component.ts

import { Component, ViewChild, ElementRef } from '@angular/core';

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

After getting the reference to the target element, we can attach an event listener using the addEventListener function.

// src/app/app.component.ts

import { Component, ViewChild, ElementRef } from '@angular/core';

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

 ngAfterViewInit(): void {
    this.listenToAnimationStart();
    this.listenToAnimationEnd();
    this.listenToAnimationIteration();
  }

  ngOnDestroy(): void {
     this.targetElement.nativeElement.removeEventListener('animationstart');
     this.targetElement.nativeElement.removeEventListener('animationend');
     this.targetElement.nativeElement.removeEventListener('animationiteration');
  }

  listenToAnimationStart(): void {
     this.targetElement.nativeElement.addEventListener('animationstart', () => {
        console.log('animation started');
     })
  }

  listenToAnimationEnd(): void {
     this.targetElement.nativeElement.addEventListener('animationend', () => {
        console.log('animation ended');
     })
  }

  listenToAnimationIteration(): void {
     this.targetElement.nativeElement.addEventListener('animationiteration', () => {
        console.log('animation iteration');
     })
  }
}

With this approach, we would also need to make sure that we are cleaning up the event listeners after the component is destroyed to avoid memory leaks (See ngOnDestroy in the code above).

Approach 2: Using Angular's event listener

Angular also let us handle these types of events directly in our template. This reduces the amount of boilerplate and manual clean-up that we would need to do.

Let's convert the event listener from the previous approach. Instead of giving the element an id, we'll directly add the event names enclosed in parentheses and bind it to a function that will be called when the event is fired.

<!-- src/app/app.component.html -->
<div
  (animationstart)="onAnimationStart()"
  (animationend)="onAnimationEnd()"
  (animationiteration)="onAnimationInteration()"
></div>

In our component file, add the onAnimationStart, onAnimationEnd, and onAnimationInteration functions.

// src/app/app.component.ts

import { Component } from '@angular/core';

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

  onAnimationStart(): void {
      console.log('animation started');
  }

  onAnimationEnd(): void {
     console.log('animation ended');
  }

  onAnimationInteration(): void {
    console.log('animation iteration');
  }
}

Wrapping Up

Both approaches have their pros and cons. Although the first approach (addEventListener) is more verbose, it does come with some additional functionalities by letting us pass options to configure how the event listener works. It provides more control of the phase when the listener is activated. This combined with rxjs observables gives us even more control if we need to combine multiple event sources.

If you are interested in more content like this or have any questions, let me know in the comments or tweet me at @williamjuan27

Animate your Angular App using Motion One

William Juan — Thu, 18 Nov 2021 14:07:19 +0000

Motion One is a new animation library built on the Web Animations API. If you have used Popmotion or Greensock before, this library's syntax should look very familiar.

In this blog post, I will show you how to use Motion One in an Angular application. I will walk you through the installation process, create a simple animation, and use Motion One's spring and timeline features.

Check out a live demo I've created that you can interact with as part of my Angular Animation Explorer.

Get Started

First, we will need to add Motion One's dependency via npm using the following command.

npm install --save motion

If you run into any typings issue from the library, try adding skipLibCheck: true to your tsconfig.json.

Basic Animation using Motion One

To animate an element from your template, you will need to give it an id so you can access them from your Typescript file.

<div #myElement>...</div>

You can then use Angular's ViewChild decorator to access the element defined above.

import { Component, ViewChild, ElementRef } from '@angular/core';

@Component({
  ...
})
export class MotionOneDemoComponent {
  @ViewChild('myElement') myElement: ElementRef;

}

Now that we have access to your element, you can use Motion One's animation APIs to animate your element.

import { Component, ViewChild, ElementRef } from '@angular/core';
import { animate } from 'motion';

@Component({
  ...
})
export class MotionOneDemoComponent {
  @ViewChild('myElement') myElement: ElementRef;

  animateMyElement(): void {
    animate(
      this.myElement.nativeElement,
      { rotate: 180 },
      { duration: 0.5, easing: 'ease-in' }
    ).finished.then(() => {
        // animation completed
      })
      .catch(() => {
        // if an error happens
      });
  }
}

Spring and Glide Animation

Motion One also comes with prebuilt easing such as spring and glide which, you can use by passing in their respective functions with any additional configurations. The snippet below is how you create a basic spring animation using Motion One:

import { Component, ViewChild, ElementRef } from '@angular/core';
import { animate, spring } from 'motion';

@Component({
  ...
})
export class MotionOneDemoComponent {
  @ViewChild('myElement') myElement: ElementRef;

  animateMyElement(): void {
    animate(
      this.myElement.nativeElement,
      { rotate: 180 },
      { duration: 0.5, easing: spring() } // 👈 modify the easing
    ).finished.then(() => {
        // animation completed
      })
      .catch(() => {
        // if an error happens
      });
  }
}

Timeline Animations

Another cool feature from Motion One is its out-of-the-box support of timeline. You can chain your animations and animate different elements all at once by creating an animations array and passing it to the timeline function.

The timeline function works similarly to Greensock's timeline feature. The code snippet below shows how you chain and sequence a translation of a box.

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

@Component({
  ...
})
export class MotionOneDemoComponent {
  @ViewChild('myElement') myElement: ElementRef;

  animateMyElement(): void {
    const sequence = [
      [this.myElement.nativeElement, { x: 100 }, { duration: 0.5 }],
      [this.myElement.nativeElement, { y: 100 }, { duration: 0.5 }],
      [this.myElement.nativeElement, { x: 0, y: 0 }, { duration: 1 }],
    ];
    timeline(sequence)
      .finished.then(() => {
        // animation completed
      })
      .catch(() => {
        // if an error happens
      });
  }
}

Wrapping Up

Motion One is a relatively new animation library compared to other animation libraries out there. However, it is feature-rich, performant, and easy to use. This blog post only covers a small percentage of the library's capabilities. I will be exploring more of Motion One's features in the future and write a follow-up blog post covering more advanced uses of this library.

If you are interested in more content like this or have any questions, let me know in the comments or tweet me at @williamjuan27

Animation Inspector: How DevTools can help when Creating Animations

William Juan — Thu, 14 Oct 2021 11:25:36 +0000

Different browsers come with a different set of dev tools to help developers. When it comes to animations, Chrome and Firefox have an animation inspector in their dev tools specifically for debugging animations. The animation inspector lets you modify the animation on the fly, allowing you to slow down, replay, and inspect and modify the source code of your animation.

Before we dive deeper into what we can do with these tools, let me show you where you can find them. Chrome has the animation inspector option under the more tools submenu option.

Firefox, on the other hand, has the animation inspector under the "Inspector" option, under a tab called "Animations"

At the time this post is written, Chrome only supports CSS animations, CSS transitions, and web animations. You wouldn’t be able to use this if you are using requestAnimationFrame for your animation.

Inspecting your Animation

If you have the animations tab open on your dev tools, you should be seeing blocks of animation groups added to the top as your animation gets triggered on your application. Clicking on the block will open up a more detailed view of the actual animations that are being executed as shown in the images below (Chrome's followed by Firefox's).

Let’s break down the animations tab view further and discuss some of the key features:

Controls - lets you play, pause and modify the speed of the animation
Animation groups - shows the different groups of animations that were executed. The animation inspector groups the animations based on start time (excluding delays) predicting which animations are related to each other. From a code perspective, animations that are triggered in the same script block are grouped.
Scrubber - you can drag the red vertical bar left and right to display the state of the animation at that time in the timeline
Timeline - shows a breakdown of the elements in the DOM that are being animated in the animation group and the timeline for each element’s animation
2 solid circles - these 2 circles mark the beginning and end of the animation. It’s possible to see multiple instances of these for cases where the animation runs for multiple iterations, where these solid circles will mark the start and end of each iteration
Highlighted section - the animation duration
Hollow circle - timing of keyframe rules if the animation defines any

All the components in the timeline for each element can be modified by dragging them horizontally. We can modify the duration by moving the start and end solid circles, add delays by moving the highlighted section and modify keyframe timings by moving the hollow circle. We can then view the updated animation changes by clicking on the replay button to rerun the animation group.

Tweak your Animation's Timing Function using the Bezier Curve Editor

If you are using CSS keyframes in your animation, both Chrome and Firefox's dev tools also have a tool to edit the curves of your animation dynamically using Lea Verou’s cubic-bezier visualization.

This ability to modify the curves dynamically straight in the browser is extremely helpful as you no longer have to go back and forth between your editor and your browser to tweak the bezier curves to get the right timing. After modifying the bezier curve, you can then use the replay button on the animations tab to replay the animation with the updated bezier curve. Access this feature by clicking on the squiggly line icon on the animation property of your element. Below is an image of how to access the bezier curve from your animation (Chrome's followed by Firefox's).

The purple circles attached to the purple lines on the bezier curve editor are draggable vertically and horizontally to edit the curve of the line which in turn will update the cubic-bezier function. You can see a quick visualization of what the timing function looks like from the purple circle towards the top of the popup, showing how the animation will accelerate/decelerate over time.

Wrapping Up

The animation inspector is a powerful tool that can help you when you are creating animations. I oftentimes find myself doing some fine-tuning of animations through the dev tools and copying the code over to my project.

I hope you enjoyed this short post about using Chrome and Firefox's animation inspector. If you are interested in more content like this or have any questions let me know in the comments or tweet me at @williamjuan27

Animate your Angular App using Animate.css

William Juan — Wed, 22 Sep 2021 14:22:17 +0000

Most of you probably have heard of Animate.css. It is an open-source CSS animation library with lots of predefined animations.

Animate.css groups their animations into categories such as entrances, exits, and attention seekers, each addressing a different use case. In addition, this library also lets us pass in flags to further customize their library of animations. These customizations include animation timing, delay, and iterations.

Instead of discussing the general usage of Animate.css, I'm going to focus on how you can use this library in your Angular application along with some tips and tricks I've learned using this library.

For those of you who are interested in the demo and going straight to the source code. You can check those out here

Installation

Add Animate.css's dependency either through the CDN or via npm. I used the CDN for this demo. Add the following code to your index.html

<head>
  ...
  <!-- Animate.css -->
  <link
    rel="stylesheet"
    href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"
  />
</head>

Use Angular's Class Binding

In a plain Javascript application, we would typically add a dynamic class by using the following code:

const element = document.querySelector(".my-element");
element.classList.add("animate__animated", "animate__bounce");

The same could be done entirely in the template using class binding in Angular. To animate an element using Animate.css, we would need to add the class that contains the animation (see here for a list of available classes) along with any static configurations. We can then bind that class to a property that triggers the animation. For example, if we want to trigger a bounce animation when a boolean value of the variable shouldBounce is true, we would bind the animate__bounce class to shouldBounce

<div class="animate__animated" [class.animate__bounce]="shouldBounce"></div>

To customize your animations (timing, delays, iterations, etc.), you can either add these classes directly to the class property of the element if they are static or bind them like the code snippet above if they are dynamic and depend on an external factor.

Adding Javascript into the mix

The approach above works for most cases, however, it doesn't work if we want to trigger the same animation multiple times. For example, clicking on a button to execute the animation, and clicking it again to re-execute the animation.

This is by design, as Animate.css runs an animation by adding a class containing the animation, we wouldn't be able to retrigger the animation if the class is already added to the element. To work around this, we can use the animationend event to listen to when the animation is done executing, and remove the class that was added to trigger the animation. This allows us to add the classes again whenever we want to retrigger the animation.

import { ViewChild, ElementRef } from '@angular/core';

...
export class AnimateStyleComponent {

    @ViewChild('cardContainer') cardContainer: ElementRef;

    bounceCard(): void {
        this._animate('bounce').catch((e) => {
        console.error('Error animating element:', e);
        });
    }

    private _animate(animationName: string, persistClass = false): Promise<void> {
        if (!this.cardContainer || !this.cardContainer.nativeElement) {
        return Promise.reject('element not defined');
        }

        if (this.isAnimating) {
        return Promise.reject('element is animating');
        }
        return new Promise((resolve) => {
        this.isAnimating = true;

        // listen to animationend to allow additional logic to be run
        // after the animation from Animate.css is done executing
        this.cardContainer.nativeElement.addEventListener(
            'animationend',
            (event) => {
            if (event.animationName === animationName) {
                this.isAnimating = false;
                if (!persistClass) {
                this.cardContainer.nativeElement.classList = '';
                }
                resolve();
            }
            },
            { once: true }
        );
        this.cardContainer.nativeElement.classList = `animate__animated animate__${animationName}`;
        });
    }
}

Entrance and Exits

We can also animate entrances and exits by simply attaching the class conditionally.

<div
  class="animate__animated"
  [class.animate__zoomInDown]="isShowing"
  [class.fadeOut]="!isShowing"
></div>

However, the above approach just animates the element in and out of the view, not necessarily removing the element from the DOM like what an *ngIf does.

Let me give you an example of what it looks like if we use an *ngIf and class binding entirely in the template.

<div
  *ngIf="isShowing"
  class="animate__animated"
  [class.animate__zoomInDown]="isShowing"
  [class.fadeOut]="!isShowing"
></div>

The above code results in the following behavior.

Notice that the element only animates in and completely ignores the exit animation. This is expected as the *ngIf directive immediately removes the element once the condition is false without waiting for any animation to complete.

You could remove the *ngIf and this animation would work. However, for certain types of animations, the element could still be left in the DOM and could be blocking the views behind it as it is not removed from the view, merely animated out.

To address this issue, we would need to approach it in a slightly different way, with a little help from Javascript.

To add and remove the element to and from the DOM, there is some additional setup we need to do. First, we will need to use an ng-template to wrap the component that we want to animate so we can add and remove it from the DOM. We'll also set the opacity to 0 to prevent the view from flashing before executing the enter animation. More on this later.

<div #container></div>
  <ng-template #template>
    <!-- set opacity to 0 to prevent flashing before enter animation starts -->
    <div #cardContainer [style.opacity]="0">
      <app-card-demo-sample></app-card-demo-sample>
    </div>
  </ng-template>
</div>

We will then need to access the template reference and its container to conditionally add and remove the template from its parent container.

export class AnimateStyleDemoComponent {
  @ViewChild("container", { read: ViewContainerRef })
  container: ViewContainerRef;
  @ViewChild("cardContainer") cardContainer: ElementRef;
  @ViewChild("template", { read: TemplateRef }) template: TemplateRef<null>;

  private _addCardToView(): Promise<void> {
    return new Promise((resolve) => {
      if (!this.viewRef) {
        this.container.clear();

        // add element to container
        this.viewRef = this.container.createEmbeddedView(this.template);

        // wrap this in a settimeout if it tries to animate before view is loaded
        if (this.cardContainer && this.cardContainer.nativeElement) {
          // set opacity to 1 to make element visible before starting enter animation
          this.renderer.setStyle(
            this.cardContainer.nativeElement,
            "opacity",
            1
          );
        }
        resolve();
        });
      } else {
        resolve();
      }
    });
  }

  private _removeCardFromView(): void {
    this.container.clear();
    if (this.viewRef) {
      this.viewRef.destroy();
      this.viewRef = null;
    }
  }
}

To animate the adding and removing of the element from the DOM, we will chain the adding/removing of the element and the animate function via promises.

For elements entering, add the card to view first, followed by the animate function. On the other hand, elements leaving will execute the animation first, followed by removing the card from view. We can verify this by adding console.log messages in the component being added/removed's ngOnInit and ngOnDestroy to check if these are called as the component is added and destroyed.

export class AnimateStyleDemoComponent {
  private _showCard(): void {
    this._addCardToView().then(() => {
      this._animate("zoomInDown").catch((e) => {
        console.error("Error animating element:", e);
      });
    });
  }

  private _hideCard(): void {
    this._animate("fadeOut", true)
      .then(() => {
        this._removeCardFromView();
      })
      .catch((e) => {
        console.error("Error animating element:", e);
      });
  }
}

Wrapping Up

That's all for now. I'll be adding more posts around different ways to add animations in Angular including Angular Animations, some cool libraries, and some tips and tricks. If you are interested in more content like this or have any questions let me know in the comments or tweet me at @williamjuan27

3 Easy Ways to Add Animation to your Angular Applications

William Juan — Tue, 14 Sep 2021 12:50:18 +0000

Animations add life to your application and can greatly increase your app's overall user experience. Animation is a complex topic and can be intimidating to many. However, adding animations to your Angular apps doesn't have to be difficult. I'm going to show you 3 easy ways you can add animations to your apps along with some additional resources to make the process even easier.

This blog post is meant to be a short introduction to animations for Angular. If you are looking for more advanced content, check out my Indepth Guide to Animation in Angular on indepth.dev or my Angular Animation Explorer project. Those include more advanced use cases and covers topics such as performance, debugging, and more.

CSS Keyframes and Transitions

Since Angular runs on browsers and utilizes HTML and CSS, we can leverage CSS animations in our Angular application the same way a regular non-Angular application would. The animation would be defined in our CSS file either as a transition or keyframes and is triggered by adding the class containing this animation.

Adding an expanding animation via the transition property would look like this:

#targetElement {
  transition: tranform 0.5s;
}

#targetElement.expand {
  transform: scale(1.1);
}

CSS transition is ideal for simple animation that has a from and to state (hence the name - transition)

To use this in our template, we would bind the class expand to a property that will conditionally add and remove the class to trigger the animation defined. Let's add a variable shouldExpand that will be set to true when we want to run the animation. We can use Angular's class binding and set it equal to the variable like this:

<div #targetElement [class.expand]="shouldExpand"></div>

CSS keyframes animation, on the other hand, gives us more granular control over our animation - letting us decide what goes on at each keyframe throughout the animation. This is ideal for creating more complex animations that require intermediate steps within the animation and involves some kind of looping - finite/infinite.

Let's look at the same expand animation example, and transform it from a transition to a keyframe animation:

#targetElement.expand {
  animation: expand 0.5s;
}

@keyframes expand {
  0% {
    transform: scale(1);
  }
  100% {
    transform: scale(1.1);
  }
}

We can then bind the expand class to a variable to conditionally trigger the animation:

<div #targetElement [class.expand]="shouldExpand"></div>

Both transition and keyframe animations also come with events that we can hook into. Depending on which one you use, we can use either animationend or transitionend to listen to the animation end event.

An advantage of this approach is that it lets us utilize any CSS animation library that works off of the same concept of adding and removing classes. Some of the more popular libraries that work this way are animate.css and magic.css. Chris Coyier has an amazing article on CSS Tricks that lists more of these if you are interested.

Web Animation APIs

Web Animation APIs, also known as WAAPI fills the gap between declarative CSS animations and transitions, and dynamic JavaScript animations. At the time this was written, WAAPI is supported by Firefox 48+ and Chrome 36+. It also has a comprehensive and robust polyfill, making it safe to use in production today.

If you've used WAAPI in any Javascript project before, this section is going to look familiar. In plain Javascript, if we want to access an element in the DOM, we would typically give the element an id and use document.getElement.byId with the element's id to get a reference to the element. In Angular, we can use the template reference variable (#) instead and get its reference by using Angular's ViewChild decorator.

Let's first start with creating the div that we will animate and give it a reference variable of targetElement:

<div #targeElement></div>

To access this element, use the ViewChild decorator and pass in the reference variable assigned to our element (#targetElement):

import { ViewChild, ElementRef } from '@angular/core';

@ViewChild('targetElement') targetElement: ElementRef;

To animate this element, call the animate function on the element's nativeElement property and pass in the animation array and the animation timing properties:

startAnimation(): void {
  this.targetElement.nativeElement.animate(this.getShakeAnimation(), this.getShakeAnimationTiming());
}

getShakeAnimation() {
    return [
      { transform: 'rotate(0)' },
      { transform: 'rotate(2deg)' },
      { transform: 'rotate(-2deg)' },
      { transform: 'rotate(0)' },
    ];
  }

getShakeAnimationTiming() {
    return {
      duration: 300,
      iterations: 3,
    };
  }

WAAPI also comes with some handy utility properties and functions that we can use in our Angular application the same way you would do in a regular vanilla application. These include functions to pause, cancel, and reverse the current animation and some event handlers such as oncancel and onfinish. You can read more about these APIs in MDN Web Docs.

Angular Animations

Angular animations (@angular/animations) is a powerful module that comes with Angular which provides a DSL (domain-specific language) for defining web animation sequences for HTML elements as multiple transformations over time. Angular animations use the native Web Animations API, and fall back to CSS keyframes if the Web Animations API is not supported in the user's browser.

Angular animations are based on CSS web transition functionality, which means that anything that can be styled or transformed natively through CSS, can also be styled and transformed using Angular animations. This provides us with animations that have CSS-like performance that fits in nicely with Angular.

Animations using Angular's BrowserAnimationModule go through 4 steps. I like to think of this as being comprised of a series of questions - why, what, where, and how, the answers of which being what governs the animation’s behavior:

Evaluate data binding expression - tells Angular which animation state the host element is assigned to (why)
Data binding target tells Angular which animation target defines CSS styles for the elements state (what)
State tells Angular which CSS styles should be applied to the element (where)
Transition tells Angular how it should apply the specified CSS styles when there is a state change (how)

To use @angular/animations in our application, we will have to import BrowserAnimationsModule and add it to the module's imports array:

import { NgModule } from "@angular/core";
import { BrowserAnimationsModule } from "@angular/platform-browser/animations";

@NgModule({
  imports: [BrowserAnimationsModule],
})
export class AppModule {}

Angular Animations can be used for a lot of different use cases, I use them for entering/leave, state changes, and stagger animations. Let me show you a basic example of what an enter/leave animation looks like.

Define our animations and add them to the animations array in our component decorator:

import { trigger, transition, style, animate } from '@angular/animations';

@Component({
    ...
    animations: [
        trigger('fadeSlideInOut', [
            transition(':enter', [
                style({ opacity: 0, transform: 'translateY(10px)' }),
                animate('500ms', style({ opacity: 1, transform: 'translateY(0)' })),
            ]),
            transition(':leave', [
                animate('500ms', style({ opacity: 0, transform: 'translateY(10px)' })),
            ]),
        ])
    ],
})

We can then use the name of the trigger (fadeSlideInOut in the snippet above) prefixed with the @ symbol in our template to run our animation as the element is being added (:enter block of the animation) and removed (:leave block of the animation) from the DOM.

<div *ngIf="show" @fadeSlideInOut>...</div>

You can learn more about Angular Animations from Angular's official docs or in the basic and advanced section of Angular Animations Explorer

Conclusion

This brings us to the end of the post. I hope you enjoyed this short introduction to animations in Angular. If you want to learn more about each of these, check out this reference, complete with live demos of each technique and more. If you are interested in more content like this or have any questions let me know in the comments or tweet me at @williamjuan27

Create Custom Bottom Sheets in Ionic using CSS Grid and Angular Animations

William Juan — Fri, 09 Jul 2021 05:56:53 +0000

Ionic has a lot of prebuilt components such as ion-modal and ion-action-sheet to layer components on top of the main view. In this post, I will show you another way you could stack your views using CSS Grid and some Angular Animations to create a custom bottom sheet.

See it in action 👇

I showcased this technique in one of the episodes on my Restaurant Speed Code Series on Youtube. You can check out the episode below 👇

For those that prefer going through the source code, check out the repo here

File and Folder Structure

To keep the post more focused, I will skip going over the setup process and jump straight to the areas of the code where this is implemented. These are the list of files from the project (Github repo) that we will be using through the tutorial. Feel free to clone the repo and follow along 🤓

src/app/
|- core
    |- animations
        |- fade.animation.ts
        |- slide.animation.ts
    |- services
        |- layers.service.ts
|- shared
    |- components
        |- layers
            |- food-details-bottomsheet
                |- food-details-bottomsheet.ts | html
|- app.component.ts
|- app.component.html

High-level Concept

If you look closely at the example at the beginning of the tutorial, you'll see that 2 layers are added to the view when the bottom sheet is opened. I will refer to these as the shade layer (the semi-transparent layer that dims the background) and the bottom sheet layer (the actual bottom sheet that gets animated from the bottom).

Here is what the views look like if you look at it from a 3d perspective where the layers are stacked in increasing z-indexes as you move towards the top.

Setting up the main view

There are a few different ways to get this stacking behavior. For this particular use case, I used a CSS grid (via Tailwind CSS). CSS grids, by default, stack the elements on the z-axis if you place them in the same row/column which makes it convenient for creating layers like our shade and bottom sheet layers.

Open up app.component.html and wrap everything inside ion-app with a div with display: grid 👇

<!-- src/app/app.component.html -->

<ion-app>
  <div class="grid grid-rows-1 grid-cols-1">
    <div>
      <ion-router-outlet></ion-router-outlet>
    </div>

    <!-- layers -->
    <div class="z-40">
      <!-- this will be where your layers go -->
    </div>
  </div>
</ion-app>

We will come back and update this after creating the bottom sheet component.

Bottomsheet Component

Let's create a simple bottom sheet component. Since we will be displaying information about food, we'll name it FoodDetailsBottomsheetComponent. Let's also add some hardcoded values that we can use to render in our template.

// src/app/shared/components/layers/food-details-bottomsheet/food-details-bottomsheet.component.ts

import { Component } from "@angular/core";

@Component({
  selector: "app-food-details-bottomsheet",
  templateUrl: "food-details-bottomsheet.component.html",
})
export class FoodDetailsBottomsheetComponent {
  food = {
    name: "Some Fancy Food",
    image: "assets/images/food-avocado.png",
    caption: "Some fancy food caption",
    description: `
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, 
    sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, 
    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.`,
  };

  close(): void {}
}

The template contains three parts - container, shade and a bottomsheet

container - a div that spans the full width and height of its parents that will contain the shade and bottom sheet layers. This container will be another CSS grid to be able to stack the shade and bottom sheet layers on top of each other
shade - a single div that spans the full width and height of the container to dim the background
bottom sheet - another div that will contain the contents of the bottom sheet. This div has the self-end class (translates to align-self: flex-end; in CSS) which aligns it to the bottom of the parent container.

<!-- src/app/shared/components/layers/food-details-bottomsheet/food-details-bottomsheet.component.html -->

<!-- container -->
<div class="h-screen grid grid-rows-1 grid-cols-1">
  <!-- shade -->
  <div
    class="row-start-1 row-span-1 col-start-1 col-span-1 bg-black bg-opacity-50"
    (click)="close()"
  ></div>

  <!-- bottomsheet -->
  <div
    class="row-start-1 row-span-1 col-start-1 col-span-1 z-10 self-end p-5 bg-white rounded-t-xl"
  >
    <p class="text-center text-3xl text-brand-accent font-cursive">
      {{ food?.name }}
    </p>

    <!-- add min height here to prevent view adjusting mid animation when the image loads -->
    <div style="min-height: 190px">
      <ion-img class="mt-5" [src]="food?.image"></ion-img>
    </div>
    <p class="text-center text-xs text-brand-gray-light">{{ food?.caption }}</p>

    <p class="mt-5 font-sans text-sm text-brand-gray-medium">
      {{ food?.description }}
    </p>
  </div>
</div>

Add it to App Component

Now that we have the bottom sheet built out, let's head back to the app.component.html and add the component's selector to the template.

<!-- src/app/app.component.html -->

<ion-app>
  <div class="grid grid-rows-1 grid-cols-1">
    <div>
      <ion-router-outlet></ion-router-outlet>
    </div>

    <!-- layers -->
    <div class="z-40">
      <!--✨ NEW: bottomsheet added here 👇 -->
      <app-food-details-bottomsheet></app-food-details-bottomsheet>
    </div>
  </div>
</ion-app>

If you run the app, you will see the main view of the app covered by the shade and bottom sheet layers (and we don't have any way to dismiss it right now 🤦)

Open and Close via Layers Service

There are also a lot of different ways you can control the opening and closing of the bottom sheet. You could use a state management system like ngrx or ngxs, rxjs's Subject or BehaviorSubject, or even regular variables and function calls. For simplicity, I will be using rxjs's BehaviorSubject to control the opening and close of the bottom sheet.

To do this, we will create a layers.service.ts which will have an openFoodDetailsBottomsheet and a closeFoodDetailsBottomsheet function that we can call from anywhere within the app to open or close the bottom sheet. These functions will then update the layersSource$ BehaviorSubject which can then be used by the bottom sheet to listen for new changes and react accordingly.

// src/app/core/services/layers.service.ts

import { Injectable } from "@angular/core";
import { BehaviorSubject, Observable } from "rxjs";

@Injectable({
  providedIn: "root",
})
export class LayersService {
  private layersSource$ = new BehaviorSubject<Layers>(initialLayers);

  layers$(): Observable<Layers> {
    return this.layersSource$.asObservable();
  }

  openFoodDetailsBottomsheet(): void {
    this.layersSource$.next({
      ...this.getLayersCurrentValue(),
      foodDetailsBottomsheet: true,
    });
  }

  closeFoodDetailsBottomsheet(): void {
    this.layersSource$.next({
      ...this.getLayersCurrentValue(),
      foodDetailsBottomsheet: false,
    });
  }

  private getLayersCurrentValue(): Layers {
    return this.layersSource$.getValue();
  }
}

export interface Layers {
  foodDetailsBottomsheet: boolean;
}

export const initialLayers: Layers = {
  foodDetailsBottomsheet: false,
};

Add Open on Food Card Click

Open src/app/features/lunch/lunch.page.html and add a click event to the div container of app-food-card 👇

<!-- src/app/features/lunc/lunch.page.html -->
...
<ion-content [fullscreen]="true">
  <div class="grid grid-rows-1 grid-cols-1">
    <div
      class="row-start-1 row-span-1 col-start-1 col-span-1 bg-white p-1 mt-12"
      @staggerFade
    >
      <ng-container *ngFor="let food of foodOptions">
        <!--✨ NEW: click event added here 👇 -->
        <div (click)="openFoodDetailsBottomsheet()">
          <app-food-card [food]="food"></app-food-card>
        </div>
      </ng-container>
    </div>
    <div
      class="fixed w-full row-start-1 row-span-1 col-start-1 col-span-1 z-40"
    >
      <app-options-drawer></app-options-drawer>
    </div>
  </div>
</ion-content>

Open src/app/features/lunch/lunch.page.ts and inject the layers service we created in the previous section. We will then need to call layer service's openFoodDetailsBottomsheet in our click event listener 👇

// src/app/features/lunc/lunch.page.ts

import { Component } from '@angular/core';
import {
  LayersService,
  NavigationService,
  staggerFadeAnimation,
} from '@app/core';
import { IFoodCard } from '@app/shared';

@Component({
  selector: 'app-lunch',
  templateUrl: 'lunch.page.html',
  styleUrls: ['lunch.page.scss'],
  animations: [staggerFadeAnimation],
})
export class LunchPage {

  ...

  constructor(
    private navigationService: NavigationService,
    // ✨ NEW: layers service injected here 👇
    private layersService: LayersService
  ) {}

  back(): void {
    this.navigationService.back();
  }

    // ✨ NEW: click event listener added here 👇
  openFoodDetailsBottomsheet(): void {
    this.layersService.openFoodDetailsBottomsheet();
  }
}

Add Close on Shade Layer Click

Similarly, we will need to add click event listeners and wire them up to close the bottom sheet when we click on the shade layer.

<!-- src/app/shared/components/layers/food-details-bottomsheet/food-details-bottomsheet.component.html -->
<div class="h-screen grid grid-rows-1 grid-cols-1">
  <!--✨ NEW: click event added here 👇 -->
  <div
    class="row-start-1 row-span-1 col-start-1 col-span-1 bg-black bg-opacity-50"
    (click)="close()"
  ></div>

  ...
</div>

// src/app/shared/components/layers/food-details-bottomsheet/food-details-bottomsheet.component.ts

import { Component } from "@angular/core";
import { LayersService } from "@app/core";

@Component({
  selector: "app-food-details-bottomsheet",
  templateUrl: "food-details-bottomsheet.component.html",
})
export class FoodDetailsBottomsheetComponent {
  // ✨ NEW: layers service injected here 👇
  constructor(private layersService: LayersService) {}

  // ✨ NEW: close bottomsheed 👇
  close(): void {
    this.layersService.closeFoodDetailsBottomsheet();
  }
}

Open and Close Event Listeners

Now that we have the open and close triggers, all that is left is to listen to these events and display and hide the bottom sheet accordingly. We will add an isOpen$ observable that maps the layers service's layers$ observable to listen to only changes in the foodDetailsBottomsheet property.

// src/app/shared/components/layers/food-details-bottomsheet/food-details-bottomsheet.component.ts

import { Component } from '@angular/core';
import { map, distinctUntilChanged } from 'rxjs/operators';
import { LayersService } from '@app/core';

@Component({
  selector: 'app-food-details-bottomsheet',
  templateUrl: 'food-details-bottomsheet.component.html',
})
export class FoodDetailsBottomsheetComponent {
    // ✨ NEW: isOpen listener 👇
    isOpen$ = this.layersService.layers$().pipe(
        map((layers) => layers.foodDetailsBottomsheet),
        distinctUntilChanged()
    );

    ...
}

We can then bind the isOpen$ variable to our template using an async pipe and conditionally display our component's outermost container using an *ngIf

<!-- src/app/shared/components/layers/food-details-bottomsheet/food-details-bottomsheet.component.html -->

<!-- ✨ NEW: *ngIf -->
<div *ngIf="isOpen$ | async" class="h-screen grid grid-rows-1 grid-cols-1">
  <!-- shade -->
  <div
    class="row-start-1 row-span-1 col-start-1 col-span-1 bg-black bg-opacity-50"
    (click)="close()"
  ></div>
  ...
</div>

Add Animations

We will be adding two different sets of animations for displaying and hiding the bottom sheet. A fade in and fade out for the shade layer, and a slide up and slide down for the bottom sheet.

Since these animations get triggered as elements get added and removed from the DOM, we can utilize Angular Animation's :enter and :leave transitions.

For more information on Angular Animations and how it works, you can check out their official docs or a reference I created with live examples 🤓

Fade Animation

// src/app/core/animations/fade.animation.ts

import { trigger, transition, style, animate } from "@angular/animations";

export const fadeAnimation = trigger("fade", [
  transition(":enter", [
    style({ opacity: 0 }),
    animate("300ms", style({ opacity: 1 })),
  ]),
  transition(":leave", [animate("300ms", style({ opacity: 0 }))]),
]);

Slide Animation

// src/app/core/animations/slide.animation.ts

import { trigger, transition, style, animate } from "@angular/animations";

export const slideUpAnimation = trigger("slideUp", [
  transition(":enter", [
    style({ transform: "translate(0,500px)" }),
    animate(
      "350ms cubic-bezier(0.17, 0.89, 0.24, 1.11)",
      style({ transform: "translate(0,0)" })
    ),
  ]),
  transition(":leave", [
    animate("300ms ease-in-out", style({ transform: "translate(0,500px)" })),
  ]),
]);

Wire up our Bottomsheet Component

To use the animations we created in the previous sections, we will need to import the animation in our component and add it to the animations array in our Component decorator.

// src/app/shared/components/layers/food-details-bottomsheet/food-details-bottomsheet.component.ts

import { fadeAnimation, LayersService, slideUpAnimation } from '@app/core';

@Component({
  selector: 'app-food-details-bottomsheet',
  templateUrl: 'food-details-bottomsheet.component.html',
  // ✨ NEW: animations array 👇
  animations: [
    fadeAnimation,
    slideUpAnimation,
  ],
})
export class FoodDetailsBottomsheetComponent {
    ...
}

We can then add the animations using their trigger names prefixed with the @ symbol to our UI elements.

<!-- src/app/shared/components/layers/food-details-bottomsheet/food-details-bottomsheet.component.html -->
<div *ngIf="isOpen$ | async" class="h-screen grid grid-rows-1 grid-cols-1">
  <!-- shade -->
  <!-- ✨ NEW: @fade 👇-->
  <div
    @fade
    class="row-start-1 row-span-1 col-start-1 col-span-1 bg-black bg-opacity-50"
    (click)="close()"
  ></div>

  <!-- bottomsheet -->
  <!-- ✨ NEW: @slideUp 👇-->
  <div
    @slideUp
    class="row-start-1 row-span-1 col-start-1 col-span-1 z-10 self-end p-5 bg-white rounded-t-xl"
  >
    ...
  </div>
</div>

Awesome! Let's try opening and closing the bottom sheet. It's animating! But wait, it's only animating when it is being opened, not when it's getting closed. This is expected behavior since the *ngIf is applied to the parent of the elements with the animation directives. In other words, when the parent is added to the DOM, the children will be added as well, which triggers the enter animation. However, when the parent is removed from the DOM, it doesn't know about the children having an animation that needs to be executed before removing them from the DOM, hence causing those animations to get skipped.

We can fix this by adding an animation directive on the parent that queries the children and executes animateChild. This causes the parent to wait until the children are done executing their animation before removing them from the DOM

<!-- src/app/shared/components/layers/food-details-bottomsheet/food-details-bottomsheet.component.html -->

<!-- ✨ NEW: @container 👇-->
<div
  *ngIf="isOpen$ | async"
  @container
  class="h-screen grid grid-rows-1 grid-cols-1"
>
  ...
</div>

// src/app/shared/components/layers/food-details-bottomsheet/food-details-bottomsheet.component.ts

import {
  animate,
  animateChild,
  query,
  style,
  transition,
  trigger,
} from '@angular/animations';

@Component({
  selector: 'app-food-details-bottomsheet',
  templateUrl: 'food-details-bottomsheet.component.html',
  animations: [
    fadeAnimation,
    slideUpAnimation,
    // ✨ NEW: container 👇
    trigger('container', [
      transition(':enter, :leave', [
        query('@*', animateChild(), { optional: true }),
      ]),
    ]),
  ],
})

Conclusion

This brings us to the end of the tutorial. I hope you enjoyed that. If you are interested in more content like this or have any questions let me know in the comments or tweet me at @williamjuan27

Speed Code: Movies App UI with Nativescript and Angular

William Juan — Mon, 29 Mar 2021 00:01:22 +0000

I started a new series on Youtube where I record my process of building Mobile App UIs, focussing on the visual parts of the App. The current series is using Nativescript and Angular to build a hybrid App.

Here is a short gif of what the App looks like so far

Check out the full videos below 👇

Part 1: Pages and Layouts

Part 2: Drawers, Bottomsheets, and Animations

If you liked the videos you can subscribe to my channel for more videos, or follow me on twitter, where I post more or less the same kind of things 😀

Let me know what you think. What features you want to see implemented next, a new design or different tech stack you want me to try out. Either way, let me know your thoughts 😀😀

DEV Community: William Juan

Bring Your Angular App to Life with Anime.js

Setup Element to Animate

Setup Animation Controls

Add AnimeJS Animation

Conclusion

Dynamic Island Animations with Popmotion in Angular

Prerequisite

Popmotion

Ionic (Optional)

Setup

Dynamic Island Animation

Dynamic Island Expanded Contents

Dynamic Island Content Animation

Wrapping up

Further Reading

CSS Animation Events in Angular

General Usage

Approach 1: Using addEventListener

Approach 2: Using Angular's event listener

Wrapping Up

Animate your Angular App using Motion One

Get Started

Basic Animation using Motion One

Spring and Glide Animation

Timeline Animations

Wrapping Up

Animation Inspector: How DevTools can help when Creating Animations

Inspecting your Animation

Tweak your Animation's Timing Function using the Bezier Curve Editor

Wrapping Up

Animate your Angular App using Animate.css

Installation

Use Angular's Class Binding

Adding Javascript into the mix

Entrance and Exits

Wrapping Up

3 Easy Ways to Add Animation to your Angular Applications

CSS Keyframes and Transitions

Web Animation APIs

Angular Animations

Conclusion

Create Custom Bottom Sheets in Ionic using CSS Grid and Angular Animations

File and Folder Structure

High-level Concept

Setting up the main view

Bottomsheet Component

Add it to App Component

Open and Close via Layers Service

Add Open on Food Card Click

Add Close on Shade Layer Click

Open and Close Event Listeners

Add Animations

Fade Animation

Slide Animation

Wire up our Bottomsheet Component

Conclusion

Speed Code: Movies App UI with Nativescript and Angular

Part 1: Pages and Layouts

Part 2: Drawers, Bottomsheets, and Animations

Approach 1: Using `addEventListener`