AnimeJS Demo

This repo is a demo of the AnimeJS animation library to help you learn AnimeJS.

It has the following four folders, each of which contains one JS project.

• 0-all-in-one-demo: This demo animates a logo, it includes most of the core functionalities of AnimeJS in one animation sequence.
• 1-basics: This project includes the very basics of AnimeJS, e.g. how to animate a Translate
• 2-intermediate: This project includes some stuff which are a bit more fun! Mainly, it introduces timelines and anime.stagger
• 3-advanced: This project shows you how to animate along the path line. It animates the outline of a words to have a drawing effect.

To start

If you're here to learn AnimeJS, I suggest you start by looking at the 0-all-in-one-demo, which is a small example of what you can make with AnimeJS. However, I don't recommend looking at the code quite yet! Before that, let's walk through 1-basics, 2-intermediate, and 3-advanced (in that order), which will give you a good understanding of AnimeJS. Then you should look at 0-all-in-one-demo and have a fiddle, and see what you can find!

How to set up this repo?

Simply clone this repo, and open up each of the folders listed above. To see the animations, simply open the html file in a browser.

Quick Video Demos

0-all-in-one-demo

ezgif-5-1b60bf99d9.mp4

1-basics

ezgif-5-7b90c808f5.mp4

2-intermediate

ezgif-5-93b2244d20.mp4

3-advanced

ezgif-5-0c6ba139a0.mp4

Enjoy!