This module introduces students to the Event Loop and Animation concepts in web development. It aims to provide a comprehensive understanding of how JavaScript handles asynchronous events and the principles behind creating animations using CSS3. The module covers topics ranging from understanding the Event Loop to mastering CSS3 animations.

Students will:

• Understand the Event Loop mechanism in JavaScript, including its components like the Call Stack, Web APIs, and Callback Queue.
• Grasp the concept of single-threaded execution and how JavaScript handles concurrency through asynchronous operations.
• Learn about CSS3 Transitions and Transforms for creating animations.
• Explore techniques such as requestAnimationFrame and addressing performance issues in animations.

• 4 hours

Students are encouraged to study the following resources:

1. Event Loop:

   • Event Loop: Microtasks and Macrotasks
   • The Event Loop
   • Introduction to Web APIs

2. Animations:

   • Web Animation Performance Fundamentals
   • CSS and JavaScript animation performance
   • Request Animation Frame

3. RS Materials:

   • Event Loop and Animations Lecture [RU]
   • Event Loop and Animations Lecture Slides
   • Animations Slides

• Complete the test "[St2] Event Loop & Animation" in RS APP > Auto Test.

Expand your knowledge with these additional materials:

• Event Loop:

  • What the heck is the Event Loop anyway?
  • Using microtasks in JavaScript with queueMicrotask()
  • In depth: Microtasks and the JavaScript runtime environment
  • Why is setTimeout(fn, 0) sometimes useful?

• Animations:

  • CSS Timing Functions
  • High Performance Animations
  • Why Moving Elements With Translate() Is Better Than Pos:abs Top/left

• RS Materials:

  • RSS Async JS Lecture [RU]

• Tools:

  • Loupe
  • JavaScript Visualizer 9000