[LES-3.3/st-compl] animation-frame-funcs

matowdev · matowdev · commit 6de2c328fd75 · 2025-11-19T12:28:00.000+03:00
Working with "requestAnimationFrame/cancelAnimationFrame() func's".

Worth noting:
  - two examples on CodePen.

core: B-4 / WL-AL
diff --git a/core-courses/4-web-layout-advanced-level/3-animation-on-js/3-2-animation-by-interval-funcs/index.html b/core-courses/4-web-layout-advanced-level/3-animation-on-js/3-2-animation-by-interval-funcs/index.html
@@ -16,9 +16,9 @@
 
 <body>
   <div class="block"></div>
+
   <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.5.1/gsap.min.js"></script>
   <script>
-
     let block = document.querySelector('.block');
     let start = Date.now(); // запомнить время начала
 
@@ -56,7 +56,6 @@
 
     // ex 4
     //gsap.fromTo(".block", {opacity: 0}, {opacity: 0.5, duration: 1});
-
   </script>
 </body>
 
diff --git a/core-courses/4-web-layout-advanced-level/3-animation-on-js/3-3-animation-frame-funcs/index.html b/core-courses/4-web-layout-advanced-level/3-animation-on-js/3-3-animation-frame-funcs/index.html
@@ -0,0 +1,37 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>requestAnimationFrame & cancelAnimationFrame() func's</title>
+  <style>
+    .block {
+      width: 100px;
+      height: 100px;
+      background-color: lightslategray;
+    }
+  </style>
+</head>
+
+<body>
+  <div class="block"></div>
+
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.5.1/gsap.min.js"></script>
+  <script>
+    let animationId = null;
+
+    function test() {
+      console.count('test');
+      animationId = requestAnimationFrame(test); // по сути рекурсия.. постоянное обновление/перезапись animationId
+    }
+
+    animationId = requestAnimationFrame(test); // первичный вызов
+
+    document.querySelector('.block').addEventListener('click', () => {
+      cancelAnimationFrame(animationId); // остановка по клику.. согласно animationId
+    })
+  </script>
+</body>
+
+</html>
