[LES-3.4/st-compl] intro-to-gsap-lib

matowdev · matowdev · commit f04c8fe2e742 · 2025-11-19T14:56:07.000+03:00
Working with "cdn, tweens, timeline container".

Worth noting:
  - features of this library.

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
@@ -17,7 +17,6 @@
 <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(); // запомнить время начала
@@ -41,21 +40,6 @@
     function draw(timePassed) {
       block.style.transform = `translateX(${timePassed / 5}px)`;
     }
-    // ex 1
-    // gsap.to(".block", { duration: 1, x: 100 });
-
-    // ex 2
-    // gsap.to(".block", { duration: 1, x: 100, rotation: 360, scale: 0.5 });
-
-    // ex 3
-    // gsap.from(".block", {
-    //   opacity: 0,
-    //   y: 100,
-    //   duration: 1
-    // });
-
-    // 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
@@ -17,7 +17,6 @@
 <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;
 
diff --git a/core-courses/4-web-layout-advanced-level/3-animation-on-js/3-4-intro-to-gsap-lib/index.html b/core-courses/4-web-layout-advanced-level/3-animation-on-js/3-4-intro-to-gsap-lib/index.html
@@ -0,0 +1,42 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Intro to GSAP lib</title>
+  <style>
+    .block {
+      width: 100px;
+      height: 100px;
+      background-color: lightslategray;
+    }
+  </style>
+</head>
+
+<body>
+  <div class="block"></div>
+
+  <script src="https://cdn.jsdelivr.net/npm/gsap@3.13.0/dist/gsap.min.js"></script>
+  <script>
+    // примеры работы с разными GSAP методами, как (.to, .from, .fromTo), которые становятся доступны после подключения библиотеки (или локально, или через cdn(ссылку) как в нашем примере)
+
+    // 1 пример (должны придти к данному состоянию.. из нашего первичного)
+    // gsap.to(".block", { duration: 1, x: 100 });
+
+    // 2 пример (по аналогии.. только больше изменений/свойств)
+    gsap.to(".block", { duration: 1, x: 100, rotation: 360, scale: 0.5 });
+
+    // 3 пример (здесь наоборот начинаем из указанного состояния и приходим к первичному (т.е. как в style было))
+    // gsap.from(".block", {
+    //   opacity: 0,
+    //   y: 100,
+    //   duration: 1
+    // });
+
+    // 4 пример (здесь/уже указываем и как начинаем, и к чему идём)
+    // gsap.fromTo(".block", { opacity: 0 }, { opacity: 0.5, duration: 1 });
+  </script>
+</body>
+
+</html>
