Dynamically scripted animations with Javascript
- Language: English
- Certificate: of completion
- Subtitles: English, Spanish, French, Japanese, Italian, Portuguese (Machine translation)
- Duration: 3 Hours 50 Mins
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
-
Lesson 1Welcome
-
Introduction
-
Setting up our app
-
HTML5 <canvas> rendering fundamentals
-
-
Lesson 2Basic trigonometry
-
Create a pulsing motion with Math.sin()
-
Circular and elliptical movement
-
Wave motion using two angles
-
Rotate an object towards a point
-
-
Lesson 3Velocity and Acceleration
-
Simple velocity on two axes
-
Angular velocity
-
Using angular velocity to follow the mouse
-
Acceleration and gravity
-
-
Lesson 4Boundaries and friction
-
Screen wrapping
-
Removing objects at boundaries
-
Fountain of regenerating objects
-
Bouncing off walls
-
Friction
-
-
Lesson 5Easing and springing
-
Simple easing
-
Easing to a moving target
-
Springing with friction applied
-
Springing to a moving target
-
Multiple interactive springs following the mouse
-
Chaining springs
-
-
Lesson 6Collision detection
-
Hit testing with bounding box
-
Distance-based collision detection
-
Stacking Boxes
-
-
Lesson 7Conclusion
-
Conclusion
-
Meet the teacher
Georgi Nikoloff
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.
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
- English
- English, Spanish, French, Japanese, Italian, Portuguese (Machine translation)
- Beginner & Intermediate
- Access on mobile and Desktop
- Full time access
- Certificate of completion
-
Georgi Nikoloff
Teacher at awwwards.com
If you have any questions about this course, please contact us
