@okikio/animate - the animejs-esque animation library built on the Web Animation API

Table of Contents

• Table of Contents
• Introduction
• What is the Web Animation API?
• How does @okikio/animate fit in?
• Getting Started
• Examples & Demos
• Conclusion

TLDR @okikio/animate is basically animejs but built on the Web Animation API.

Introduction

@okikio/animate is an animation library for the modern web. It was inspired by animate plus, and animejs; @okikio/animate is a Javascript animation library focused on performance and ease of use. It utilizes the Web Animation API to deliver butter smooth animations at a small size, it weighs ~5.36 KB (minified and gzipped).

What is the Web Animation API?

The Web Animations API lets us construct animations and control their playback with JavaScript. The Web Animations API opens the browsers 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().

With the Web Animations API, we can move interactive animations from stylesheets to JavaScript, separating presentation from behavior. We no longer need to rely on DOM-heavy techniques such as writing CSS properties and scoping classes onto elements to control playback direction. And unlike pure, declarative CSS, JavaScript also lets us dynamically set values from properties to durations. For building custom animation libraries and creating interactive animations, the Web Animations API might be the perfect tool for the job. Let's see what it can do! MDN

The API hooks into right into the browsers CSS Animations & Transitions in order to produce highly efficient animations, it is by far the most efficient way to create animataions on the Web.

For the rest of this article I will be refering to the Web Animation API as WAAPI.

How does @okikio/animate fit in?

The WAAPI is very open in design it is functional on it's own but it's not the most developer friendly or intuitive API, so, I developed @okikio/animate to act as an efficient wrapper around the WAAPI, to introduce the features you know and love from other more mature animation libraries with some added features to the high performance nature of the WAAPI.

Read more...

Getting Started

@okikio/animate is heavily inspired by animejs and animateplus, as such it uses very similar API's and formats.

@okikio/animate create animations by creating instances of Animate, a class that acts as a wrapper around the Web Animation API. To create new instances of the Animate class, you can either import the Animate class and do this, new Animate({ ... }) or import the animate (lowercase) method and do this, animate({ ... }). The animate method creates new instances of the Animate class and passes the options it recieves as arguments to the Animate class.

The Animate class recieves a set of targets to animate, it then creates a list of Web Animation API Animation instances, along side a main animation, which is small Animation instance that is set to animate the opacity of a non visible element, the Animate class then plays each Animation instances keyframes including the main animation.

The main animation is there to ensure accuracy in different browser vendor implementation of the Web Animation API. The main animation is stored in Animate.prototype.mainAnimation: Animation, the other Animation instances are stored in a Manager (from @okikio/manager) Animate.prototype.animations: Manager<HTMLElement, Animation>.

import animate from "@okikio/animate";// Do note, on the web you need to do this, if you installed it via the script tag:// const { animate } = window.animate;(async () => {    let [options] = await animate({        target: ".div",        // Units are added automatically for transform CSS Properties        translateX: [0, 300],        duration: 2000, // In miliseconds        speed: 2,    });    console.log("The Animation is done...");})();

You can basically port all your code from animejs to @okikio/animate with little to no issues.

Note: @okikio/animate only supports automatic units on transform functions e.g. translateX, translate, scale, skew, etc..., it also supports the targets keyword for settings targets and functions as animation options.

animate({    targets: [".div", document.querySelectorAll(".el")],    // You need to put units on CSS properties that are not transforms    left: "500px",    duration(index: number, total: number, target: HTMLElement) {        // ...        return index * total * 100;    }})

Examples & Demos

You can check out some more complex examples at okikio.github.io/native/demo/animate, and codepen.io/collection/rxOEBO.

Conclusion

@okikio/animate is a wrapper around the Web Animation API that allows uou to use all the features you love from animejs and other animation libraries, in a small and concise package.

Read more about it on npm or Github.