Dynamically scripted animations with Javascript

Name: Dynamically scripted animations with Javascript
Author: Georgi Nikoloff

By Georgi Nikoloff

Language: English
Certificate: of completion
Subtitles: English, Spanish, French, Japanese, Italian, Portuguese (Machine translation)
Duration: 3 Hours 50 Mins

Now

9.99$

/$100

We all know what CSS easing is, but how do you implement one yourself? Instead of jumping to a physics library immediately, how about implementing the collision detection yourself? How about learning how to handle user interactions via the keyboard, mouse, and touchscreen to control your animation?

Category	Course format	Language	Duration	Level
Code, Animation	Online	English with Subt.	3 Hours 50 Mins	Beginner & Intermediate

In this course you’ll learn how to create interactive animations for the web using computer code and math. You’ll gain new tools to express yourself creatively and discover the theory and principles behind motion. You’ll see these concepts and formulas working in real-time, right in front of you in your browser.

This course provides a gentle introduction to core math theory needed to create smooth and realistic motion using Javascript and the HTML5 canvas element. It covers physics formulas like acceleration, velocity, easing, springing and collision detection, while aiming for smooth and engaging animations, not scientifically correct visualizations.

In a world full of Javascript libraries, this course will be of great use for people who want to understand it on a deeper level. These animation principles are timeless and can be applied to any environment, such as HTML, SVG or even 3D with WebGL.

This course is for beginner to intermediate frontend developers, some basic JS knowledge is required.

Modules

What you will learn
in this course.

Lessons

Chapters

Duration
Lesson 1

Welcome

3

1 Hour 7 Mins

View more
- Introduction
  
  00:24 Mins
- Setting up our app
  
  18:33 Mins
- HTML5 <canvas> rendering fundamentals
  
  44:23 Mins
Lesson 2

Basic trigonometry

4

41:53 Mins

View more
- Create a pulsing motion with Math.sin()
  
  07:37 Mins
- Circular and elliptical movement
  
  09:48 Mins
- Wave motion using two angles
  
  03:55 Mins
- Rotate an object towards a point
  
  21:13 Mins
Lesson 3

Velocity and Acceleration

4

29:29 Mins

View more
- Simple velocity on two axes
  
  07:10 Mins
- Angular velocity
  
  03:29 Mins
- Using angular velocity to follow the mouse
  
  02:33 Mins
- Acceleration and gravity
  
  16:17 Mins
Lesson 4

Boundaries and friction

5

33:31 Mins

View more
- Screen wrapping
  
  06:09 Mins
- Removing objects at boundaries
  
  09:23 Mins
- Fountain of regenerating objects
  
  06:01 Mins
- Bouncing off walls
  
  02:13 Mins
- Friction
  
  09:45 Mins
Lesson 5

Easing and springing

6

26:37 Mins

View more
- Simple easing
  
  06:24 Mins
- Easing to a moving target
  
  02:25 Mins
- Springing with friction applied
  
  04:23 Mins
- Springing to a moving target
  
  02:15 Mins
- Multiple interactive springs following the mouse
  
  08:40 Mins
- Chaining springs
  
  03:10 Mins
Lesson 6

Collision detection

3

16:10 Mins

View more
- Hit testing with bounding box
  
  10:06 Mins
- Distance-based collision detection
  
  03:09 Mins
- Stacking Boxes
  
  02:55 Mins
Lesson 7

Conclusion

1

02:10 Mins

View more
- Conclusion
  
  02:10 Mins

Meet the teacher

Georgi Nikoloff

Frontend & Creative Developer

I am a frontend developer living and working in Berlin. I specialize in developing rich user interfaces and graphics, such as websites, web apps, animations and visualizations.

Now

9.99$

/$100

Course Content

We all know what CSS easing is, but how do you implement one yourself? Instead of jumping to a physics library immediately, how about implementing the collision detection yourself? How about learning how to handle user interactions via the keyboard, mouse, and touchscreen to control your animation?

Features