Introduction to JavaScript Animation with Anime.js

Name: Introduction to JavaScript Animation with Anime.js
Rating: 4.2 (33 reviews)

Learn the fundamentals of Anime.js to create awesome animations with JavaScript

Created byAJ Meyghani

Last updated 9/2018

English

What you'll learn

You'll learn the fundamentals of JavaScript animation
You'll be able to use Animejs to create awesome animations
You'll learn what micro-interactions are and how you can implement a simple one using JavaScript and Animejs

Course content

5 sections • 23 lectures • 1h 26m total length

Course Outline1:11
In this video we we'll go through the outline of the course and the topic that we will be covering.
Using the Project Files0:25
Plain JavaScript Animation1:08
In this video we are going to introduce setInterval for creating animations. Even though setInterval can be used to create animations you should almost always stay away from it and use requestAnimationFrame, which is a better alternative.
JavaScript Animation with RAF2:01
In this video we are going to look at requestAnimationFrame(RAF) and how you can use it. We won't spend a lot of time on RAF because Anime.js abstracts will do the heavy lifting for us. However, it's important to know what happens behind the scenes when Anime creates animation objects.

Introducing Anime.js3:55
In this video we are going to create the simplest possible animation with Anime.js to show off it's basic features.
Targets4:42
In this video we are going to learn how to target elements on the page for animations using Animejs targets. We'll also see how you can animate properties of plain JavaScript objects.
Units and Values4:18
This video is all about units and values. We are going to learn about different units and how to use them to have more control over property values.
Objects as Value2:16
In this video we are going to learn how you can use objects to have more control over property values, property parameters and other animation attributes.
Functions as Value4:34
In this video we are going to learn how to use functions to control properties and other settings when animating multiple elements.
Easing Curves7:26
In this video we are going to learn what easing functions are and how you can use them in your animations. We'll start by looking at the easing functions that Anime provides. And then we'll move on to learning creating custom curves and functions.
Animating CSS Transforms4:16
In this video we are going to look at all the CSS transform properties that you can animate with Anime.js. We'll learn how to combine properties and how to change transform origins.
Animating Other CSS Properties1:56
In this video we are going to learn how to animate other CSS properties like opacity, backgroundColor and more.
Animating Color Values2:32
In this video we are going to learn how to animate colors and properties that use colors.
Animating SVG Properties6:26
In this video we are going to learn how to animate svg attributes using Anime.js.
Animating DOM Attributes1:56
In this video we are going to learn how to use Anime.js to animate DOM attributes.
Animation Parameters3:52
In this video we are going to look at animation parameters like loop and direction to see how they can be used along with other properties.
Animation Callbacks5:00
In this video we are going to learn how to run functions at different points in time of an animation. We will look at `begin`, `complete`, `update`, and `run` callback functions and learn when they will be called during an animation.
Animation Playback Controls3:01
In this video we are going to learn how to use playback controls to play, restart, reverse, and pause an animation.

Create a nice loading spinner2:51
In this video we are going to create a cool loading animation with Anime.js
Create a Login Form Micro-interaction13:33
In this video we are going to create a micro interaction for a login form. We'll start talking about what we are going to create, and then we will explain every part of the JavaScript code. The JavaScript code used in this lesson is a little bit more advanced and shows how you can use functions to create reusable animations.

Requirements

Computer and a code editor like Submit Text.
Familiar with the fundamentals of web design
Familiar with CSS and JavaScript basics.

Description

The goal of this course is to teach you the fundamentals of JavaScript animation with Anime.js. And I'm hoping that by the end of the course you'll have all the necessary knowledge to create beautiful and engaging animations.

If you are new to JavaScript and CSS, I would recommend learning the basics first, because this course only focuses on the topics related to Anime.js and animation design . We'll first start by creating a simple animation with plain JavaScript and then we'll dive into learning Anime.js. We'll cover all Anime's animation APIs and at the end we'll work on two practical animations. The first will be a loading spinner and the other will be a micro-interaction animation for a login form.

Who this course is for:

This course is great for designers and developers who want to learn how to implement animations in JavaScript

Introduction to JavaScript Animation with Anime.js

What you'll learn

Explore related topics

Course content

Intro to JavaScript Animation4 lectures • 5min

Anime.js Fundamentals14 lectures • 56min

Keyframes and Timelines2 lectures • 9min

Practical Animation Examples2 lectures • 16min

Conclusion1 lecture • 1min

Requirements

Description

Who this course is for: