2D Animations with Javascript and the Anime.js Library

Name: 2D Animations with Javascript and the Anime.js Library
Rating: 3.9 (12 reviews)

Create beautiful animations for your web-app or site.

Created byShay Tavor

Last updated 9/2019

English

What you'll learn

How to create beautiful animations.
How to move, rotate, scale html elements.
How to create scripts of animations.

Course content

5 sections • 29 lectures • 1h 53m total length

Introduction2:22
Install Anime.js1:42
In this lecture we'll see how to download and refer to the Anime.js library.
Getting Started1:33
In this lecture we'll introduce the anime function and see its main structure

The Targets Property0:52
In this lecture we'll see the purpose of the targets property
CSS Selectors6:40
In this lecture we'll see how to use CSS selectors to choose elements on the screen.
DOM Elements2:27
In this lecture we'll see how to choose elements to animate via the DOM api.
Arrays2:05
In this lecture we'll see how to animate several objects at once using arrays.
Exercise 1 - Menu Items1:19
In this lecture we'll present the exercise for this section.
Exercise 1 Solution3:42
In this lecture we'll see a detailed solution to the exercise.

Properties to Animate1:00
A short overview of this section.
CSS Properties4:23
In this lecture we'll see how to animate object's css properties.
Properties Values3:49
In this lecture we'll see some of the common types that can be used for properties animations.
CSS Transforms4:39
In this lecture we'll see how to animate the css transform property.
DOM Attributes2:46
In this lecture we'll see how to animate DOM attributes.
Exercise 2 - Catch Me0:53
In this lecture we'll present the exercise for this section.
Exercise 2 Solution5:17
In this lecture we'll see a detailed solution to the exercise.

Duration and Delay5:04
In this lecture we'll see how to control the animation's speed and starting point.
Direction and Loop3:31
In this lecture we'll see the direction and loop properties.
Exercise 3 - Highlight7:23
In this lecture we'll present and solve an interesting challenge.
Easing3:23
In this lecture we'll see the easing property.
Specific Property Style3:10
In this lecture we'l see how to assign different animation's values to different properties.
Function Based Animation2:57
In this lecture we'll see how to assign a function that generates values for the parameters.
Exercise 4 - Moving Letters12:23
In this lecture we'll present and solve an interesting challenge.

Keyframes3:51
In this lecture we'll see the keyframes property which let us apply a series of animations.
Timeline4:35
In this lecture we'll see the timeline object that allows us to apply series of animations.
Exercise 5 - Complex Script9:37
In this lecture we'll present and solve an interesting challenge.
Staggering5:06
In this lecture we'll see the stagger function.
Staggering Grid1:30
In this lecture we'll see how to use the stagger grid attribute.
Exercise 6 - Break the Wall5:22
In this lecture we'll present and solve an interesting challenge.

Requirements

Javascript
HTML
CSS

Description

Animations are welcome guests in our applications. They are fun, entertain and visually aesthetic to look at. They make applications more accessible and eye catching.

The traditional method of creating animation is using timers, clocks and frames, and projecting images in constant time intervals. However, if all you want to do is add some movement to your site, this method may be overkill.

This is where Anime.js steps in. Anime.js is a light-weight Javascript library that aims to do just that - to create beautiful animations with ease and minimum code.

With Anime.js you can animate anything on the screen - html elements, dom attributes, svg graphics, just about anything.

In this course you will learn about Anime.js library. I'll show you this library's essentials and a lot of code examples. There are six projects in this course, that will keep you busy and help you practice this library.

If you want to add animations to your site and didn't know how to do it - welcome, this course is perfect for you!

Who this course is for:

Web applications and sites developers who want to add custom touch to their app.
Javascript enthusiastic who want to widen their knowledge in useful libraries.
Web designers who want to add animations to their sites.

2D Animations with Javascript and the Anime.js Library

What you'll learn

Explore related topics

Course content

Introduction3 lectures • 6min

What to Animate6 lectures • 17min

Animate Properties7 lectures • 23min

Animation Style7 lectures • 38min

Timing6 lectures • 30min

Requirements

Description

Who this course is for: