This page contains all the samples, excercises, and demo code from

Dynamically scripted animations with Javascript

Full AWWWARDS Course   |   Discord Server   |   GitHub Repository

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.

---

Table of Contents and Exercises

The source code for each excercise is available online, and for a detailed explanation, please consult the video course.

1. Fundamentals
   1. Our basic HTML5 canvas skeleton app
   2. HTML5 canvas rendering fundamentals
2. Basic Trigonometry
   1. Create a pulsing motion with Math.sin()
   2. Circular movement
   3. Wave motion using two angles
   4. Rotate an object towards a point
3. Velocity and Acceleration
   1. Simple velocity on two axes
   2. Angular velocity
   3. Using angular velocity to follow the mouse
   4. Acceleration and gravity
4. Boundaries and friction
   1. Screen wrapping
   2. Removing objects at boundaries
   3. Fountain of regenerating objects
   4. Bouncing off walls
   5. Friction
5. Easing and springing
   1. Simple easing
   2. Simple easing alternative (Dicord question @youse_jp)
   3. Ease to moving target
   4. Springing with friction
   5. Springing to a moving target
   6. Multiple interactive springs following the mouse
   7. Chaining springs
6. Collision detection
   1. Hit testing with bounding box
   2. Distance based hit testing
   3. Stacking boxes