Using Anime.js in Sage 9

Animation on the web is often underused and misunderstood. It’s either forgotten about in the web design and development process or considered unnecessary. This is a real shame, because the web is an interactive medium and animation can add a lot of value to a website or web app.

In her article, “Web Animation at Work” on A List Apart, Rachel Nabors explains:

Just as hierarchy guides users through content, animation guides them through interactions by helping them understand relationships, structure, cause, and effect. Animation shouldn’t be a nice-to-have. It is critical to communication.

Animation is not something you want to leave behind and thankfully libraries like Anime.js makes web animation easy and accessible to begin with for all developers. In this guide, we’ll explore how to use Anime in your next Sage 9 project.

First of all, what is Anime?

No, we’re not talking about the wonderful Japanese animations that so many of us love. In this guide, we’re talking about a JavaScript animation library that happens to share the same name. From the official website:

Anime.js is a lightweight JavaScript animation library with a simple, yet powerful API. It works with CSS properties, SVG, DOM attributes and JavaScript Objects.

I’ve used Anime on a number of projects in the past and it is always a joy to work with. Also, Anime has fantastic documentation which makes it simple to learn.

Installation

This guide was written using Sage 9.0.9 and Anime.js 3.0.1.

First, let’s add the package to our project as a dependency:

$ yarn add animejs

Once we have it installed, we can go ahead and start the development process:

$ yarn start

A basic example

This example will demonstrate basic usage in Sage. We’ll use Anime to animate a square that spins into a larger circle.

To get started, let’s set up the markup and associated styles. For the example we’ll make a Blade template for the front page view (resources/views/front-page.blade.php) and add our target element:

@extends('layouts.app')

@section('content')
  <div class="squircle"></div>
@endsection

Add the element’s base styles:

.squircle {
  background-color: #525ddc;
  margin-top: 2rem;
  width: 3rem;
  height: 3rem;
}

Now, in the corresponding JS route — for the sake of simplicity we’ll use resources/assets/scripts/routes/common.js — we need to import the anime function from Anime. We can do this with an ES2015 import statement:

import anime from 'animejs';

Now we can use the function:

export default {
  init() {
    anime({
      targets: '.squircle',

      /** Properties to animate */
      borderRadius: ['0%', '50%'],
      scale: 2,
      rotate: 360,

      /** Animation settings */
      loop: true,
      direction: 'alternate',
      duration: 2000,
      delay: 1000,
    });
  },
};

Here’s what the result should look like:

A fun example

I thought it’d be fun to demonstrate the power of Anime using an SVG of a familiar logo. Check it out:

Using Anime globally

If we are using Anime a lot in our theme, it might be beneficial to add it to webpack’s ProvidePlugin so we don’t need to import it everywhere we use it. We can do this by adding the following to resources/assets/build/webpack.config.js:

 new webpack.ProvidePlugin({
   // ...
+  anime: ['animejs', 'default'],
 }),

We will also need to add it to globals in our ESLint config otherwise ESLint will complain that the import is missing:

 'globals': {
   'wp': true,
+  'anime': true,
 },

Improving your web animation skills

I hope that this guide has empowered you with a great tool for adding animation to your future web projects and also has inspired you to learn more about web animation. For further reading, I would encourage you to dig into the works of my favourite animators on the web:

Join the discussion on Roots Discourse

Help support our open-source development efforts

Help grow Roots

Join over 6,000 subscribers on our newsletter to get the latest Roots updates, along with occasional tips on building better WordPress sites.

Looking for WordPress plugin recommendations, the newest modern WordPress projects, and general web development tips and articles?

“Easily the best WordPress email I get.” Colin OBrien

Follow us on Twitter @rootswp

Ready to checkout?