Introduction to JavaScript Animation with Anime.js
4.2 (7 ratings)
Course Ratings are calculated from individual students’ ratings and a variety of other signals, like age of rating and reliability, to ensure that they reflect course quality fairly and accurately.
156 students enrolled

Introduction to JavaScript Animation with Anime.js

Learn the fundamentals of Anime.js to create awesome animations with JavaScript
4.2 (7 ratings)
Course Ratings are calculated from individual students’ ratings and a variety of other signals, like age of rating and reliability, to ensure that they reflect course quality fairly and accurately.
156 students enrolled
Created by AJ Meyghani
Last updated 9/2018
English
English [Auto-generated]
Current price: $11.99 Original price: $54.99 Discount: 78% off
1 day left at this price!
30-Day Money-Back Guarantee
This course includes
  • 1.5 hours on-demand video
  • 2 articles
  • 20 downloadable resources
  • Full lifetime access
  • Access on mobile and TV
  • Certificate of Completion
Training 5 or more people?

Get your team access to Udemy's top 3,000+ courses anytime, anywhere.

Try Udemy for Business
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
Expand all 23 lectures 01:26:58
+ Intro to JavaScript Animation
4 lectures 04:46

In this video we we'll go through the outline of the course and the topic that we will be covering.

Preview 01:11
Using the Project Files
00:26

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.

Plain JavaScript Animation
01:08

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.

JavaScript Animation with RAF
02:01
+ Anime.js Fundamentals
14 lectures 56:10

In this video we are going to create the simplest possible animation with Anime.js to show off it's basic features.

Preview 03:55

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.

Targets
04:42

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.

Units and Values
04:18

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.

Objects as Value
02:16

In this video we are going to learn how to use functions to control properties and other settings when animating multiple elements.

Preview 04:34

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.

Easing Curves
07:26

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 CSS Transforms
04:16

In this video we are going to learn how to animate other CSS properties like opacity, backgroundColor and more.

Animating Other CSS Properties
01:56

In this video we are going to learn how to animate colors and properties that use colors.

Animating Color Values
02:32

In this video we are going to learn how to animate svg attributes using Anime.js.

Preview 06:26

In this video we are going to learn how to use Anime.js to animate DOM attributes.

Animating DOM Attributes
01:56

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 Parameters
03:52

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 Callbacks
05:00

In this video we are going to learn how to use playback controls to play, restart, reverse, and pause an animation.

Animation Playback Controls
03:01
+ Keyframes and Timelines
2 lectures 09:12

In this video we are going to learn what keyframes are and how you can use them to create more complex animations.

Anime Keyframes
02:55

In this video we are going to learn what Timelines are and how you can use them to create sequences.

Anime Timelines
06:17
+ Practical Animation Examples
2 lectures 16:24

In this video we are going to create a cool loading animation with Anime.js

Create a nice loading spinner
02:51

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.

Create a Login Form Micro-interaction
13:33
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