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
Introduction
- Animating CSS properties with JavaScript
- What you should know
Getting Started
- Setting up Anime
- Animating targets with CSS properties and transformations
- Animating targets with numerals
- Manipulating animation values
- Defining animation parameters
Making It Smooth
- Using easing for more natural movement
- Using staggering for more natural movement
- Adding basic animation controls
- Adding scrolling controls
- Challenge Animate a div and include user controls
- Solution Animate a div and include user controls
Conclusion
- Next steps