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?
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.
Pre-order. This special price is available as you are buying the course in advance. The course will be available by the end of June. The price will increase as we get closer to the date and once it’s online it will be full price - so register now for a big discount.
(*) The times of the chapters as well as the total duration of the course are approximate and may have some variation
The subtitles are automatically generated, so the quality of the captions may vary.7 sections • 27 lectures • 3 hours 47 mins
-
Welcome4 lectures 34:00 Mins
-
Introduction04:00 Mins
-
Dynamic versus static animation04:00 Mins
-
Our basic HTML5 <canvas> skeleton app10:00 Mins
-
HTML5 <canvas> rendering fundamentals15:00 Mins
-
-
Basic trigonometry4 lectures 28:00 Mins
-
Create a pulsing motion with Math.sin()10:00 Mins
-
Circular and elliptical movement08:00 Mins
-
Wave motion using two angles05:00 Mins
-
Rotate an object towards a point05:00 Mins
-
-
Velocity and Acceleration4 lectures 30:00 Mins
-
Simple velocity on two axes07:00 Mins
-
Angular velocity07:00 Mins
-
Using angular velocity to follow the mouse08:00 Mins
-
Acceleration and gravity08:00 Mins
-
-
Boundaries and friction5 lectures 44:00 Mins
-
Screen wrapping08:00 Mins
-
Removing objects at boundaries05:00 Mins
-
Fountain of regenerating objects15:00 Mins
-
Bouncing off walls08:00 Mins
-
Friction08:00 Mins
-
-
Easing and springing6 lectures 59:00 Mins
-
Simple easing08:00 Mins
-
Easing to a moving target07:00 Mins
-
Springing with friction applied10:00 Mins
-
Springing to a moving target10:00 Mins
-
Chaining springs12:00 Mins
-
Multiple interactive springs following the mouse12:00 Mins
-
-
Collision detection3 lectures 30:00 Mins
-
Hit testing with bounding box10:00 Mins
-
Distance-based collision detection10:00 Mins
-
Collision-based springing10:00 Mins
-
-
Conclusion1 lectures 02:00 Mins
-
Conclusion02:00 Mins
-
