DZone
Web Dev Zone
Thanks for visiting DZone today,
Edit Profile
  • Manage Email Subscriptions
  • How to Post to DZone
  • Article Submission Guidelines
Sign Out View Profile
  • Post an Article
  • Manage My Drafts
Over 2 million developers have joined DZone.
Log In / Join
  • Refcardz
  • Trend Reports
  • Webinars
  • Zones
  • |
    • Agile
    • AI
    • Big Data
    • Cloud
    • Database
    • DevOps
    • Integration
    • IoT
    • Java
    • Microservices
    • Open Source
    • Performance
    • Security
    • Web Dev
DZone > Web Dev Zone > Introduction to Anime.js

Introduction to Anime.js

Want to use your web development and JavaScript knowledge to bring out your inner artist? Take at look at Anime.js, a library built to create animations using JavaScript.

Swathi Prasad user avatar by
Swathi Prasad
·
Apr. 29, 17 · Web Dev Zone · Tutorial
Like (5)
Save
Tweet
10.46K Views

Join the DZone community and get the full member experience.

Join For Free

JavaScript animation has been around for a while. There is a wide choice of JavaScript animation libraries for you to try out. Among that group, Anime.js has been gaining some significant popularity. If you’re not familiar with it, I hope this article will get you started with this lightweight and flexible animation library.

This library works with any CSS Properties, individual CSS transforms, SVG, or any DOM attributes, and JavaScript Objects.

Let's create some animations using Anime.js.

Prerequisites

Download the library from GitHub or link it through cdnjs. If you are using npm or bower, you can do as follows:

npm install animejs

  OR

bower install animejs

Then in your script file:

import anime from 'animejs'

Let’s add the following code snippet into our HTML <body>:

<div class="purple"></div>
<div class="darkgreen"></div>
<div class="darkred"></div>

Creating Animations

The first step is to initialize the anime object:

anime({
//properties here
});

Within the object above, we will provide certain properties to instruct what and how the elements should animate.

anime({
  targets: ['.purple', '.darkgreen', '.darkred'],
  translateX: '25rem',
  rotate: 360,
  borderRadius: '50%',
  duration: 3000,
  loop: true
});

Here, the 'targets' property defines the elements to animate. The property 'translateX' moves the elements in a horizontal direction. The property 'duration' defines how long the animation lasts. 

The 'loop' property runs the animation indefinitely if it is set to true. If it is set to false, it runs just once. 

Check out the complete demo on CodePen.

Wrapping Up

Working with Anime.js is easy and fun. It lets you create smooth animations and the API is easy to follow. It offers a lot of cool features. If you wish to explore it further, check out the documentation and examples here. I hope you will enjoy working with Anime.js!

Property (programming) Library JavaScript Element Object (computer science) CSS Snippet (programming) SVG GitHub

Published at DZone with permission of Swathi Prasad, DZone MVB. See the original article here.

Opinions expressed by DZone contributors are their own.

Popular on DZone

  • Understand Source Code — Deep Into the Codebase, Locally and in Production
  • JIT Compilation of SQL in NoSQL
  • How Low Code Demands More Creativity From Developers
  • MACH Architecture Explained

Comments

Web Dev Partner Resources

X

ABOUT US

  • About DZone
  • Send feedback
  • Careers
  • Sitemap

ADVERTISE

  • Advertise with DZone

CONTRIBUTE ON DZONE

  • Article Submission Guidelines
  • MVB Program
  • Become a Contributor
  • Visit the Writers' Zone

LEGAL

  • Terms of Service
  • Privacy Policy

CONTACT US

  • 600 Park Offices Drive
  • Suite 300
  • Durham, NC 27709
  • support@dzone.com
  • +1 (919) 678-0300

Let's be friends:

DZone.com is powered by 

AnswerHub logo