Advanced Web Animation with Canvas [ JavaScript CSS HTML ]


Advanced Web Animation with Canvas [ JavaScript CSS HTML ]

Learn Web Animation with Canvas. Creative Coding [code art] by using vanilla JavaScript.

What you’ll learn in Advanced Web Animation with Canvas

  • Basic Knowledge of the Canvas element
  • Techniques and methods of animation using canvas
  • Using mathematical formulas to build web animations
  • Introducing the Web Audio API and frequency data visualizing


  • Basic knowledge of HTML, CSS and JavaScript
  • Web browser – Google Chrome (all animations have been tested in this browser)
  • A text editor or you can work in the online CodePen editor (links to examples with code are prepared and attached to the corresponding lessons)


Do you want to improve your front-end developer skills? You have the opportunity to expand your coding portfolio and attract the attention of employers!

Do you want to learn how to create advanced web animations? Perhaps you are already familiar with Canvas animation and want to deepen and expand this knowledge? Are you looking for interesting animation effects and optical illusions?

You have chosen the right Advanced Web Animation with Canvas course!

This tutorial uses the classic academic teaching model. At the beginning of the lessons, theoretical information is presented, followed by practical web animation examples that consolidate new knowledge. The aim of this course is to show the completeness and variety of animation techniques using Canvas.

The structure of the graphic design of the course:

  • in the upper right part – the title of the chapter;
  • in the upper left part – the number of the lesson in the current chapter [Example: “Lesson 1”];
  • in the upper middle part – the name of the lesson or the next topic of the current lesson;
  • on the right side of the screen – a board with theoretical information;
  • on the left side of the screen – Visual studio code editor with examples illustrating the theory
  • at the bottom of the screen – additional auxiliary information .

All lessons in this course are available for viewing in 1080p quality [view lessons in maximum quality whenever possible.]

In this course, you will find many interesting javascript animation examples with code.

You can work and experiment on your own.

To do this, you need to download the file called ‘Code’ attached to the first lesson of the first chapter. It contains a link to a collection of examples from this course in the online Codepen editor.

Who this course is for:

  • everyone who is interested in web animation
  • JavaScript developers
  • website designers
  • frontend developers
  • UX/UI designers
  • for people who collect a unique library of knowledge in order to have access to it from anywhere in the world
  • creative people interested in learning new things

Created by Alexandr Tuyrin

Last updated 10/2022


Size: 1.26GB


Leave A Reply

Your email address will not be published.