Get a 50% discount when you buy 2 courses or more!
Special offer Dynamically scripted animations with Javascript By Georgi Nikoloff
This offer ends:
$100 $65
Buy
Dynamically scripted animations with Javascript
English English, Spanish, French (+3) [Machine translation]
3 Hours 50 Mins Course

Dynamically scripted animations with Javascript

Watch Trailer
Special offer $100 $65
Buy course

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.

The subtitles are automatically generated, so the quality of the captions may vary.
Course Table of contents
What will you learn?

7 sections • 26 lectures • 3 hours 50 mins

  • Welcome
    3 lectures 1 Hour 7 Mins
    • Introduction
      00:24 Mins
    • Setting up our app
      18:33 Mins
    • HTML5 <canvas> rendering fundamentals
      44:23 Mins
  • Basic trigonometry
    4 lectures 41:53 Mins
    • 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
  • Velocity and Acceleration
    4 lectures 29:29 Mins
    • 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
  • Boundaries and friction
    5 lectures 33:31 Mins
    • 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
  • Easing and springing
    6 lectures 26:37 Mins
    • 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
  • Collision detection
    3 lectures 16:10 Mins
    • Hit testing with bounding box
      10:06 Mins
    • Distance-based collision detection
      03:09 Mins
    • Stacking Boxes
      02:55 Mins
  • Conclusion
    1 lectures 02:10 Mins
    • Conclusion
      02:10 Mins

Georgi is an exceptional programmer. He lives and breathes computer graphics, animation and building awesome things. When not on the lookout for the next amazing technology he loves to help others to excel and take you with you into the rabbit hole of creating graphics and animations from the ground up.
Matthias Wolff
Matthias Wolff Co-Founder &amp; COO at Xymatic
Course details

Dynamically scripted animations with Javascript

Dynamically scripted animations with Javascript

By Georgi Nikoloff

$65 35% off $100

This offer ends:

  • English
  • English, Spanish, French, Japanese, Italian, Portuguese (Machine translation)
  • Beginner & Intermediate
  • Access on mobile and Desktop
  • Full time access
  • Certificate of completion
About the Speaker
Learn from the best
  • Georgi Nikoloff

    Georgi Nikoloff

    Frontend & Creative Developer

    @georgiNikoloff

    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.

    georgi-nikolov.com

Similar Courses