First

designcourse · Sep 19, 2023 · 16db436 · 16db436
commit 16db436
Show file tree

Hide file tree

Showing 218 changed files with 7,156 additions and 0 deletions.
diff --git a/2 - GreenSock/1 - From and To Method/After/.vscode/settings.json b/2 - GreenSock/1 - From and To Method/After/.vscode/settings.json
@@ -0,0 +1,3 @@
+{
+    "liveServer.settings.port": 5501
+}
diff --git a/2 - GreenSock/1 - From and To Method/After/css/main.css b/2 - GreenSock/1 - From and To Method/After/css/main.css
@@ -0,0 +1,22 @@
+body {
+  margin: 0;
+  height: 100vh;
+  background: #2864FF;
+  color: white;
+}
+
+h1 {
+  font-family: "Bebas Neue";
+  font-size: 30rem;
+  text-align: center;
+  opacity: 0.1;
+  margin: 18% 0 0 0;
+}
+
+.progress {
+  background-color: #A1BCFF;
+  height: 3px;
+  width: 0;
+  position: absolute;
+  top: 50%;
+}/*# sourceMappingURL=main.css.map */
diff --git a/2 - GreenSock/1 - From and To Method/After/css/main.css.map b/2 - GreenSock/1 - From and To Method/After/css/main.css.map
diff --git a/2 - GreenSock/1 - From and To Method/After/css/main.scss b/2 - GreenSock/1 - From and To Method/After/css/main.scss
@@ -0,0 +1,22 @@
+body {
+    margin: 0;
+    height: 100vh;
+    background: #2864FF;
+    color: white;
+}
+
+h1 {
+    font-family: 'Bebas Neue';
+    font-size: 30rem;
+    text-align: center;
+    opacity: 0.1;
+    margin: 18% 0 0 0;
+}
+
+.progress {
+    background-color: #A1BCFF;
+    height: 3px;
+    width: 0;
+    position: absolute;
+    top: 50%;
+}
diff --git a/2 - GreenSock/1 - From and To Method/After/index.html b/2 - GreenSock/1 - From and To Method/After/index.html
@@ -0,0 +1,39 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+    <link rel="stylesheet" href="css/main.css">
+</head>
+<body>
+    <h1>BORING</h1>
+    <div class="progress"></div>
+
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js" integrity="sha512-16esztaSRplJROstbIIdwX3N97V1+pZvV33ABoG1H2OyTttBxEGkTsoIVsiP1iaTtM8b3+hu2kB6pQ4Clr5yug==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
+    <script>
+        gsap.to(".progress", {
+                //duration: 1,
+                width: "100%",
+                //ease: "power1.inOut",
+                //delay: 0.5
+        })
+
+        gsap.from("h1", {
+            y: -200,
+            duration: 2,
+            ease: "elastic.out(1, 0.3)"
+        })
+
+        gsap.to(".progress", {
+                duration: 1,
+                height: "100%",
+                top: 0,
+                backgroundColor: 'white',
+                width: "100%",
+                ease: "power1.inOut",
+                delay: 2
+        })
+    </script>
+</body>
+</html>
diff --git a/2 - GreenSock/1 - From and To Method/Before/css/main.css b/2 - GreenSock/1 - From and To Method/Before/css/main.css
@@ -0,0 +1,22 @@
+body {
+  margin: 0;
+  height: 100vh;
+  background: #2864FF;
+  color: white;
+}
+
+h1 {
+  font-family: "Bebas Neue";
+  font-size: 30rem;
+  text-align: center;
+  opacity: 0.1;
+  margin: 18% 0 0 0;
+}
+
+.progress {
+  background-color: #A1BCFF;
+  height: 3px;
+  width: 0;
+  position: absolute;
+  top: 50%;
+}/*# sourceMappingURL=main.css.map */
diff --git a/2 - GreenSock/1 - From and To Method/Before/css/main.css.map b/2 - GreenSock/1 - From and To Method/Before/css/main.css.map
diff --git a/2 - GreenSock/1 - From and To Method/Before/css/main.scss b/2 - GreenSock/1 - From and To Method/Before/css/main.scss
@@ -0,0 +1,22 @@
+body {
+    margin: 0;
+    height: 100vh;
+    background: #2864FF;
+    color: white;
+}
+
+h1 {
+    font-family: 'Bebas Neue';
+    font-size: 30rem;
+    text-align: center;
+    opacity: 0.1;
+    margin: 18% 0 0 0;
+}
+
+.progress {
+    background-color: #A1BCFF;
+    height: 3px;
+    width: 0;
+    position: absolute;
+    top: 50%;
+}
diff --git a/2 - GreenSock/1 - From and To Method/Before/index.html b/2 - GreenSock/1 - From and To Method/Before/index.html
@@ -0,0 +1,44 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>From and To</title>
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Bebas+Neue&display=swap" rel="stylesheet">
+
+    <link rel="stylesheet" href="css/main.css">
+</head>
+<body>
+    <h1>BORING</h1>
+    <div class="progress"></div>
+
+
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js" integrity="sha512-16esztaSRplJROstbIIdwX3N97V1+pZvV33ABoG1H2OyTttBxEGkTsoIVsiP1iaTtM8b3+hu2kB6pQ4Clr5yug==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
+    <script>
+
+        const progress = document.querySelector(".progress")
+
+        gsap.to(progress, {
+            width: "100%",
+            duration: 2,
+            ease: "power4.out"
+        })
+
+        gsap.from("h1", {
+            y: -200,
+            duration: 2,
+            ease: "elastic.out(1, 0.3)"
+        })
+
+        gsap.to(progress, {
+            height: "100%",
+            top: 0,
+            delay: 2,
+            backgroundColor: "white"
+        })
+
+    </script>
+</body>
+</html>
diff --git a/2 - GreenSock/2 - FromTo and Set/After/.vscode/settings.json b/2 - GreenSock/2 - FromTo and Set/After/.vscode/settings.json
@@ -0,0 +1,3 @@
+{
+    "liveServer.settings.port": 5501
+}
diff --git a/2 - GreenSock/2 - FromTo and Set/After/css/main.css b/2 - GreenSock/2 - FromTo and Set/After/css/main.css
@@ -0,0 +1,24 @@
+body {
+  margin: 0;
+  height: 100vh;
+  background: #F0F6CE;
+  color: #F0F6CE;
+  display: grid;
+  place-content: center;
+}
+
+.container {
+  border-radius: 50%;
+  background: #CE5700;
+  width: 16vw;
+  height: 16vw;
+  display: grid;
+  place-content: center;
+  cursor: pointer;
+}
+
+p {
+  font-family: "Playfair Display", serif;
+  font-size: clamp(10rem, 5vw, 17rem);
+  transform: translateX(30%);
+}/*# sourceMappingURL=main.css.map */
diff --git a/2 - GreenSock/2 - FromTo and Set/After/css/main.css.map b/2 - GreenSock/2 - FromTo and Set/After/css/main.css.map
diff --git a/2 - GreenSock/2 - FromTo and Set/After/css/main.scss b/2 - GreenSock/2 - FromTo and Set/After/css/main.scss
@@ -0,0 +1,26 @@
+body {
+    margin: 0;
+    height: 100vh;
+    background: #F0F6CE;
+    color: #F0F6CE;
+    display: grid;
+    place-content: center;
+}
+
+.container {
+    border-radius: 50%;
+    background: #CE5700;
+    width: 16vw;
+    height: 16vw;
+    display: grid;
+    place-content: center;
+    cursor: pointer;
+}
+
+
+
+p {
+    font-family: 'Playfair Display', serif;
+    font-size: clamp(10rem, 5vw, 17rem);
+    transform: translateX(30%)
+}
diff --git a/2 - GreenSock/2 - FromTo and Set/After/index.html b/2 - GreenSock/2 - FromTo and Set/After/index.html
@@ -0,0 +1,48 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>From and To</title>
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Playfair+Display&display=swap" rel="stylesheet">
+
+    <link rel="stylesheet" href="css/main.css">
+</head>
+<body>
+    <div class="container">
+        <p>luxury</p>
+    </div>
+
+
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js" integrity="sha512-16esztaSRplJROstbIIdwX3N97V1+pZvV33ABoG1H2OyTttBxEGkTsoIVsiP1iaTtM8b3+hu2kB6pQ4Clr5yug==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
+    <script>
+
+        const container = document.querySelector('.container')
+
+        let tween = gsap.to(container, {
+            borderRadius: '2%',
+            width: '20vw',
+            height: '28vw',
+            paused: true
+        })
+
+        let tween2 = gsap.to('p', {
+            fontSize: 'clamp(5rem, 5vw, 10rem)',
+            x: 0,
+            paused: true
+        })
+
+        container.addEventListener('mouseenter', () => {
+            tween.play()
+            tween2.play()
+        })
+        container.addEventListener('mouseleave', () => {
+            tween.reverse()
+            tween2.reverse()
+        })
+
+    </script>
+</body>
+</html>
diff --git a/2 - GreenSock/2 - FromTo and Set/Before/css/main.css b/2 - GreenSock/2 - FromTo and Set/Before/css/main.css
@@ -0,0 +1,24 @@
+body {
+  margin: 0;
+  height: 100vh;
+  background: #F0F6CE;
+  color: #F0F6CE;
+  display: grid;
+  place-content: center;
+}
+
+.container {
+  border-radius: 50%;
+  background: #CE5700;
+  width: 16vw;
+  height: 16vw;
+  display: grid;
+  place-content: center;
+  cursor: pointer;
+}
+
+p {
+  font-family: "Playfair Display", serif;
+  font-size: clamp(10rem, 5vw, 17rem);
+  transform: translateX(30%);
+}/*# sourceMappingURL=main.css.map */
diff --git a/2 - GreenSock/2 - FromTo and Set/Before/css/main.css.map b/2 - GreenSock/2 - FromTo and Set/Before/css/main.css.map
diff --git a/2 - GreenSock/2 - FromTo and Set/Before/css/main.scss b/2 - GreenSock/2 - FromTo and Set/Before/css/main.scss
@@ -0,0 +1,24 @@
+body {
+    margin: 0;
+    height: 100vh;
+    background: #F0F6CE;
+    color: #F0F6CE;
+    display: grid;
+    place-content: center;
+}
+
+.container {
+    border-radius: 50%;
+    background: #CE5700;
+    width: 16vw;
+    height: 16vw;
+    display: grid;
+    place-content: center;
+    cursor: pointer;
+}
+
+p {
+    font-family: 'Playfair Display', serif;
+    font-size: clamp(10rem, 5vw, 17rem);
+    transform: translateX(30%)
+}
diff --git a/2 - GreenSock/2 - FromTo and Set/Before/index.html b/2 - GreenSock/2 - FromTo and Set/Before/index.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>From and To</title>
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Playfair+Display&display=swap" rel="stylesheet">
+
+    <link rel="stylesheet" href="css/main.css">
+</head>
+<body>
+    <div class="container">
+        <p>luxury</p>
+    </div>
+
+
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js" integrity="sha512-16esztaSRplJROstbIIdwX3N97V1+pZvV33ABoG1H2OyTttBxEGkTsoIVsiP1iaTtM8b3+hu2kB6pQ4Clr5yug==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
+    <script>
+
+        const container = document.querySelector('.container')
+
+
+    </script>
+</body>
+</html>
diff --git a/2 - GreenSock/3 - Stagger Animations/After/.vscode/settings.json b/2 - GreenSock/3 - Stagger Animations/After/.vscode/settings.json
@@ -0,0 +1,3 @@
+{
+    "liveServer.settings.port": 5501
+}