Anime.js - How It is Changing the World of Custom Animation
No longer do you have to settle for static data objects when developing web sites. You can now use animation libraries to create interesting dynamic effects in JavaScript that will catch the eyes of users and help set your site apart. One such library is Anime.js, which allows you to animate the following:
• CSS Properties
• Individual CSS Transforms
• SVG or DOM Attributes
• JavaScript Objects Features
Anime.js has the following features:
- Keyframe Animation: Store animatable properties in an array for easy manipulation.
- Timeline Animation: Create sequences of animation by adding animations to a timeline object.
- Playback Controls: Programmatically play, pause, restart or seek any animation or timeline.
- Function-Based Animation Properties: Use custom JavaScript functions for property values.
- Easing: Create nonlinear animations using built-in functions, or roll your own code.
Browser Support
Anime.js supports all modern web browsers, including Chrome, Safari, IE/Edge, Firefox and Opera.Installation
You can install Anime.js in multiple ways. You can download it from GitHub and include it on your server, you can link to it using cdnjs, or you can import it using npm or bower.Regardless of how you install it, you will find that Anime.js has a small footprint.
Usage
To use Anime.js, simply initiate the anime object with your animation properties. These properties include the target of the animation and whether you want to translate, rotate or scale the object. You can also set the duration of the animation and whether you want to loop the animation. You can find the full list of properties at the Anime.js website.Demos and Examples
You can find lots of demos and examples of Anime.js at their website. You can also find some at the following sites:juliangarnier.comkenzo.com/en/thejunglebook
For those looking to create out-of-the-ordinary websites, Anime.js is a full-featured and lightweight library that adds a valuable toolset.