Learning Anime.js

1h 20mIntermediate2021-04-12

Authors

Maryam Hanafiah

Course details

For JavaScript developers, creating animation through CSS properties can seem alien, while specifying every detail in JavaScript can be verbose. Anime.js provides JavaScript developers with an easy set of tools for creating animations by scripting CSS and other changes. In this course, instructor Maryam Hanafiah explains how to animate HTML and SVG through JavaScript, including techniques to polish your animations. Maryam shows you how to get started animating simple objects, manipulating animation values, and defining animation parameters. She covers how to use easing and staggering for more natural movement, then concludes with a discussion on adding basic animation controls and scrolling controls.

Skills covered

JavaScriptOracleFront-End Web DevelopmentWeb DevelopmentDeep Dive (X:Y)

Concepts

0. Introduction

01 - Animating CSS properties with JavaScript
02 - What you should know

1. Getting Started

03 - Setting up Anime
04 - Animating targets with CSS properties and transformations
05 - Animating targets with numerals
06 - Manipulating animation values
07 - Defining animation parameters

2. Making It Smooth

08 - Using easing for more natural movement
09 - Using staggering for more natural movement
10 - Adding basic animation controls
11 - Adding scrolling controls
12 - Challenge - Animate a div and include user controls
13 - Solution - Animate a div and include user controls

Conclusion

14 - Next steps