Learning Anime.js

Learning Anime.js

English | MP4 | AVC 1280×720 | AAC 48KHz 2ch | 1h 20m | 200 MB

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.

Table of Contents

Introduction
1 Animating CSS properties with JavaScript
2 What you should know

Getting Started
3 Setting up Anime
4 Animating targets with CSS properties and transformations
5 Animating targets with numerals
6 Manipulating animation values
7 Defining animation parameters

Making It Smooth
8 Using easing for more natural movement
9 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

Homepage