Beginner Animations in Ionic 5

I recently began revamping my personal portfolio site. Having spent the last year working on multiple different Ionic/Angular projects, I decided to continue using these awesome frameworks to showcase my recent development and design work.

Even though I have no plans to create a mobile app for my portfolio, Ionic has tons to offer beyond cross-platform builds: it’s flexible, simple, and performant. The Ionic team outdid themselves once again with their recent release of Ionic 5, which revamps several important design elements of the framework.

The entire Ionicons package got an upgrade and many components have become even more customizable, but one of the best changes was the introduction of a customizable animation controller. Built using the Web Animations API, the entire system promises to be faster than its main competitor animation packages while offering a wide number of options. In that vein, lets take a look at some of the basic options available.

Setup

To get started, you simply need to import AnimationControllerfrom Ionic/Angular and declare it in your class’s constructor:

import { Component } from "@angular/core"
import { AnimationController } from "@ionic/angular"

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

Create the Animation

Now we can create the animation instance and add the configurations for our animation that tell the controllor which style changes will take place, how long the animation runs, if there will be a delay, etc. You’ll be happy to notice some very familiar syntax if you’ve used traditional CSS animations.

Let’s assume we want to have an animation run on a button immediately after our page loads. The button’s background color will loop between blue and green. First, we need to create the HTML for the button and include an element reference that we will use later to target the button from within our animation instance:

<ion-button #button>Lovely Button</ion-button>

Now, we need to import ElementRef, ViewChild, and AfterViewInitfrom Angular to access the reference to the button and initiate the animation on page load. Then, we call ngAfterViewInit()within our class and call the animation’s method (we’ll name it animateButton()) there:

import { AfterViewInit, Component, ElementRef, ViewChild } from "@angular/core"
import { AnimationController } from "@ionic/angular"

// ... @Component details ...

export class AppComponent {
  @ViewChild("button", { read: ElementRef, static: true }) button: ElementRef

  constructor(private animationCtrl: AnimationController) {}

  ngAfterViewInit() {
    this.animateButton()
  }

  public animateButton() {
    const animation = this.animationCtrl
      .create()
      .addElement(this.button.nativeElement)
      .duration(1000)
      .iterations(Infinity)
      .fromTo("--background", "green", "blue")

    animation.play()
  }
}

It’s important to note that since we are using ion-button, we need to apply background styles using Ionic’s Custom CSS property --backgroundinstead of background-color.

Similar to other Ionic controllers, we create an instance of the animation object using create(), but instead of passing options, we chain our configuration with more function calls. The second link of the chain is where we declare which element will be animated by passing our button reference as an argument to addElement().

Then, we set the duration()of the animation to 1000ms and configure an infinite number of animation cycles using iterations(). Finally, we declare what styles will change using fromTo(). In this case, we’re saying “change the background from green to blue”.

Finally, and most importantly, we call animation.play()to start it up!

Pulsing Button

You can also use good ‘ol fashioned keyframes to create the transitions in styles. Using the same boilerplate from above, we can alter the transformproperty of a button to make it appear to pulse.

  public pulseButton() {
    const animation = this.animationCtrl
      .create()
      .addElement(this.button.nativeElement)
      .duration(1500)
      .iterations(Infinity)
      .keyframes([
        { offset: 0, boxShadow: "0 0 0 0 rgba(44, 103, 255, 0.4)" },
        { offset: 0.7, boxShadow: "0 0 0 10px rgba(44, 103, 255, 0)" },
        { offset: 1, boxShadow: "0 0 0 0 rgba(44, 103, 255, 0)" }
      ]);

    animation.play();
  }
}

Here, we’re using keyframes()instead of the fromTo()method to create the styles at multiple points in the animation’s life. Just like CSS keyframes, we need to set the point in time during the animation when the style changes (the offset) and what the style changes to (the boxShadow). The number value of the offest is the equivalent of the percentage in CSS keyframe syntax. For example, the above could be achieved in CSS using this code:

@keyframes pulse {
  0% {
    box-shadow: 0, 0, 0, 0 rgba(44, 103, 255, 0.4);
  }

  70% {
    box-shadow: 0, 0, 0, 0 rgba(44, 103, 255, 0);
  }

  100% {
    box-shadow: 0, 0, 0, 0 rgba(44, 103, 255, 0);
  }
}

Another important note here is the casing of the desired style property. When using Ionic’s keyframes()method, multiple words need to be camelcased (i.e. boxShadowinstead of box-shadow);

It’s as simple as that! These are just some beginner animations, but stay tuned soon for a more advanced post that includes some really intriguing animations related to user interactions.