DEV Community

Cover image for Animate your Angular App using Motion One
William Juan for This is Angular

Posted on • Originally published at williamjuan.dev

Animate your Angular App using Motion One

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
Enter fullscreen mode Exit fullscreen mode

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

Basic Animation using Motion One

motion one default animation

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>
Enter fullscreen mode Exit fullscreen mode

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;

}
Enter fullscreen mode Exit fullscreen mode

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
      });
  }
}
Enter fullscreen mode Exit fullscreen mode

Spring and Glide Animation

motion one spring 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
      });
  }
}
Enter fullscreen mode Exit fullscreen mode

Timeline Animations

motion one timeline animation

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
      });
  }
}
Enter fullscreen mode Exit fullscreen mode

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

Top comments (7)

Collapse
 
stefaniefluin profile image
Stefanie Fluin

That's kind of neat. I'll have to play with that!

Collapse
 
williamjuan27 profile image
William Juan

Thanks Stefanie! I have a live demo of this and a few other libraries here if you want to quickly test those out ๐Ÿ˜€๐Ÿ‘‡

williamjuan027.github.io/angular-a...

Collapse
 
vitale232 profile image
Andrew Vitale

This is a fantastic resource! Congrats on the fabulous demo! Animations make a SPA feel so much more polished ๐Ÿ‘

Thread Thread
 
williamjuan27 profile image
William Juan

Thanks Andrew ๐Ÿ˜€

Collapse
 
zohar1000 profile image
Zohar Sabari

beautiful, thanks.

Collapse
 
spock123 profile image
Lars Rye Jeppesen

Very interesting, thanks

Collapse
 
williamjuan27 profile image
William Juan

Thanks! ๐Ÿ˜€