Lesson Outline

Animating with the Ionic Animations API

At the beginning of these animations lessons I mentioned my book Advanced Animations & Interactions with Ionic which primarily focuses on animating with the Ionic Animations API. This lesson will contain some content from that book to help introduce you to using the Ionic Animations API for building animations in your application. Again, this is obviously a huge topic in its own right so we are only aiming to gain a broad understanding of the approach in this lesson.

Like using the Angular animations library, the Ionic Animations API is great for circumstances where we want to tie in animations more closely to our applications logic. As well as the Ionic Animations API itself, it is also relevant to discuss the Web Animations API here.

It is useful to know upfront the Ionic Animations API is essentially a wrapper for the Web Animations API that makes it easier to integrate into your applications. We will be focusing on the Ionic Animations API, but it is good to understand what it is built on top of.

"The Web Animations API opens the browser's animation engine to developers and manipulation by JavaScript. This API was designed to underlie implementations of both CSS Animations and CSS Transitions and leaves the door open to future animation effects. It is one of the most performant ways to animate on the Web, letting the browser make its own internal optimizations without hacks, coercion, or Window.requestAnimationFrame()." - MDN (Mozilla Developer Network)

One of the key differences between using the built-in Web Animations API and some other kind of animations library, apart from the functionality being built-in to the browser platform rather than requiring additional packages, is that rather than having your animations handled by JavaScript (in the same space as your application logic) the animations can be offloaded and handled by the browser itself.

The result of using the Web Animations API to run your animations is that you will generally have better FPS and lower CPU usage. With the Web Animations API, the browser is able to schedule and optimise your animations to achieve better performance, rather than you forcing the browser to perform your animations exactly in the way you describe in the application logic. You can certainly still achieve great animation performance by dictating what to do, but if you don't have a strong understanding of the way the browser rendering process works it can be easy to get wrong and destroy your application's performance.

To summarise some key benefits that the Web Animations API offers:

• Animations can be handled and optimised by the browser
• Don't need to manipulate the DOM with classes to trigger animations
• Easily use dynamic values in your animations
• Run logic or additional animations once an animation has finished
• Easily control playback and direction of the animation (play forwards, backwards, start from the middle of the animation, etc.)

and the reasons that we would use the Ionic Animations API instead of the Web Animations API directly include:

• The Ionic Animations API automatically provides CSS animation fallbacks in environments where the Web Animations API is not supported (so you can just use it and not worry about which browsers support which features)
• The API/syntax better suits the Ionic environment
• Animations can be combined with Ionic gestures
• Easily group and chain animations
• Lifecycle hooks for animations

Before we move on to checking out the Ionic Animations API, I think it is worthwhile to first take a quick look at an example of using the Web Animations API directly.

Using the Web Animations API

With the Web Animations API, we can grab any element from the DOM and animate it using the JavaScript API provided. In order to animate an element, we can call the animate method on an element and supply it with two things: an array of objects describing the properties we want to animate, and an object describing how we want to animate those properties.

The approach for creating a basic animation using the Web Animations API is almost identical in concept to creating a CSS animation.

Let's take an example CSS keyframe animation and then convert that to use the Web Animations API. If we have defined a keyframe animation that "flashes" an element on the screen (e.g. the element would start with 0 opacity, transition to full opacity, and then back to 0 opacity again by the end of the animation) it might look like this:

@keyframes myFlashAnimation {
  0% {
    opacity: 0;
  }

  50% {
    opacity: 1;
  }

  100% {
    opacity: 0;
  }
}

and we attach that animation to a particular element and define how we want that animation to run by associating it with a class:

.my-element {
  animation: 1s linear myFlashAnimation infinite;
}

This will create an infinite animation that will make an element visible and then invisible again over the course of 1 second. If we were to create the same animation using the Web Animations API, it would look like this:

referenceToElement.animate([{ opacity: 0 }, { opacity: 1 }, { opacity: 0 }], {
  duration: 1000,
  iterations: Infinity,
});

The first parameter we pass to animate is an object describing the keyframes of the animation, and the second parameter is an object describing the duration of the animation. As you can see, it's basically the same concept, it just looks a little different.

As you will see in a moment when we look at the Ionic Animations API, the concept still remains quite similar.