├── Finished ├── 1. JS Animation │ ├── app.js │ ├── index.html │ └── style.css ├── 2. Tween │ ├── app.js │ ├── index.html │ └── style.css ├── 3. Set Method │ ├── app.js │ ├── index.html │ └── style.css ├── 4. from and fromTo Methods │ ├── app.js │ ├── index.html │ └── style.css ├── 5. Staggers │ ├── app.js │ ├── index.html │ └── style.css ├── 6. Controlling Tweens │ ├── app.js │ ├── index.html │ └── style.css └── 7. Timelines │ ├── 1. example one │ ├── app.js │ ├── index.html │ └── style.css │ └── 2. example two │ ├── app.js │ ├── index.html │ └── style.css ├── README.md ├── Simple Project ├── Finished │ ├── app.js │ ├── boxed-water-is-better-tkJnOS-jNGE-unsplash.jpg │ ├── index.html │ └── style.css └── Starter │ ├── app.js │ ├── boxed-water-is-better-tkJnOS-jNGE-unsplash.jpg │ ├── index.html │ └── style.css ├── Starter ├── 1. JS Animation │ ├── app.js │ ├── index.html │ └── style.css ├── 2. Tween │ ├── app.js │ ├── index.html │ └── style.css ├── 3. Set Method │ ├── app.js │ ├── index.html │ └── style.css ├── 4. from and fromTo Methods │ ├── app.js │ ├── index.html │ └── style.css ├── 5. Staggers │ ├── app.js │ ├── index.html │ └── style.css ├── 6. Controlling Tweens │ ├── app.js │ ├── index.html │ └── style.css ├── 7. Timelines │ ├── 1. example one │ │ ├── app.js │ │ ├── index.html │ │ └── style.css │ └── 2. example two │ │ ├── app.js │ │ ├── index.html │ │ └── style.css └── 8. Creatives Project │ ├── app.js │ ├── boxed-water-is-better-tkJnOS-jNGE-unsplash.jpg │ ├── index.html │ └── style.css └── thumb.png /Finished/1. JS Animation/app.js: -------------------------------------------------------------------------------- 1 | const sidebar = document.querySelector(".sidebar"); 2 | const btn = document.querySelector("button"); 3 | 4 | btn.addEventListener("click", () => { 5 | sidebar.classList.toggle("hide"); 6 | }); 7 | -------------------------------------------------------------------------------- /Finished/1. JS Animation/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | JS Animation 7 | 8 | 9 | 10 |
11 | 17 |
18 | 19 |
20 | 21 |
22 | 23 | 24 | 25 | 26 | -------------------------------------------------------------------------------- /Finished/1. JS Animation/style.css: -------------------------------------------------------------------------------- 1 | * { 2 | padding: 0; 3 | margin: 0; 4 | box-sizing: border-box; 5 | } 6 | 7 | body { 8 | background: #1b1b1b; 9 | } 10 | 11 | section.sidebar { 12 | height: 100vh; 13 | width: 20%; 14 | /* background: rgb(33, 33, 33); */ 15 | background: #292929; 16 | position: fixed; 17 | display: flex; 18 | justify-content: center; 19 | align-items: center; 20 | transition: 1s ease; 21 | } 22 | 23 | .hide { 24 | transform: translateX(-230px); 25 | } 26 | 27 | ul li { 28 | list-style: none; 29 | margin-bottom: 10px; 30 | } 31 | 32 | ul li a { 33 | text-decoration: none; 34 | font-size: 1.2rem; 35 | font-family: sans-serif; 36 | color: #fff; 37 | } 38 | 39 | .center { 40 | display: flex; 41 | justify-content: center; 42 | align-items: center; 43 | height: 100vh; 44 | } 45 | 46 | .center button { 47 | padding: 10px 20px; 48 | font-size: 1rem; 49 | border: none; 50 | /* box-shadow: 1px 1px 1px 2px rgb(186, 186, 186); */ 51 | background: #ffa31a; 52 | color: #fff; 53 | cursor: pointer; 54 | } 55 | -------------------------------------------------------------------------------- /Finished/2. Tween/app.js: -------------------------------------------------------------------------------- 1 | // ------------------- NOTES ----------------------- 2 | 3 | // ------ GSAP OBJECT 4 | 5 | // A tween is a single movement in an animation. 6 | // SYNTAX: gsap.method(element, vars object) 7 | // ------------------------------------------------------------ 8 | 9 | // The gsap object serves as the access point for most of GSAP's functionality. It's just a generic object with various methods and properties that create and control Tweens and Timelines (the key players in all of GSAP). 10 | // ------------------------------------------------------------ 11 | 12 | // ------ gsap.to() 13 | // The most common type of animation is a to() tween because it allows you to define the destination values (and most people think in terms of animating (to)certain values) 14 | 15 | // GSAP figures out the current values automatically (you don't need to define starting values 16 | // ------------------------------------------------------------ 17 | 18 | // duration: how much time? 19 | // x: transformX(value) 20 | // y: transformY(value) 21 | // repeat -1: repeat infinite times. 22 | // yoyo: Go back and forth 23 | // -------------------------------------------------- 24 | 25 | gsap.to(".box", { 26 | duration: 2, 27 | y: 100, 28 | repeat: -1, 29 | yoyo: true, 30 | }); 31 | -------------------------------------------------------------------------------- /Finished/2. Tween/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Tween 7 | 8 | 9 | 10 |
11 |
12 |
13 | 14 | 15 | 16 | 17 | -------------------------------------------------------------------------------- /Finished/2. Tween/style.css: -------------------------------------------------------------------------------- 1 | * { 2 | padding: 0; 3 | margin: 0; 4 | box-sizing: border-box; 5 | } 6 | 7 | .container { 8 | display: flex; 9 | justify-content: center; 10 | align-items: center; 11 | height: 100vh; 12 | background: #1b1b1b; 13 | } 14 | 15 | .box { 16 | width: 50px; 17 | height: 50px; 18 | margin: 10px; 19 | background: #ffa31a; 20 | border-radius: 100px; 21 | } 22 | -------------------------------------------------------------------------------- /Finished/3. Set Method/app.js: -------------------------------------------------------------------------------- 1 | // ------------------- NOTES ----------------------- 2 | // SET: 3 | // This method is use to set the properties of an element before animating. 4 | // You can also use it to immediately set the properties of an element creating a zero duration animation. 5 | // -------------------------------------------------- 6 | 7 | gsap.set(".box", { 8 | opacity: 0, 9 | background: "yellow", 10 | }); 11 | 12 | gsap.to(".box", { 13 | opacity: 1, 14 | background: "crimson", 15 | duration: 3, 16 | y: 100, 17 | yoyo: true, 18 | repeat: -1, 19 | }); 20 | -------------------------------------------------------------------------------- /Finished/3. Set Method/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Set Method 7 | 8 | 9 | 10 |
11 |
12 |
13 | 14 | 15 | 16 | 17 | -------------------------------------------------------------------------------- /Finished/3. Set Method/style.css: -------------------------------------------------------------------------------- 1 | * { 2 | padding: 0; 3 | margin: 0; 4 | box-sizing: border-box; 5 | } 6 | 7 | .container { 8 | display: flex; 9 | justify-content: center; 10 | align-items: center; 11 | height: 100vh; 12 | background: #1b1b1b; 13 | } 14 | 15 | .box { 16 | width: 50px; 17 | height: 50px; 18 | margin: 10px; 19 | background: #ffa31a; 20 | border-radius: 100px; 21 | } 22 | -------------------------------------------------------------------------------- /Finished/4. from and fromTo Methods/app.js: -------------------------------------------------------------------------------- 1 | // ------------------- gsap.from() ----------------------- 2 | // In from method you don't have to specify the inital State, (it will figure out by itself) 3 | // ------------------- gsap.fromTo() ----------------------- 4 | // In fromTo method you HAVE to specify the default value, and also the new animation state (from where your animation should start and where should it end) 5 | 6 | // gsap.from(".box1", { 7 | // y: -200, 8 | // duration: 3, 9 | // ease: "linear", 10 | // }); 11 | 12 | gsap.fromTo( 13 | ".box2", 14 | { y: 200, opacity: 0 }, 15 | { 16 | opacity: 1, 17 | y: -200, 18 | duration: 3, 19 | ease: "linear", 20 | borderRadius: 0, 21 | repeat: -1, 22 | yoyo: true, 23 | } 24 | ); 25 | -------------------------------------------------------------------------------- /Finished/4. from and fromTo Methods/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Set Method 7 | 8 | 9 | 10 |
11 |
12 |
13 |
14 |
15 | 16 | 17 | 18 | 19 | -------------------------------------------------------------------------------- /Finished/4. from and fromTo Methods/style.css: -------------------------------------------------------------------------------- 1 | * { 2 | padding: 0; 3 | margin: 0; 4 | box-sizing: border-box; 5 | } 6 | 7 | .container { 8 | display: flex; 9 | justify-content: center; 10 | align-items: center; 11 | height: 100vh; 12 | background: #1b1b1b; 13 | } 14 | 15 | .box { 16 | width: 50px; 17 | height: 50px; 18 | margin: 10px; 19 | background: #ffa31a; 20 | border-radius: 100px; 21 | } 22 | -------------------------------------------------------------------------------- /Finished/5. Staggers/app.js: -------------------------------------------------------------------------------- 1 | // ------------------- NOTES ----------------------- 2 | // stagger: { amount:0, from: 0 } 3 | 4 | // amount: The total amount of time (in seconds) that gets split up among all the staggers. 5 | 6 | // each: The amount of time (in seconds) between each sub-tween's start time. 7 | 8 | // from: The position in the array from which the stagger will emanate. 9 | 10 | // 👉 https://greensock.com/docs/v3/Staggers 11 | 12 | // Multiple selection in useRef 👇 13 | // https://adics.hashnode.dev/using-useref-to-multiple-elements-in-react-js 14 | // -------------------------------------------------- 15 | 16 | gsap.set(".box", { 17 | borderRadius: 0, 18 | }); 19 | 20 | gsap.to(".box", { 21 | borderRadius: 100, 22 | duration: 1, 23 | y: -100, 24 | ease: "power1", 25 | yoyo: true, 26 | repeat: -1, 27 | stagger: { 28 | amount: 4, 29 | each: 0.5, 30 | from: 0, 31 | }, 32 | }); 33 | -------------------------------------------------------------------------------- /Finished/5. Staggers/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Set Method 7 | 8 | 9 | 10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 | 20 | 21 | 22 | 23 | -------------------------------------------------------------------------------- /Finished/5. Staggers/style.css: -------------------------------------------------------------------------------- 1 | * { 2 | padding: 0; 3 | margin: 0; 4 | box-sizing: border-box; 5 | } 6 | 7 | .container { 8 | display: flex; 9 | justify-content: center; 10 | align-items: center; 11 | height: 100vh; 12 | background: #1b1b1b; 13 | } 14 | 15 | .box { 16 | width: 50px; 17 | height: 50px; 18 | margin: 10px; 19 | background: #ffa31a; 20 | border-radius: 100px; 21 | } 22 | -------------------------------------------------------------------------------- /Finished/6. Controlling Tweens/app.js: -------------------------------------------------------------------------------- 1 | let play = document.querySelector(".play"); 2 | let pause = document.querySelector(".pause"); 3 | let restart = document.querySelector(".restart"); 4 | 5 | let tween = gsap.to(".box1", { 6 | y: -200, 7 | duration: 5, 8 | backgroundColor: "teal", 9 | }); 10 | 11 | play.addEventListener("click", () => tween.play()); 12 | pause.addEventListener("click", () => tween.pause()); 13 | restart.addEventListener("click", () => tween.restart()); 14 | -------------------------------------------------------------------------------- /Finished/6. Controlling Tweens/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Controlling Tweens 7 | 8 | 9 | 10 |
11 |
12 |
13 |
14 |
15 | 16 | 17 | 18 |
19 |
20 | 21 | 22 | 23 | 24 | 25 | -------------------------------------------------------------------------------- /Finished/6. Controlling Tweens/style.css: -------------------------------------------------------------------------------- 1 | * { 2 | padding: 0; 3 | margin: 0; 4 | box-sizing: border-box; 5 | } 6 | 7 | body { 8 | height: 100vh; 9 | display: flex; 10 | flex-direction: column; 11 | justify-content: center; 12 | align-items: center; 13 | background: #1b1b1b; 14 | } 15 | 16 | .box-container { 17 | display: flex; 18 | justify-content: center; 19 | align-items: center; 20 | margin-bottom: 5rem; 21 | } 22 | 23 | .box { 24 | width: 50px; 25 | height: 50px; 26 | margin: 10px; 27 | background: #ffa31a; 28 | border-radius: 100px; 29 | } 30 | 31 | button { 32 | padding: 10px 20px; 33 | margin-left: 10px; 34 | outline: none; 35 | } 36 | -------------------------------------------------------------------------------- /Finished/7. Timelines/1. example one/app.js: -------------------------------------------------------------------------------- 1 | // ------------------------------------- 2 | // var tl = gsap.timeline(); 3 | 4 | // tl.to(".box1", { 5 | // duration: 2, 6 | // scale: 0, 7 | // opacity: 0, 8 | // delay: 1, 9 | // }) 10 | // .to(".box2", { 11 | // duration: 2, 12 | // x: -200, 13 | // }) 14 | // .to(".box3", { 15 | // duration: 2, 16 | // x: -200, 17 | // borderRadius: 0, 18 | // rotate: 360, 19 | // }) 20 | // .set(".box1", { 21 | // x: 200, 22 | // }) 23 | // .to(".box1", { 24 | // duration: 2, 25 | // scale: 1, 26 | // opacity: 1, 27 | // }); 28 | // ------------------------------------- 29 | 30 | // REFACTOR TO DEFAULTS 31 | var tl = gsap.timeline({ 32 | defaults: { 33 | duration: 1, 34 | }, 35 | }); 36 | 37 | tl.to(".box1", { 38 | scale: 0, 39 | opacity: 0, 40 | delay: 1, 41 | }) 42 | .to(".box2", { 43 | x: -200, 44 | }) 45 | .to(".box3", { 46 | x: -200, 47 | borderRadius: 0, 48 | rotate: 360, 49 | }) 50 | .set(".box1", { 51 | x: 200, 52 | }) 53 | .to(".box1", { 54 | scale: 1, 55 | opacity: 1, 56 | }); 57 | -------------------------------------------------------------------------------- /Finished/7. Timelines/1. example one/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | timelines 7 | 8 | 9 | 10 |
11 |
12 |
13 |
14 |
15 | 16 | 17 | 18 | 19 | 20 | -------------------------------------------------------------------------------- /Finished/7. Timelines/1. example one/style.css: -------------------------------------------------------------------------------- 1 | * { 2 | padding: 0; 3 | margin: 0; 4 | box-sizing: border-box; 5 | } 6 | 7 | .container { 8 | display: flex; 9 | justify-content: center; 10 | align-items: center; 11 | height: 100vh; 12 | background: #1b1b1b; 13 | } 14 | 15 | .box { 16 | width: 50px; 17 | height: 50px; 18 | margin: 10px; 19 | background: #ffa31a; 20 | border-radius: 100px; 21 | } 22 | -------------------------------------------------------------------------------- /Finished/7. Timelines/2. example two/app.js: -------------------------------------------------------------------------------- 1 | // ---------------------------------------------------------- 2 | 3 | // ---- UGLY CODE 4 | // gsap.to("h1", { 5 | // y: -100, 6 | // color: "white", 7 | // duration: 1, 8 | // }); 9 | // gsap.to(".box1", { 10 | // x: -100, 11 | // duration: 1, 12 | // backgroundColor: "pink", 13 | // delay: 1, 14 | // }); 15 | // gsap.to(".box2", { 16 | // y: 100, 17 | // duration: 1, 18 | // backgroundColor: "purple", 19 | // delay: 2, 20 | // }); 21 | // gsap.to(".box3", { 22 | // x: 100, 23 | // duration: 1, 24 | // backgroundColor: "crimson", 25 | // delay: 3, 26 | // }); 27 | 28 | // ---------------------------------------------------------- 29 | // --- REFACTOR 🔥 30 | let tl = gsap 31 | .timeline({ 32 | defaults: { 33 | duration: 1, 34 | }, 35 | }) 36 | .to("h1", { 37 | y: -100, 38 | color: "white", 39 | }) 40 | .to( 41 | ".box1", 42 | { 43 | x: -100, 44 | backgroundColor: "pink", 45 | } 46 | // Controlling positions of timeline tween 47 | // "+=1" 48 | // "+=2" 49 | // "-=1" 50 | // "-=2" 51 | ) 52 | .to(".box2", { 53 | y: 100, 54 | backgroundColor: "purple", 55 | }) 56 | .to(".box3", { 57 | x: 100, 58 | backgroundColor: "crimson", 59 | }); 60 | -------------------------------------------------------------------------------- /Finished/7. Timelines/2. example two/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | timelines 7 | 8 | 9 | 10 |
11 |
12 |

Hello HuXn WebDev 😉

13 |
14 |
15 |
16 |
17 |
18 |
19 |
20 | 21 | 22 | 23 | 24 | 25 | -------------------------------------------------------------------------------- /Finished/7. Timelines/2. example two/style.css: -------------------------------------------------------------------------------- 1 | * { 2 | padding: 0; 3 | margin: 0; 4 | box-sizing: border-box; 5 | } 6 | 7 | body { 8 | height: 100vh; 9 | display: flex; 10 | flex-direction: column; 11 | justify-content: center; 12 | align-items: center; 13 | background: #1b1b1b; 14 | } 15 | 16 | .box { 17 | width: 50px; 18 | height: 50px; 19 | margin: 10px; 20 | background: #ffa31a; 21 | border-radius: 100px; 22 | } 23 | 24 | .buttons-container { 25 | display: flex; 26 | } 27 | 28 | button { 29 | padding: 10px 20px; 30 | margin-left: 10px; 31 | outline: none; 32 | } 33 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HuXn-WebDev/JS-Animations-With-GSAP/2d6da900cd874a2bba684b557428ef17cb49137d/README.md -------------------------------------------------------------------------------- /Simple Project/Finished/app.js: -------------------------------------------------------------------------------- 1 | var tl = gsap.timeline({ 2 | defaults: { 3 | opacity: 0, 4 | ease: "linear", 5 | duration: 1, 6 | }, 7 | }); 8 | 9 | tl.fromTo( 10 | ".sidebar", 11 | { width: 0 }, 12 | { 13 | opacity: 1, 14 | width: "30%", 15 | } 16 | ); 17 | 18 | tl.fromTo( 19 | ".main-img", 20 | { x: 0 }, 21 | { 22 | opacity: 1, 23 | } 24 | ); 25 | 26 | tl.fromTo( 27 | ".content", 28 | { x: 100 }, 29 | { 30 | opacity: 1, 31 | x: 0, 32 | } 33 | ); 34 | -------------------------------------------------------------------------------- /Simple Project/Finished/boxed-water-is-better-tkJnOS-jNGE-unsplash.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HuXn-WebDev/JS-Animations-With-GSAP/2d6da900cd874a2bba684b557428ef17cb49137d/Simple Project/Finished/boxed-water-is-better-tkJnOS-jNGE-unsplash.jpg -------------------------------------------------------------------------------- /Simple Project/Finished/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Creatives Project 7 | 8 | 9 | 10 | 22 | 23 |
24 | 25 |
26 | 30 | 31 |
32 |

CREATIVES

33 |

34 | Welcome to the real world.
35 | Explore our gallery. 36 |

37 |
38 |
39 | 40 | 41 | 42 | 43 | 44 | -------------------------------------------------------------------------------- /Simple Project/Finished/style.css: -------------------------------------------------------------------------------- 1 | @import url("https://fonts.googleapis.com/css2?family=Roboto:wght@100;300;400;500;700;900&display=swap"); 2 | 3 | @import url("https://fonts.googleapis.com/css2?family=Kumar+One+Outline&display=swap"); 4 | 5 | * { 6 | padding: 0; 7 | margin: 0; 8 | box-sizing: border-box; 9 | } 10 | 11 | nav { 12 | display: flex; 13 | justify-content: space-around; 14 | align-items: center; 15 | position: fixed; 16 | width: 100%; 17 | z-index: 99; 18 | margin-top: 20px; 19 | } 20 | 21 | nav ul { 22 | display: flex; 23 | } 24 | 25 | nav ul li { 26 | list-style: none; 27 | margin-left: 40px; 28 | font-size: 12px; 29 | font-family: sans-serif; 30 | } 31 | 32 | nav ul li a { 33 | text-decoration: none; 34 | color: #000000; 35 | } 36 | 37 | .logo-container h1 { 38 | font-family: sans-serif; 39 | } 40 | 41 | .sidebar { 42 | background: #d75157; 43 | width: 30%; 44 | height: 100vh; 45 | position: fixed; 46 | z-index: -1; 47 | } 48 | 49 | .content-container { 50 | display: flex; 51 | flex-wrap: wrap; 52 | justify-content: center; 53 | align-items: center; 54 | height: 100vh; 55 | font-family: "Roboto", sans-serif; 56 | } 57 | 58 | .main-img { 59 | width: 40%; 60 | margin-top: 3rem; 61 | margin-left: 6rem; 62 | } 63 | 64 | .main-title { 65 | transform: rotate(-90deg); 66 | margin-top: 10rem; 67 | font-size: 3rem; 68 | font-family: "Kumar One Outline", cursive; 69 | } 70 | 71 | .main-info { 72 | transform: rotate(-90deg); 73 | font-family: sans-serif; 74 | text-align: center; 75 | width: 200px; 76 | margin-bottom: 5rem; 77 | margin-left: 7rem; 78 | } 79 | -------------------------------------------------------------------------------- /Simple Project/Starter/app.js: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HuXn-WebDev/JS-Animations-With-GSAP/2d6da900cd874a2bba684b557428ef17cb49137d/Simple Project/Starter/app.js -------------------------------------------------------------------------------- /Simple Project/Starter/boxed-water-is-better-tkJnOS-jNGE-unsplash.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HuXn-WebDev/JS-Animations-With-GSAP/2d6da900cd874a2bba684b557428ef17cb49137d/Simple Project/Starter/boxed-water-is-better-tkJnOS-jNGE-unsplash.jpg -------------------------------------------------------------------------------- /Simple Project/Starter/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Creatives Project 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /Simple Project/Starter/style.css: -------------------------------------------------------------------------------- 1 | @import url("https://fonts.googleapis.com/css2?family=Roboto:wght@100;300;400;500;700;900&display=swap"); 2 | 3 | @import url("https://fonts.googleapis.com/css2?family=Kumar+One+Outline&display=swap"); 4 | 5 | * { 6 | padding: 0; 7 | margin: 0; 8 | box-sizing: border-box; 9 | } 10 | -------------------------------------------------------------------------------- /Starter/1. JS Animation/app.js: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HuXn-WebDev/JS-Animations-With-GSAP/2d6da900cd874a2bba684b557428ef17cb49137d/Starter/1. JS Animation/app.js -------------------------------------------------------------------------------- /Starter/1. JS Animation/index.html: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HuXn-WebDev/JS-Animations-With-GSAP/2d6da900cd874a2bba684b557428ef17cb49137d/Starter/1. JS Animation/index.html -------------------------------------------------------------------------------- /Starter/1. JS Animation/style.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HuXn-WebDev/JS-Animations-With-GSAP/2d6da900cd874a2bba684b557428ef17cb49137d/Starter/1. JS Animation/style.css -------------------------------------------------------------------------------- /Starter/2. Tween/app.js: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HuXn-WebDev/JS-Animations-With-GSAP/2d6da900cd874a2bba684b557428ef17cb49137d/Starter/2. Tween/app.js -------------------------------------------------------------------------------- /Starter/2. Tween/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Tween 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /Starter/2. Tween/style.css: -------------------------------------------------------------------------------- 1 | * { 2 | padding: 0; 3 | margin: 0; 4 | box-sizing: border-box; 5 | } 6 | 7 | .container { 8 | display: flex; 9 | justify-content: center; 10 | align-items: center; 11 | height: 100vh; 12 | background: #1b1b1b; 13 | } 14 | 15 | .box { 16 | width: 50px; 17 | height: 50px; 18 | margin: 10px; 19 | background: #ffa31a; 20 | border-radius: 100px; 21 | } 22 | -------------------------------------------------------------------------------- /Starter/3. Set Method/app.js: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HuXn-WebDev/JS-Animations-With-GSAP/2d6da900cd874a2bba684b557428ef17cb49137d/Starter/3. Set Method/app.js -------------------------------------------------------------------------------- /Starter/3. Set Method/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Set Method 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /Starter/3. Set Method/style.css: -------------------------------------------------------------------------------- 1 | * { 2 | padding: 0; 3 | margin: 0; 4 | box-sizing: border-box; 5 | } 6 | 7 | .container { 8 | display: flex; 9 | justify-content: center; 10 | align-items: center; 11 | height: 100vh; 12 | background: #1b1b1b; 13 | } 14 | 15 | .box { 16 | width: 50px; 17 | height: 50px; 18 | margin: 10px; 19 | background: #ffa31a; 20 | border-radius: 100px; 21 | } 22 | -------------------------------------------------------------------------------- /Starter/4. from and fromTo Methods/app.js: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HuXn-WebDev/JS-Animations-With-GSAP/2d6da900cd874a2bba684b557428ef17cb49137d/Starter/4. from and fromTo Methods/app.js -------------------------------------------------------------------------------- /Starter/4. from and fromTo Methods/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Set Method 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /Starter/4. from and fromTo Methods/style.css: -------------------------------------------------------------------------------- 1 | * { 2 | padding: 0; 3 | margin: 0; 4 | box-sizing: border-box; 5 | } 6 | 7 | .container { 8 | display: flex; 9 | justify-content: center; 10 | align-items: center; 11 | height: 100vh; 12 | background: #1b1b1b; 13 | } 14 | 15 | .box { 16 | width: 50px; 17 | height: 50px; 18 | margin: 10px; 19 | background: #ffa31a; 20 | border-radius: 100px; 21 | } 22 | -------------------------------------------------------------------------------- /Starter/5. Staggers/app.js: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HuXn-WebDev/JS-Animations-With-GSAP/2d6da900cd874a2bba684b557428ef17cb49137d/Starter/5. Staggers/app.js -------------------------------------------------------------------------------- /Starter/5. Staggers/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Set Method 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /Starter/5. Staggers/style.css: -------------------------------------------------------------------------------- 1 | * { 2 | padding: 0; 3 | margin: 0; 4 | box-sizing: border-box; 5 | } 6 | 7 | .container { 8 | display: flex; 9 | justify-content: center; 10 | align-items: center; 11 | height: 100vh; 12 | background: #1b1b1b; 13 | } 14 | 15 | .box { 16 | width: 50px; 17 | height: 50px; 18 | margin: 10px; 19 | background: #ffa31a; 20 | border-radius: 100px; 21 | } 22 | -------------------------------------------------------------------------------- /Starter/6. Controlling Tweens/app.js: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HuXn-WebDev/JS-Animations-With-GSAP/2d6da900cd874a2bba684b557428ef17cb49137d/Starter/6. Controlling Tweens/app.js -------------------------------------------------------------------------------- /Starter/6. Controlling Tweens/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Controlling Tweens 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /Starter/6. Controlling Tweens/style.css: -------------------------------------------------------------------------------- 1 | * { 2 | padding: 0; 3 | margin: 0; 4 | box-sizing: border-box; 5 | } 6 | 7 | body { 8 | height: 100vh; 9 | display: flex; 10 | flex-direction: column; 11 | justify-content: center; 12 | align-items: center; 13 | background: #1b1b1b; 14 | } 15 | 16 | .box-container { 17 | display: flex; 18 | justify-content: center; 19 | align-items: center; 20 | margin-bottom: 5rem; 21 | } 22 | 23 | .box { 24 | width: 50px; 25 | height: 50px; 26 | margin: 10px; 27 | background: #ffa31a; 28 | border-radius: 100px; 29 | } 30 | 31 | button { 32 | padding: 10px 20px; 33 | margin-left: 10px; 34 | outline: none; 35 | } 36 | -------------------------------------------------------------------------------- /Starter/7. Timelines/1. example one/app.js: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HuXn-WebDev/JS-Animations-With-GSAP/2d6da900cd874a2bba684b557428ef17cb49137d/Starter/7. Timelines/1. example one/app.js -------------------------------------------------------------------------------- /Starter/7. Timelines/1. example one/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | timelines 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /Starter/7. Timelines/1. example one/style.css: -------------------------------------------------------------------------------- 1 | * { 2 | padding: 0; 3 | margin: 0; 4 | box-sizing: border-box; 5 | } 6 | 7 | .container { 8 | display: flex; 9 | justify-content: center; 10 | align-items: center; 11 | height: 100vh; 12 | background: #1b1b1b; 13 | } 14 | 15 | .box { 16 | width: 50px; 17 | height: 50px; 18 | margin: 10px; 19 | background: #ffa31a; 20 | border-radius: 100px; 21 | } 22 | -------------------------------------------------------------------------------- /Starter/7. Timelines/2. example two/app.js: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HuXn-WebDev/JS-Animations-With-GSAP/2d6da900cd874a2bba684b557428ef17cb49137d/Starter/7. Timelines/2. example two/app.js -------------------------------------------------------------------------------- /Starter/7. Timelines/2. example two/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | timelines 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /Starter/7. Timelines/2. example two/style.css: -------------------------------------------------------------------------------- 1 | * { 2 | padding: 0; 3 | margin: 0; 4 | box-sizing: border-box; 5 | } 6 | 7 | body { 8 | height: 100vh; 9 | display: flex; 10 | flex-direction: column; 11 | justify-content: center; 12 | align-items: center; 13 | background: #1b1b1b; 14 | } 15 | 16 | .box { 17 | width: 50px; 18 | height: 50px; 19 | margin: 10px; 20 | background: #ffa31a; 21 | border-radius: 100px; 22 | } 23 | 24 | .buttons-container { 25 | display: flex; 26 | } 27 | 28 | button { 29 | padding: 10px 20px; 30 | margin-left: 10px; 31 | outline: none; 32 | } 33 | -------------------------------------------------------------------------------- /Starter/8. Creatives Project/app.js: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HuXn-WebDev/JS-Animations-With-GSAP/2d6da900cd874a2bba684b557428ef17cb49137d/Starter/8. Creatives Project/app.js -------------------------------------------------------------------------------- /Starter/8. Creatives Project/boxed-water-is-better-tkJnOS-jNGE-unsplash.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HuXn-WebDev/JS-Animations-With-GSAP/2d6da900cd874a2bba684b557428ef17cb49137d/Starter/8. Creatives Project/boxed-water-is-better-tkJnOS-jNGE-unsplash.jpg -------------------------------------------------------------------------------- /Starter/8. Creatives Project/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Creatives Project 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /Starter/8. Creatives Project/style.css: -------------------------------------------------------------------------------- 1 | @import url("https://fonts.googleapis.com/css2?family=Roboto:wght@100;300;400;500;700;900&display=swap"); 2 | 3 | @import url("https://fonts.googleapis.com/css2?family=Kumar+One+Outline&display=swap"); 4 | 5 | * { 6 | padding: 0; 7 | margin: 0; 8 | box-sizing: border-box; 9 | } 10 | -------------------------------------------------------------------------------- /thumb.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HuXn-WebDev/JS-Animations-With-GSAP/2d6da900cd874a2bba684b557428ef17cb49137d/thumb.png --------------------------------------------------------------------------------