GSAP Animation

1. Introduction : Hello, everyone. Welcome to GSAP Animation. Beginner to Advance journey. I am Join the shortcut, FoostaC web developer, Python programmer, and an instructor passionate about bringing web animation to life. If you have ever been fascinated by smooth transition, eye catching effects or dynamic page introduction, then this course is for you. Now the question is why you choose SAP animation? Grinsoc Animation platform or SAP is one of the most powerful JavaScript libraries for web animation. It allows you to create stunning web animation with ease, whether it is simple fade or slight, otherwise, complex scroll tiggered animation. Unlike CSS animation, GSP offers more control, better performance, and endless possibilities. Now let's talk about what you will learn from it. Throughout this course, we will explore everything from basic gap animation to advanced motion sequence, SVG animations and scroll based effect. We are going to learn about timelines, scroll tigeredPath animations and many. By the end, you will able to create professional grade animation. That will take your website and projects to the next level. No matter if you are beginner or already familiar with animation principles. I will guide you step by step. If I talk about the projects that I'm going to cover in this tutorial, we are going to build custom curor animation, Elastric string Vigi animation, timeline animation project, text animation, and scroll text animation. After that, after that, I'm going to create a landing pace design. Also, I'm going to cob motion path animation, more SVG animation, and many more. Time to time, I'm going to add new project in our class. Let's get started and bring you design to the live with SA. 2. What is GSAP Animation: Hello, and welcome to Mastering SAP Animation course. My name is Joana Shortca. I am Full Stack Web developer and online instructor. We use SAP Library for web animation. In this course, we are going to learn a lot of things about SAP animation with great details. And I will make sure you enjoy the whole process. Now, let's see what is JSAP animation. Basically, JSAP is a JavaScript animation library. I want to say it is pre built Animation library, which is made by JavaScript. Now the question is, what is animation? What kind of animation? I want to say the web animation. Whatever movement you see in your web page, it is made with animation. Any kind of transitions are animations, and web animation help us to engage with user, and it also enhanced user experience, and also users spend a good amount of time in your web page. So that's the benefit of using animation in our web pages. But what exactly is JSAP? As I told you, SAP is a JavaScript library, and its full form is Greensok Animation platform. It is a JavaScript library which is help us to perform a complex animation in our webpage. With the help of SAP, we need to write little amount of code to create a beautiful web animations. It provides us more feature with less code. If you don't have prior knowledge about JavaScript, also you can learn JSAP animation. But it is good, if you have knowledge of JavaScript Dom document object model. And if you don't have any knowledge about CSS and TML, then this course is not for you. It is not for the beginners. Now, let's jump into the official website of SAP animation. This is the official website of GSAP animation, sap.com. If you click on this website, here you can notice some animations. If you click on this link, you can notice some animation examples. As you can see, these are all animation is created by GSAP. Also, it is the official website. If I scroll down a little bit, here you can see a lot of SVG animations, shape changing animation, text effect animations, then scroll trigger animation. So as you can see, when I scroll this page, at that section, this area moves sideways. Also, it performs some beautiful animations. We can apply easing effects and many more. There are a lot of things we can do with GSAP animation, such as school animations, AVG, text animations, UI interactions, and other advanced animations. Using JSAP we can perform scroll trigger, scroll smoother, scroll through. Also, in SVG selection, we can use SVG morph such as shape changing, SVG drawing animation, SBC motion path animation, and many more. Then for UI, we can learn, flip, split text, drag, and for the text, we can use split text, scramble text, and many more. We are going to learn all of it in our upcoming tutorials. This course is complete package of SAP animation. And if you want to see more examples, in that case, you need to click on Showcase. Here you can see a hundreds of websites that are made with GAP animation. If I scroll down a little bit, also, these are sorted by animation type such as three gs animation, SVG animation, text animation, school animation, wave flow react and WebGL. In this tutorial, basically, we are going to focusing on code JSAP concepts. Also, you're going to learn SVG animation, pixed animation, scrol animation, and UI interactions. Now you might have questioned how we can implement SAP animation in our web pages. For that, you can search for CRL link. So here you can search for CRN Link in Google. So type G SAP Syrian. As you can see, it provides a website called cinjs.com. If I open this website, and here you can see all the Syrians related SP animations. This is the main Can about SP animation, and these are the supported libraries about SAP animation, such as sleep, motion path, plugin, scroll trigger, text plugin. We're going to learn all of it in our upcoming tutorials. Don't worry about it. From that section, you can found all the important CENS. Also, you can jump into the doc section of this website. Also you can found the CDN link from this website. If you pick out installation section, from that section, you can found how you can install it using NPM, note packaging manager. Also you can found the CDN link of this library. Also, if you had knowledge about RN, you can implement it. So in this tutorial, basically, we are going to focus on CDM. Now, let me show you some project what we are going to build in this series. 3. Implementation GSAP animation : So this is the first tutorial related SP animation. In this tutorial, we are going to learn how we can implement JSP animation in our web page. Also, I'm going to explain from and to keyword in JSP animation. So let's stunt the tactical. So as you can see in my current working directory, we have only index dot TML file. Now I'm going to create a JavaScript file, Sound type app dot Js. And I'm going to hit Enter. And now I'm going to link this JavaScript file in my TML document. So here I'm going to use Script tag. Script source source equal to app dot js. I'm going to set this file. And you can take any name for your JavaScript file. It's not mandatory to use app dot js. You can use script doot js, hm doj, ht dogs. It's all about you. Now, let's back to the document page. After open the documentation section, you need to click on Install dropdown option. Otherwise, you can search for Install. I'm going to click on this section Install, and here it provide all type of installation method. Using NPM note package manager, also you can use CEN, content delivery network, also provide R. The best and easiest way to use this animation is CIN. And this is your CEN link provided by JSAP I'm to copy this link and back to my Wizar studio cod editor. And I'm going to paste it before the app dot js script tag. And I'm going to set this file. Always use your custom JS file below the source file. Because first, your browser should have knowledge about JSAP. Then it can easily call the functions in your custom JS file. And now we are going to experimenting with little animation. Also, we can create this animation using CSS, but we are not going to use CSS here. So let's implement the GSO app animation. So in our body tag, first, I'm going to create a deep tag, Dev dot box. Here I created deep tag with class name box. And then I'm going to style this box a little bit. Let me show you. So I'm going to use style tag. Style and inside the style tag, I'm going to select the box, dot, box, then inside the Carli resist, first property I'm going to use weed. And here, I'm going to say with 200 pixel. Also, I'm going to say height, height, 200 pixel. Basically, I'm going to create a square box. And then I'm going to say it background. Background, and it could be any color. For now, I'm going to use red color because red color is much more visible. And I'm going to set this file. After set this file, here you can see the result. So we done our DML and CSS part. Let's jump into the app dot JS file, greensock animation. Did you remember in our previous tutorials, we learn about two and from. Suppose I want to move this box at XSS direction. I want to move it 100 pixel at excess direction. For now, this box S's position is zero, and I want to move it hundred pixel. If you want to move zero to 100, then you need to use two. And if you want to move 100 to zero again, then you need to use from. Just you need to remember the basic concept about it. Basically in GSAb we use this two method to perform our animation to and from. Without this, there is another method called from two, but I'm not going to discuss about it in this two. Now, let's try to understand how it's work. Suppose this is our window where I'm going to perform the animation, and here we place an element and it is the initial position of this element. Now I want to move this element at excess direction at this direction. Also, I want to scale this element, something like that. And during this translation, I want to animate this element. And this is the final position of this animation. And if you want to animate this element from the initial position to final position, you need to use this meth, Gs two meth. And if you want to reverse it back, I want to say, if you want to run the animation from the final position to initial position, in that case, you need to use from method. So if we run this animation using two method, it's going to work this object from this position to this position and also it going to scale up this element. And if we use from method using the same property, then it's going to do the opposite thing. It's going to work this object, final position to initial position. I want to say it going to run the animation at opposite direction. That's the main use of this two method. So let's vet to the misses studio code again. Let's start the code to clear the concept. So here, I'm going to tie Gs. GSAPt we are going to use two function. To. Then inside the round basis, you need to mention this selector, which element you want to select. I'm going to select this box using its class name. So inside the double codes, I'm going to type dot box. Then comma. Next line, I'm going to use Calibrasis and here we need to mention what do we want to do with this box? I want to move this box at Xxs direction. I would pass X, colon, and I'm going to move it up to 300 pixel. And before I set this file, if I show you my index dot estimate file, and if I show you my style section, and as you can see in my style section, we do not use any animation. After I set this file, as you can see, it's not working my autos because my autosaon replaced this keyword with this one. So again, we need to replace it with GSAP. Yes. And I'm going to set this file. Up to set this file, as you can see, it's moved the element from this position to this position at X's direction. Now, let me explain to you what is going on behind the scene. So let's inspect this section and first, I'm going to untick this option and then and then I'm going to select this element, and here I'm going to open my style session. As you can see in this style session, as you can see in this style section, Heart use transform probity, transform, translate 300 pixel. So behind the scene, GSAP use this CSS probity to move this element. Let me clear the concept. I'm going to extend the value. I'm going to make it 500. This time I'm going to move it 500 pixel. If I set this file, here you can see now transform translate value is XXs position 500 pixel and YXs position still zero. Because we do not move this element at YXs direction, that's why it's set and zero. So the core structure made with CSS. For this tutorial, I think live server is not mandatory, so I'm going to turn off the live server. And for now, I'm going to open index dot HTML file from our directory. So as you can see, this time I open this file from my directory, I'm not going to use any live server. So if I reload this browser, you can see the animation. You can experience this animation. If I use the live server, then it's not working so well. So for now, if I reload this browser, as you can see it moving so fast, so I'm going to set some duration. So here, I'm going to use comma. Then I'm going to use property call duration. Duration, colon, for now, I'm going to set five second. And I'm going to set this file. After set this file, if I reload this browser, now you can see our animation take five second to complete it. If I reload it again, here you can notice time to time it increase our Ss value. Basically, it changes the CSS property according to duration. And if you want to run this animation after 2 seconds, yes, you can use delay. Just introduce Coma, then you need to type delay. Delay, colon, and I want two second delay. If I set this file and reward my browser, as you can see, after 2 seconds, it's start our animation. So to make this animation happen, we don't need to type huge amount ofp CSS code in our CSS section. Just want to use this amount of code if we use GSAP Library. Next, I'm going to move this box at YXs direction. So here, I'm going to type Y, colon, and from YX direction, I want to move it 300 pixel. If I set this file and reload my browser, as you can see, after waiting two second, XXs also move YXs diction. At the same time, if you want to change the background color, you can use this property. Suppose I want to change the background, so I'm going to take background property. Background color. Colon, and I want to say it green color. Background color green. And then I'm going to set this file. Up to set this file, I'm going to reload the browser. Up to set this file, as you can see, it's not working because I think I did some misses. We need to provide this value is a string wheel so I need to provide this value inside the quotation. So I'm going to use single quotes. So again, I'm going to set this file and rewrote my browser. After red my browser, after writing but two second, as you can see, it start the animation and also it changed the background color of this deep element. For now, I'm going to reduce the duration. I'm going to make it two second. Also, I'm going to remove delay and set this file again. As you can see, now it turned red to green. And remember, in CSS, we use background property like this. Background hyphen colored. But in JavaScript, we do not use background properties like this. Here we use camel case order. As you can see, our C characters start with camel case. So we use camel case. In Java script. Here you can use with height property. Also scale property. Suppose I want to scale this element. So hero type scale. Scale, and I want to scale it up to two time then comma. Now, if I run this animation, it's going to extend this element to time. Let me show you. So to run this animation, as you can see, it extends the size of this box. Now it's become 400 pixel at Xxs and 400 pixel at YXs. Not only that you can set width and height, let me show you. So again I'm going to sub this file and my browser, and this time, I'm going to set width. We and here I'm going to set width 100 pixel. Basically, if I set this file and run this animation, it's going to reduce the element width because by default, our element width is 200 pixel. So if I relate this animation, as you can see, it reduce the width of this element. So as you can see using two method, we can move the element from the initial position to final position. But we can do the opposite thing using from method. If I replace two with from and then set this file and reload my browser. Let's see what is going to return. This time, you can see it do the opposite. Now you can see whenever I read my browser, it, it move final position to initial position. And also, you can notice it increase the width and change the color it back to the initial state. So this is what can we do with from and to method. So thanks for watching this video Situe for our next tutorial. 4. GSAP animation properties and method: Hey, guys, good to see you back. This is another tutorial related green sock animation. In our previous tutorial, we create this basic animation using GSOC. If I reload this page, as you can see, this is our animation. It took 2 seconds to complete the animation. Also, it reduced the width of this element. With that, also change the background color of this element, red to green. And now I'm going to show you how you can rotate this element. So for now, I'm going to comment out this line with. Then I'm going to use another property called rotate. Rotate and I want to rotate it 360 dieno If I set this file and load my browser, you can see the result. We can do all this stuff using CSS property in GSP animation. In future, we are going to apply this animation with events. That's why JavaScript is important. And now we are going to jump into the from function again. Now I'm going to comment out all the lines. Then I'm going to call from function. So again, I'm going to type G GSAPt again, my autosuggst replace my keyword. So I'm going to type JSAP Mnuali. SAP dot from. Then inside the round grass. At first, I'm going to select the box element. Dot box. In the next line, I'm going to use aliases. Inside the Cali resis we need to define our properties and values, and I'm going to apply exact same properties. So here I'm type X. X value is 500. Y value is 300. Next, I'm going to pass rooted value. Rotd Value. I'm going to apply 360 degree. Next value I'm going to say duration. Duration, and I'm going to run two second. Next, I'm going to apply background color. Background color. Background color, I'm going to apply in at the single code green. And I want to set this file. So basically, I apply the same properties which I apply in my two function. If I deload my browser, now you can understand what is the difference between two and from function. When I use two function, it moved the element from the origin. But when we apply from function, then it's back to its origin place. So if I reload my browser, as you can see, it return to the origin place. If I reload my browser again, as you can see, it's back to the origin position. So that's the basic difference between two and from function. If you notice you can see it turned into green to red color. Also, it rotate in opposite direction. Now let's talk about repeat property. If you want to repeat this animation multiple time, then you need to use this property. So her type, repeat. Repeat, and I'm going to say repeat three time. If I reload my browser, it's going to repeat this animation total four time. Because by default, it's going to run our animation one time, then it's going to repeat the animation three time. Let me show you. So I'm going to reload my browser. After I load my browser, as you can see, it's going to repeat this animation total four time. And now, if you want to repeat it infinite time for that, you can use minus one value. If I set this file and reload my browser, as you can see, it's going to run our animation in finite time. It not going to stop until I change the value. So for now, I'm going to change the value, repeat. Zero, and I'm going to set this file. After set this file, I'm going to reload my browser. So this time it run the animation only for one time, but it do not repeat it. And now I'm going to apply UU Effect. As you can notice, our animation move only one direction. But if we hit a ball in a ground, it bounces back. I want it to go straight and came back. For that, we need to use a property call UU. So to type Yu Yu. I'm going to pass true. True. Then I'm going to repeat this animation. Fourth time. I want to sub this file. If I reload the browser, you can see the U effect. Now it's work like UU If I make this value true, then it move forward and backward. It will go once and come back. And if I pass repeat value infinite, then infinite time, it's going to do the same thing. Not only that, also you can apply the same property in this two function. Then it's going to provide you the same effect, but the difference is if we use two function, then this element not going back to the or is in position. I stop in the destination position at that place. Now let's back to the index dotest page. As you can see, now we have only one deep element, but I'm going to get this line total three time. Now we have total four deep element. Also, I'm going to comment out some properties in my app dot js function. First, I'm going to remove rotate function. Then I want to move it only X's direction. Next, I'm going to remove the repeat value. Also, I'm going to comment out EUO value. Then I want to set this file. Then back to the ATL page and reduce the size of this box. This time, I'm going to make it 100 pixel width by 100 pixel. If I set this file and reload my browser, it's going to apply all the animation animation, all the deep element because their class is same. Let's provide a little margin between them. Margin Five pixel. And I'm going to set this file. After I set this file, if I read my browser, now you can see the gap between them. And now I'm going to change the class name all of these elements. This is box one. This is box number two. This is box number three, and this is box number four. And I'm going to set this file. Now, let's back to the app dot js file. So this is box number one. First, I'm going to change the animation style. I'm going to use two function. This app two. Then I'm going to duplicate this section multiple time. Basically I'm going to remove all of these commented lines. I don't need it. Then I'm going to duplicate this section total three time. This is box number two. This is box number three. Sorry, this one is box number. This one is box number three and last one is box number four. If I set this file and rewrote my browser, it's going to return the same result. Oops, we need to make changes in our index HTML file style section. Here I'm going to target all the DV element at once because I change because from here, I change the class names. So I'm going to pass the element name tag name D. And set this file. If I delete my browser, you guys see the result. Now, all the elements complete the animation at same time. But now I want to run second number after the first number. I want to say after I run the first element animation, I want some little delay for the second element. For that, here I'm going to use another property called delay. So in our box two, I'm going to use delay property. Delay, and I want to delay it up to 2 seconds. Oops delay spelling is wrong, DEAY. So I want to set this file again and reload my browser. After I reload my browser, as you can see, after two second delay, it run our animation. So one by one, you can delay the animation. Suppose for third element, I want to delay it up to four second. Then for the fourth element, I want to delay it up to six second. So again, I'm going to set this file and reload my browser. After I load my browser, after I complete it, it waiting for two second, then it going to run one by one. Now the problem is you need to select all the box one by one. Also, you need to apply delay multiple time. But greensock have this solution for this. So I'm going to comment out all the line except the first one. Then I duplicate the first one and comment out this duplicate one. And this time, I'm going to select all the boxes at once, so I'm going to remove box one. Also, we need to make changes in our estable file. Now again, I'm going to change all the class name. Otherwise, also we can add another class name box. So here I'm going to add box. Box. I'm going to set this file. Basically, here we use multiple glass at the same element. Now, let's back to the app js file. Now I'm going to apply the same delay in my animation. For that, I need to use a property called Stagger, STAGER Stagger, and I'm going to set six. Com. Then I'm going to set this file. After I set this file, I'm going to reload my browser. As you can see, after complete the first one, then it to run the second one. Then after complete the second one, then it's going to run the third one. At the same way, after you complete the third one, then it's going to run the fourth one. If I reduce the dagger value, if I make it four and then set this file, now it's going to do the same thing a little faster. So after I complete the first one, it's going to run the second one. Then it's going to run the third one. At last, it's going to run the fourth one. And if I reduce this dagger value more, if I make it 1 second, one and then set this file and load my browser, now you can see after 1 second, it's going to run all the animation one by one. Now we don't need to type this amount of code to get the result. Just one property and value do the same thing. We don't need to create individual animation for that. The help up Stagger value, you can define the delay time between the animations. Stagger value going to manage your individual delays. If you open the documentation of this GSP animation and search for two function two GSAP to function. And if you open this section, here you can see the usage of these special properties. You can see data delay, duration, es, ID, lazy. There are a lot of properties related to function, and you can use all of it. After scroll down this page a little bit, here you can see the stagger property. And from this section, you can read the documentation about stagger property. Official documentation is the best way to learn something. It's always give you the right and up to dated answer. You can read about U property, UEs, keyframes, et cetera. In our first tutorial and the second tutorial, I just try to introduce how we can use GSP animation and what are the properties. We just learn about the working process of GSP animation. From the next tutorial, we are going to learn about timelines. So this is it for this tutorial. Thanks for watching this video. Stay tuned for the next tutorial. 5. How to use scroll Trigger part 1: Hello, guys. Good to see you back. Once again, I'm back with a new tutorial related GSAP animation. And today in this section, we are going to learn scroll trigger. It is one of the most important feature of GSAP animation. In that section, we are going to learn how we can trigger our animation at certain point. As you can see, if I scroll down this page, now you can see when our trigger switch, this is our trigger switch, cross the scroller start section, then it's going to start our animation at second page. Let me show you. So when I scroll down this page and when it crossed this section, now you can see it triggered this animation. So this is what we can do with Scroll trigger. So let's see how we can apply Scroll trigger in our web pages. So let's jump into the visor Studio code editor. So finally, we are in my visor Studio code editor, and as you can see in my current working directory, we have total three file, index dot TML, script dot js and style CSS. And I already create the boilerplate for STML. Then at first, I'm going to link the CSS file with this TML document. So Hemotype link and I'm going to pass the Film style dot css. And also, we need to initialize script dot js file with this document. So type script tag. Script, and inside the source, isRC I'm going to pass JavaScript file name, which is script dot js, this one. I'm going to set this file. After that, I'm going to jump into the CSS file style dot CSS, and here, I'm going to type the boiler plate for the CSS file. So I'm going to type start the universal selector. Then inside the Cariass I'm going to say it merging Zero. Then I'm going to say padding, also zero. After that, we need to say box sizing, box sizing, and here I'm going to use border box. Then if you want to select any font, yes, you can. For now, I'm going to select font family, and I'm going to use Aerial font. You can use whatever you want. Then I'm going to select the ML tag, HTL. With that, also, I'm going to select body tag. Body, then inside the aliases. Here I'm going to type height. I'm going to set height. I'm going to set height 100%. Next, I'm going to say weed. Also I'm going to set we 100%. Now let's back to the index dot TML page. And inside the body tag, first, I'm going to create a deep tag, DH tag, and I'm going to say it ID, page one, page one. At the same way, I'm going to create two other pages. So I duplicate this section to time. This is page number two. And this one is page number three. So as you can see, here we create total three page, page one, page two, and page three. Now, let's tile all of this page. So let's jump into the tile dot CSS file. And here, I'm going to type page, hashtag, page one, inside the color recess. I'm going to say it height. I'm to say it height, 100%. Also, I'm going to say wed hundred percent, and then I'm going to add a background color. Background color, and I'm going to use light blue color. Light blue, this one. Now, let's open the page and see what it going to create. So here I open this page without Live Server. As you can see, this is our first page with light blue color. This is page one. At the same way, I'm going to style to other pages. So let's get to the Visual Studio code. So I'm going to duplicate this section two time. This is for page two, and I'm going to change the color. I'm going to change the diagraund color, and I'm going to make it a little darker. This amount of darkness. At the same way, I'm going to style page three. At first, I'm going to change the ID name, page three. Then I'm going to select this amount of dark shadow, this amount of color. I'm going to set this file. After I set this file, if I get to my browser and reload this page, now you can see we have total three different page with different color. This is page one, this is page two, and this is page three. Let's create page three more dark. Let's d to the studio code and I'm going to make it more dark. I think this one is good. I'm going to set this file again. Let's d to the browser and I'm going to reload this file. Now you can differentiate both the pages. The color is different. So right, it's clear for you how we create run three different pages and we style these pages. Now, let's back to the index dot estimate five. Now inside the first page, I'm going to create a D element with Dame box Stip D has tag, and our DM is box. And this is box one. Also, I'm going to assign a class class box. Then I'm going to create same boxes in our other pages. So to copy this section and I'm going to paste it here. This is for page two, and this one is for page three, but I'm going to change the ID name. This is box three, and this one is box two. And I'm going to set this file. And then I'm going to style this box. So I'm going to use its class name box. So let's jump into the style CSS file, and here I'm going to style dot box. Get inside the alias. First, I'm going to say height, height, and I'm going to make it 300 pixel. And then I'm going to say With. For With, also, I'm going to use 300 pixel and for background color background color, here I'm going to set it crimson. This one, and I'm going to set this file. Now, let's back to the browser. And if I reload this browser, as you can see, as you can see in our first page, it creates a box. Also, it creates the box in our second page and in our third page. And now we need to align this box, center of this page. For that, let's to the user studio code and inside our page one, I'm going to use display probity, display, and I'm going to use display flick. Then Hemo type in align item center. Also, we need to justify content, justify content also center. And as you know, we need to make all the boxes center of this page, so I'm going to copy this code, and I'm going to paste it inside the page two. Also, I'm going to paste it inside the page three, and I'm going to set this file. After I set this file, if I back to my browser and reload this page, you can see the result. Now, in our every page, it align this deep element center. So now it's clear for you how we can create this structure. Now, let's talk about GSAP. So I'm back to my index dot HTML page, and here we need to import the GSAP link. We need to import using CDN. To import the CDN link, I'm going back to the browser and I'm going to open a new tab, and here, I'm going to search for GSAP CDN. Just you need to remember if you want any CDN link from JSAP, you need to type SAP CDN. And from here, you can use this website, cinj.com. So if I open this website, SAP Libraries, it provides all the serious link related SAP. From here, you can select your SAP versions, but I'm going to use the latest one, so I'm going to use this one from here and from here, I'm going to copy this link, the first link, and I'm going to copy and back to my visas studio code, and I'm going to paste it here before the skid dot JS five and you know the process. So we already create this structure and also we style this structure. So after sep this file, let's jump into the scrip dot JS file. Then inside this script tag, first, I'm going to type GSAP and after SAP into type DT. And as you know, sometimes our Visual studio code editor recommend and I don't like it. So again, I'm going to type GSAP. These are dot. Here you have total two option. You can use from method either two method. And for this example, I'm going to use from method. From. Then you need to use round braces and inside the round braces, as you know, first, you need to select the BID. So from page one, has tag, page one, I want to select has tag box. I'm going to select all the boxes at once, so I'm not going to use the ID name, so I'm going to use the class. So here I'm going to type dot box. Then after coma, I'm going to use the curses. So at first, here I'm going to use scale property. Scale, and I'm going to set it zero. If I set this file and back to my browser and head this page, you can notice the animation. It is back 02 normal position. If I rerote this page, you can notice it. Then I'm going to add little delay to this transition, Sumo type, delay, and I'm going to use 1 second delay. And also, we need to use between these two values. Next, I'm going to say the duration Sumo type, duration, and I'm going to say duration for two second. Also, you need to use comma between these two properties. So we use once again delay. So after reload this page, it took once again to start the animation and it takes two second to complete the animation. So after set this file, let us back to the browser, and I'm going to reload this browser. So after reload this browser, you can notice it's going to wait for 1 second, then it's going to start the animation, and it took total two second to complete the animation. We already learn about that just to wrap up this, and then I'm going to use rotate value. Rotate, and I want to say rotate 360 degree. So I set this file with scale, also it going to rotate the element. So this is how it looked like. 6. How to use scroll Trigger part 2: So here we create our first page animation. It's work only in our first page because here is slick page number one. So if I reload my browser, as you can see, it only run our first page animation, not all the animations. Now let's back to the result studio code. Now I want to run the same animation for other pages. So I select this code and I duplicate this code to time. So I'm going to change the page number. I'm going to run it for page two, and I'm going to run it for page three, and I'm going to set this file. Now, after I set this file, let's back to the browser. And I'm going to reload my browser. Now you can notice it run our first page animation and it complete the animation. But what? If I scroll down, does it work? Does it work for our page two? And does it also work for our page three? No, it's not work. Yes, it's work behind the scenes, but it's not work when I scroll it down. So there is no effectiveness of this animation if we don't see it. If I reload it again, it's work for every page, but we cannot see every page at once. So at the same time, we can experience only one page animation. Now if I scroll down at my second page, then I want to run this animation. At the same way, if I scroll down in my third page, then I want to run this third animation. Now you can think you can easily solve this problem. You might think you can use the delay for that. You might think if you increase the delay value for different pages, it's going to work. No, it's not going to work like that. Let me show you. Let's back to the the studio code. Suppose in our box two, here, I'm going to say delay. I'm going to say delay for 5 seconds. Sater five second, it's going to run this animation. And in our third page, I'm going to say delay ten second. Soper ten second delay, it's going to run the third animation. And I'm going to set this file. So after I set this file, let's back to the browser. Now I'm going to reload this browser again and after I run this animation, suppose users spend a lot of time. Suppose user spend more than ten second at that section. So I'm going to spend more than ten second and read all the content from this page. Then after 10 seconds, if user scroll down little bit, as you can see, it's already run this animation because here is only five second delay. At the same way, if I scroll down little bit, now you can see it's already run our third animation. We don't know how many times a user going to spend on a single page. Suppose user spend more than ten minute, 20 minutes in a single page to read the content otherwise, fill a from. We need to trigger this animation when you scroll down the page at certain area. If we scroll it down certain amount of area, it's going to trigger the animation. This is called scroll trigger, and we are going to learn about it at that section. Also, you might think timeline and strager can solve the problem. No, it's not going to solve the problem because timeline run the animation one after another. Now, let's see how can we use Scroll trigger? For that, we need to Boeing jump into this website again where we use the Can link. From this website, you need to use this link, Scroll trigger, this one. There are other CDS links such as scroll to plug in, but you need to use only this one for scroll trigger, scroll trigger dot main dot js. So to copy this CDN link and back to the fissure studio code editor. Then let's jump into the index TML file and we need to use this scroll trigger CDN below the main DubsdiN. After this Obsidian, I'm going to paste the scroll trigger. I'm going to paste the scroll trigger this one, and I'm going to set this file. Basically, scroll trigger is a GSAP plugin. It is a supportive library for GSAP. Using it, you can run your animation basis on scrolling. And remember, you need to follow this order. Otherwise, it's going through through an error. First, you need to use GSA CD and then, you can use Scroll Tigger, and at last, always use your own script file. Now let's see how we can implement scroll trigger. So let's back to the script dot js file. We are going to run our first animation when we load the page. But in our second animation, second page animation, we are going to run it when we scroll the page and trigger this animation. So at that page, I'm going to implement scroll trigger. So to type, scroll, then going to type trigger and remember T should be capital. Then inside the scroll trigger function, archetype scroll trigger, we need to specify the object. Otherwise, the element where we want to implement the scroll trigger. So I'm going to use this box object which is inside the page two. So I'm going to copy this selection, and I'm going to paste it here. Also, I'm going to use normal delay, so I'm going to make it once again delay. Now, let's set the file and back to the browser. And here, in my first page, I'm going to reload this browser. Now, it's going to run our first page animation. Then I'm going to wait for some time. After that, if I scroll down my page and jump into the page two, now you can see after jump into the page two, it start our second page animation. So this is exactly what we can do using screw trigger. Let me show you the example once again. As you can see, I'm in my first page and I'm going to reload this browser again. So after reload the browser, as you can see, by default, it's going to start this animation. But when I scroll around a little bit and jump into the page two section, now you can see after 1 second delay, it start the animation. So it's working. Now, let's try to understand scroll trigger in details. At first, I'm going to duplicate this line and comment out previous line. Now, we are going to learn some specific scroll trigger properties. So here, I'm going to use Carrass. Then instead decirass I'm going to apply some properties. So first property, I'm going to use trigger. Trigger, and I want to trigger the box, which is inside the page two. So I copy this section and I pass it here. And then I'm going to mention the scroller. Super comma, herem t, scroller. Stroller, and I'm going to mention body. Now you might have caution why I select body at scroller property. Most of the time we use body until we use locomotive. So if we scroll our tamal body, it's going to trigger this animation which is inside this page two box. After set this style, if I reload my browser, it's going to run our animation as it is. It's going to run the animation normally. So after run our first page animation, if I scroll around a little bit to the second page, now you can see it starts the second page animation. Now let's talk about markers. So I'm going back to the Viser studio code, and here, I'm going to type Coma markers. Markers true. Using it, we can understand from which position it's going to trigger the animation. Let me show you. So after set this file, if I back to my browser and reload my page. Now you can see here you can see an option called scroll start, scroller start and above, you can notice scroller end. This is the scroller end position. So if I scroll down this page a little bit and jump into the page two section, now you can see, now you can notice after this trigger switch cross the scroll start area, it start the animation. Let me show you again. So here, I'm going to reload my browser at that position. Now you can notice someone reload this browser first it run our first animation. But if I scroll down this page and you just notice the switch. When this switch cross this stroll start area, it triggered the animation. But now I want to change the start position, the scroller start position. I want to place it at that position. For that here, we need to mention the start position. So after comma, I'm going to type start. Start here inside the double course, I'm going to type from top position, I want to move it 60%, 60%, and I'm going to set this file. Up set this file, lets that to the browser. And again, I'm going to reason my browser. Now you can notice this is our starting position. If our elements start position, suppose this start position cross this limitation, then it's going to start this animation. It's not going to start the animation until it cross this line. So you can notice whenever I cross this line, now you can see it start the animation after 1 second delay. Here we change our start point. From top, here we use 60%. Just you need to remember it is the trigger suits of this animation. When this line cross this trigger switch, it's going to start this animation. That's why it's known as scroll Trier. This is it for this section. At the next part of this section, we are going to learn more about it. We are going to learn more about more feature about scroll trier. 7. Timeline in GSAP Create Your First Timeline part 1: Hello, guys. Good to see you back. Once again, I'm back with a new tutorial related GSP animation. And in this tutorial, we're going to learn GSP timeline. The GSP timeline is a sequencing tool that allows users to control and manage the timing of animation. Basically, it is a container for twins and other timelines, and it is used to build complex sequence. With timelines, animations are displayed in the water. They are listed in the code. So new animations can be added without manually calculating delays. Timelines also make it possible to create easily adjustable and resilient animation sequence. Here are some things you can do with the app timelines. Positioning animation in time, repeat animations include delays before repeton and chain animation. In a simple word, timeline is anything getting set in a time frame. Suppose this is our five second timeline. But here we can specify different tasks at different time seconds. We can perform different tasks at different time frame. Basically, using timeline, we can specify what we are going to execute step by step. In our previous tutorial, we'll learn about how we can run GSP animation. And if you want to run animations one after another, then we need to provide delay, each of the animation. And to resolve the delay problem, GSAP introduced timeline. So we're going to discuss the timeline. And remember, our timeline is connected with each other, and it runs step by step. So finally, we are in documentation page of SAP animation. And in our preface tutorials, we already learn how we can install GAP animation. Now, let's back to the isal Studio code. So as you can see, side by side, I open my isults Studio code editor, and my browser. And as you can see in my current working directory, we have al three file, index dot html, main dot css file and app dot js file. And in our index dot TML file, I already link GSAP animation in this script tag. Now inside the body tag, I'm going to create TDL three box. So hammer type Dev has tag, box. This is box number one. Then I dug this section. This is box number two. Again, I'm going to do this section, and this is box number three. Also, I'm going to assign a class. I'm going to assign the same class that we can target all the boxes at once. So I'm going to type class, this is just box. Then I copy this section and paste it in our box two and box three. Again, I'm going to set this file, and then I'm going to jump into the main dot CSS file. First, I'm going to use universal selector. Star inside the calibre says, I'm going to say margin zero. Our next property I'm going to use padding zero, and our third property is box sizing, box sizing border box. And then I'm going to style the box element. So I'm going to use its class name dot box inside the calices. First property, I'm going to use with with 100 pixel, height 100 pixel. Then I'm going to use background property. Background, and I'm going to use gold color. Also, I'm going to add margin. Margin and I'm going to add five pixel marching. And I'm going to set this file. If I set this file and reload my browser, here you can see V result. And now I want to assign different animation to these items, but one after another. And to assign the animation, we are going to use GSAP. So let's jump into the app dot JS file. So first, I'm going to type GAP SAP. Again, our auto succession replaces the keyword. So I'm back to the position GSAP dot, and I'm going to use From function. From. Then inside the round ss inside the double codes. At first, I'm going to select the first element, box one. I'm going to select this element using his ID name has that box one. Then Oma inside the calices. First property, I'm going to use opacity. Opacity. First I'm going to make the opacity zero and next I'm going to use duration, animation duration time duration and I want to set duration total five second. If I set this file and reload my browser within 5 seconds, this element become 021. I want to say this element opacity becomes zero to one. Let me show you. If I reload my browser, as you can see, within 5 seconds, it becomes zero to one. Also, I'm going to say it excess Value 300. From excess direction, it come from 300 pixel. So I'm going to set this file and reload my browser, you can see the result. I think five second is too long for this animation, so I'm going to make it two second. Then I'm going to duplicate this section. This time, I'm going to select the box number two. So I'm going to change the ID name box number two. If I set this file and reload my browser, then both the animation going to work together. Let me show you. You can see the result. Now we have one solution. We can use Day property. Delay and I want to add two second delay. If I set this file and read my browser, as you can see, we need to use COVA between these two. Then again, I'm going to set this file and relert my browser. Here you can see after completing the first animation and two second delay, complete the second animation. If I did the same thing multiple time, then it's become huge code. Every time we need to calculate the delay value each of the boxes. As you can see, our first box take two second to complete the animation. They dup two second. In our second box, here we use delay two second. Then after complete the first box animation, I want to complete the second box animation. That's why here I say to second delay. So it's going to start the second box animation after 2 seconds. At the same way, if you want to run our third box animation, after complete the second box animation, in that case, in our third box, we need to assign delay for four second. So every time we need to calculate the delay value, each of the element. If we have 50 animation in our web page and I want to run all the animation one after another, in that case, every time we need to manage the delay value. To resolve the problem, GAP introduced timeline. I'm going to comment out all the codes. 8. Timeline in GSAP Create Your First Timeline part 2: Then I back to the documentation section. Then you can search for timeline in this filter sidebar. Also, you can click this option timeline. Here I just try to show you from where you can get the timeline documentation. Then just back to the JS file. First, I'm going to declare a variable. So here we type Const Cs, and my variable name is TL TL does for timeline, equal to JSAPGSAPtTLine. Sap dot Timeline function. So here we create the timeline, and now I'm going to use this same code. I'm going to copy this code, and I'm going to run it using JSAP. Let me show you. So here, I'm going to paste the code, and I'm going to uncommen this code. Now, we don't need this delay probity. So to remove this probility. And here, I'm going to replace GAP with TL. TL. I'm going to set this file. Now, how we created timeline. If I reload my browser, as you can see after complete the first one, it start the second one. But you can notice here we do not use any delay. If I do the same thing for the third one, so I'm going to duplicate this lin and change the ID name box number three, and then set this file and then set up this pile and reload my browser. Now you can see after completing the first one, it's going to start the second one, then it's going to start the third one. Basically, timeline replace the delay property. Obviously, you can use delay if you work with little amount of animation. If your animation is big, otherwise, if you use multiple animation, they always go with timeline. It is very helpful when it creates series of effects. Now let's back to the documentation. If you want to repeat your timeline, you can use this object. Let me show you. So I'm going to copy this object value and property. Then back to the visual studio code. Then inside this tannine function, I'm going to use Cariss. Then I'm going to paste the repeat value. I want to repeat this animation total two time. So if I set this file and reload my browser, as you can see, first it complete the first one, then second one, then third one. Now it's going to repeat the timeline. So this is our repeat work. And if you want to delay between these timelines, yes, you can. Just you need to use this property, repeat delay. So I'm going to copy this property and value, then back to the with the studio code. And after coma, I'm going to paste it here. So it's going to repeat this animation product two time. Also it's going to add little delay of 1 second between these timeline. So if I set this file and reload my browser, complete the timeline, you can see it's going to wait for 1 second. Then after 1 second, it's going to run the timeline once again. You can see the result. And if I increase the value, then it's going to wait for long time. Also, it provides some other functions like pause, resume sik, and reverse. Suppose if you want to reverse the timeline, if you click on any button, then it's going to reverse the timeline. It provides all the different options, how you can use it. You can read the documentation for the more knowledge about it. From here, you can learn all the options. Now let's talk about absolute time. It measured from the start of the timeline. Let me show you the example. Now, let's back to the s are studio code, and let's back to the index dot at file. So here, I'm going to use heading tag, H two. And also, I'm going to assign an ID equal to DM and herbal type a text, hello word. And I'm going to set this file and reload my browser. Then let's back to the app dot JS file. Here, I'm going to animate this heading tag. But at first, I'm going to reduce the repeat value. I want to repeat it just for one time. Then I'm going to select this heading tag using timeline, TL dot, and I'm going to use from Method. Then I set the round brasses, first, I'm going to target first, I'm going to target the heading tag using the ID name, hastag Dam. Is that the calibrs here I'm going to use property called opacity. Opacity, and I'm going to set opacity zero. And then I'm going to use the obsolte time exactly like that. So here I'm going to use the obsolete time, and I want to set it for three second. If I set this file and load my browser, as you can see, after 3 seconds, it's going to start the animation. First, it's going to show the hello world, then it's going to start this animation one by one. Basically, it adds little delay to this animation. Basically, it's going to show this element after 3 seconds. But if I move this one, if I move this below the box two, so I'm going to cut this portion and paste it below the box two section. If I set this file and reload my browser, after 3 seconds, it's going to show this text. But it already start this timeline. Let me show you. So if I reload my browser, as you can see, it start my animation, then after 3 seconds, it show the text. That's how it works if I change the water of it. There are a lot of things like this in GSP timeline. Label start and we are going to learn about it all time to time in our upcoming tutorial. Next, we are going to create an website. In our first tutorial, we learn how we can use GSP, and in our second tutorial, we learn about timeline. So in the next tutorial, I'm going to try to create a interesting landing page using these timeline method. And also, I'm going to try to implement all the things which I learned in our previous tutorials. So this is it for this tutorial. Thanks for watching this video. Stay tuned for the next tutorial. 9. Scroll Trigger multiple animation and scrub: Hello, guys. Good to see you back. Once again, I am back with another tutorial related scroll trigger. In our previous tutorial, we already creed with scroll trigger. And today in this tutorial, we are going to learn new feature about scroll trigger, such as how we can run multiple scroll trigger animation in a single page how we can use scrub propriety and many more. So let's jump into the results studio code editor and see how we can apply it. So as you can see, we are in my results studio code editor. And you can notice here in our page two, we animate this box. But this time, I want to animate multiple animation. For that, I'm going back to index dot estimate file, and inside this page two session, I'm going to comment out this box, and I'm going to create two header. And I'm going to create our first header using H one tag and Hemot Hello World. Then I'm going to create another header tag, H two. I'm going to welcome. I'm going to set this file. Now, let's style this element, H one and H two. For that, I'm going to jump into the style CSS file. But before at first in our parent container in phase two, we need to change the direction, so I'm going to type flak direction. Flex direction, I'm going to make it column. Then I'm going to style the hearing tags, H one. Then inside the colliers. So inside the H one tag, at first, I'm going to change the font size font size, and I want to make it 50 pixel. And also, I'm going to change the position and position, I'm going to make it relative. Then I'm going to change the diagraund color. Background color, I'm going to make it red. Also, I'm going to add little padding on it, so I'm going to type padding from all of the direction. I want to add ten pixel padding. Then I'm going to duplicate this section, and I'm going to change the selector name. This time, I'm going to make it H two, heading two, and I'm going to set this file. But we need to change the background color for the heading two, so I'm going to make it yellow. And I'm going to set this file and back to the browser. If I reload the browser, here you can see the result. It had both the text, but we need little gap between them. For that, inside the parent container, page two, I'm going to use gap property. Gap, and I want to use gap 50 pixel. I'm going to set this file and back to my browser, and I'm going to reload this browser. I think this gap is good for the example. Basically, in this example, we are going to run multiple scroll trigger animation in a single page. So now, let us back to the J script file. And first, I'm going to remove all of the unnecessary code and Hemo type GSAP and we need to type dot, and I'm going to use from method. Then inside the rounds, at first, we need to pass the select a name. So I'm going to use our ID name page two. Then I'm going to select H one tag. After comma, inside the curses, I'm going to use the properties. At first, I'm going to add Opacity here. So to type Opacity. And I'm going to set opacity zero. As you can see, here we use from method. So from zero, it going back to the normal opacity. Then I'm going to use duration. And I'm going to say duration to second. Next, I'm going to use direction from which direction I want to move this text. So I'm going to use Xxs and I'm going to pass 500 pixel. So please set this file if I reoad my browser, let's see it is working on naught. As you can see, it works. Here we do not apply scroll trigger. It automatically run the animation. Now I'm going to apply scroll trigger. For that, here I'm going to type comma, and I'm going to type scroll trigger. Scroll trigger. T should be capital, and you need to remember that. Scroll trigger, and inside the calices, first, I'm going to call trigger. Trigger, and I'm going to set it inside the double course, I'm going to buzz. I want to trigger this animation. So I copy this section and I'm going to paste it here. Next, we need to set this scroller in our body, some type scroller. Scroller, and I want to set it in our body section. Most of the time we need to use body until we run locomotive. Then also we need markers to identify this rule point, the trigger point. So type marker, markers, and I want to make it true. Next, we need to define the core start point type start, start and her pass insert double cores, top. From the top position, I want to move it down 60%. Also, I'm going to define in position, scroller at, where it going to stop executing our animation. So I'm going to type ain't inside the double quotes from top, I want to move it down for 30%. And I'm going to set this file. Yes, with start position, also we can define our end position. Let me show you. So if I reload my browser, now you can see this is our scholar start position, and this is our scholar end position. If I cross this limit, it's going to execute this animation. Let me show you. Don't worry. I will explain what is the usage of scroll ad in our next example. So here we animate our first text. Now we need to animate the second text. For that, there's back to the visor studio code, and I'm going to duplicate this section. This time, I'm going to change the selector. I'm going to make it H one, two H two. And also, we need to change the direction. I want to move this text from the opposite direction, so I'm going to use -500 value. Now after it this file, if I back to my browser and reload my browser, now you can see have total to start switch for differ in heading tag. If I cross this limit, it's going to run the first text animation. Then if I cross this limit, then it's going to trigger the second text animation. As you can see it run the animation from the opposite direction. This is how we can trigger multiple animation using scroll trigger. Now I want to apply a different animation effect. But for that, before I'm going to comment out this icon second animation section. Let's back to the users studio code and first, I'm going to comment out this section. Then I'm back to the index dot table file and I'm going to comment out this H two tag. And I'm going to set this file. Now, let's back to the browser again and reload my browser. Now you can see now we have only one text animation. If I trigger the animation, as you can see, it run the animation normally, but I don't want this effect. Now I want to run this animation between scroller Start and scroller Aid. I want to say, if I cross this scroll start position, instantly it's not going to run the complete animation. According to this scroll value, it's going to move the element. For that, we need to use another property. And now I'm going to apply a new animation effect using scrap property. Let me show you how. So let's to the is a studio code, and I'm going to jump into the Scribe DJs fun. First, I'm going to use another property, and our property name is scale. Scale and I'm going to say scale zero. From zero scaling, it going back to the normal position. Then I'm going to set duration only for 1 second. Now I'm going to apply the new property scrub, SCRUB, here you can use two type of value. Either Bullen value, either numeric value. If you use numeric value 1-5, it's going to control the smoothness. I'm going to start it with Bullen value so I'm going to pass through. Now let's see what kind of animation effect it going to provide. So let's set the file and back to the browser, and now you can notice the effect. So I'm going to read my browser, and now you can notice this animation will play as we scroll. If I scroll it down, now you can see it complete the animation. It run the animation until we reach scroll end position. Now it complete the animation. And if I scroll up this page, now you can see it moving backward. So this is the effect we can get using scrap. It's not going to run the animation instantly, and we can run this animation multiple time. In our previous examples, it run the animation instantly when we cross the limit. Also, it do not run the animation multiple time, but using Scrab, we can do the thing multiple time. If I scroll it down, as you can see, it move the element and it's going to complete the animation until it cross the scroll end position, and also it do the opposite thing if we scroll it up. If you want to apply smoothness on it, for that, you can use other values such as let's back to the salt studio code, TFI pass two here. I duplicate this line and comment out previous line and here I'm to pass scrap value two, and then set this file. Now, let's back to the browser and I'm going to read my browser. This time, you can see a little smoothness on this animation. After change the value, you can experience the smoothness on this animation. If you set highest value five, then it's going to provide more smoothness. But two is the normal smoothness for this example. As you can define start and end position for your stroller. We already learn about that. So this is it for this tutorium. At the next example, we are going to apply Pin NAP on it. So thanks for watching this video Stone for our next tutorial. 10. Scroll Trigger with pin: Hey, guys, good to see you back. Once again, I'm back with a new tutorial related scroll drawing and today in this tutorial, we are going to learn pin. Let's jump into the visas studio code editor. In our previous tutorial, we'll learn about scrub. If we apply this property and then set this file and back to my browser, as you know, I run our animation when we scroll our page, according to scrolling value, it continue the animation. We're already familiar with that. Now, let's use a new property called pin. Here I'm going to apply another property called pin here I'm going to assign a value, a Boolean value. I'm going to make it true. And I'm going to set this file. After I set this file, if I back to my browser and reload my browser, if I scroll down, now you can notice when I scroll down our animation stuck to this position, let me show you. As you can see, our animation stuck to this position until the animation end. Now it pin this element at that position. This is what Pin does, but using Pin, we can create a beautiful text effect. Let me show you the example what we are going to create in this tutoro. I'm going to open a website and I'm going to show you what we are going to create in this tutorial with the help of Pin. As you can see, here I open a website and it takes little time to load. These are the animation made with GSA. If I scroll down a little bit, here you can see the animation. It is made by scrap. We already fun with that. When I scroll down it, as you can see, it scale up. Then I want to show you this experience example, this one. Now you can see if I scroll around my Karza, it run the animation vertical direction. You can see the experience takes. You can notice how this animate it. We are going to create this effect using pin. After complete the animation, now we are able to scroll to the next page. But until we complete the animation, we cannot scroll down the page. We need to run this animation to scroll down, otherwise, scroll up the page. So we are going to create this same effect using corner pin, otherwise, pin. This example is part of scroll trigger animation. So let's back to the Visual Studio code and start the coding. So I am in my Visual Studio code editor, and here I open screen dot js file. At first, I'm going to remove all the code from this JS file. Then I'm going to remove all the code from the style or CSS file. I don't need it. And then I'm back to my index dot HTML page. From here, I'm going to remove the box. I don't need this box. Also, I'm going to remove this text, this heading tag. Now, I'm going to create I'm going to tie the text in page two section. I'm trying to build nearly the same effect. So here, I'm going to type H one tag, H one. And here I'm going to type experience. Then I'm going to set this file. After I set this file, let's jump into the style section. We need to style it. Otherwise, our page look like that. Here I'm going to start our styling. At first, I'm going to select the universal selector star. Then inside the Calibra says, I'm going to say margin. I'm going to say margin zero. Then also, I'm going to say padding, padding zero. Then I'm going to say it box sizing. Box sizing border box. Next, I'm going to define the font family. Font, fairly. Here you can choose your own font family, but for now, I'm going to choose Franklin Gothi this one. And next, I'm going to design the body section, body and SDL, some type STL body. Then inside the calibrss I'm going to set height and width to this body. So to define width, some will define height. I'm going to make it 100%. Then I'm going to define weed. I'm going to replace height we weed, 100%. Now, one by one, I'm going to style the pages. For that, I'm going to use its Dym such as page one, SumtyHTag, page one, the the calices, I'm going to assign height. Height, 100%. Then I'm going to assign W W 100%. Also to define the background color summertype background color light blue. This one. At the same way, I'm going to define height and weight to other pages. So I duplicate this line multiple time. This is for page two, and I'm going to change the background color so I make it a little darker. Then this is for page three. Also I'm going to change the background color, this one. And I'm going to set this file. Now I want to set this file, let's back to the browser and reload this page. So this is how it looked like. Now let's back to the with a studio code and style the text, this one, H one tag. So here type from page two, I want to target page two. I want to target H one tag, H one. Then inside the ali resis at first, I'm going to assign font size font size, and I'm going to use little big fonts. I'm going to use 40 VW. Then I'm not going to use too much bold font. It is up to you how kind of font weight you are going to use some type font weight. 500. Then I'm going to assign padding, padding and inside the padding, I'm going to assign ten pixel padding from all of the direction. Then I'm going to transform these takes into uppercase. So type takes, transform, arcs and I'm going to set this file. After I set this file, if I to my browser and reload my page, this is how our text look like. Now you can notice we have the vertical scroll bar for the text here I use because here I use large font size. That's why it appears. Now we need to hide this vertical scrollbar using overflow property. We need to use overflow X because the text expand in xs direction. Here I'm going to use a property in our body tag. So type body inside the color recess, I'm going to use overflow X O flow X hidden. I'm going to set this file. Now let's back to the browser and reload the browser. Now we don't have any vertical scrollbar. Now, let's jump into the animation section. For that, we need to jump into the script doot Js file. To create the animation, here we need to use two method. So here I'm going to type JSAP dot two. Then inside the round ress at first, we need to target the element. In which element, we are going to apply the animation. So I'm going to tag has tag, page two, and from page two, I want to target H one tag. Ten, I'm going to use comma, then inside the calices here wouldn't we use our properties. At first, I'm going to use transform property. Sun type, transform Transform and inside the double codes, I'm going to use translate X, translate X. Then inside the rounders here, we need to provide the position. From which position it going to translate the text. Here I'm going to use minus one 50%, and I'm going to set this file. Now, let's set the file and C and back to my browser and see, is it triggered the animation properly or not. So we are in my browser and I'm going to reload my browser now Here at the section, you can see the result. If I held my browser again, now you can notice, yes, it's work. Here you can notice from the origin position of this text, it moved the text at XXs direction. It moved the text -150% at XXs direction from this way, this side. If I my browser, you can notice it. Now, just we need to trigger this animation using scroll trigger method, and also we need to use scrap because when we scroll this animation, otherwise this page, then we can control it. We can control the grecton of this animation. We can move it forward, otherwise backward. Let's jump into the visual studio code iter again. So here I'm going to use scroll trigger property. So die, scroll trigger. Scroll trigger, then inside the Calibra says, first property, I'm going to use trigger. Trigger and inside the double course, here, we need to target only the page. We need to trigger only the page not the animate for this example only. Here I'm going to type Has tag, page two, page two, and then we need to set scroller at body, S type scroller. And I'm going to define this ruler section body. Next, we need to define the property which is already in our prev tutorial, scrub SCRUB. And for this scrub, you can use Bollan value true. Otherwise, you can use and otherwise, if you want smoothness, if you control the smoothness, then you can pass any numeric value 1-5. I'm going to pass two here. And then we are going to use pin property, PIN, and here, I'm going to use the Brilliant value true. That's it. If I set this file and back to my browser and reload my browser and try to scroll this page downward, now you can experience this animation. Now you can see it run the animation when I scroll down my cursor. Here you can notice the bar. If I scroll upward, it move the text at positive direction at XS positive direction, and if I move downward, it moved the text at negative s direction. Then uptart complete the animation, utter achieve the position. Now you can scroll down to the third page. Otherwise, you cannot scroll it. At the same way, until you run this animation, now you can see it complete the animation and then we can scroll up and going back to the page one. So this is how we can create this effect. It's a very beautiful effect in model websites. I hope now it's clear for you how we can use corner pin and scrap to create this beautiful example. So thanks for watching this video Stune for our next Tutorial. 11. GSAP Animation With SVG Graphic: Hello, guys. Good to see you back. Once again, I am back with a new tutorial related GSAp animation. And today in this tutorial, we are going to work with BG graphic. Yes. Big stands for scalable Victor graphic. VG is image file format. There are two type of file format such as restor graphic and Vctorraphi and SVG stands for scalable ctorGraphi. If you zoom any rester image such as bitmap images, it's going to pixelate the image, otherwise, distort the image. But if you scale up any vector image, it not going to pixel it. You can zoom a Vctorimage as much you want. Let me show you the demonstration. As you can see on your screen, it is the image of flower. It is a restor graphic, otherwise, bitmap image. If I try to scale it let me show you now you can see the pixels on this flower. These are our pixels that the image made with. We cannot scale restored image unlimited. It's going to distort the image. Here you can notice the solid pixel with different color. This is the main problem with rested images. Now let's talk about vector image, vector graphic. Now, this is the example of vector graphic version of this flower. If I try to zoom this flower, now you can zoom this flower as much you want. Now you cannot see any pixel in this image because vector graphic shapes are made with closed path, such as this is a closed path, and this closed path filled with colors. It's like an object. That's why we can scale this image unlimited and it's not going to lose its quality. So that's the main difference between raster image and vector image. In this tutorial, I'm not going to give you the in depth introduction of Sigi graphics because it's a huge topic. I already created different course about this topic. You can check out it. Basically in this tutorial, we are focusing on SAP animation, not SVG animation, but we are going to use SVG graphic with GSAP. So let's see what we are going to build in this tutorial. So as you can see, here we open a website called Brandim dot NL, and if I scroll down this page a little bit, here, you can see example example of SVG animation. This line. Here you can see a string line. But if I hober my cars on the string line, you can see a beautiful string effect. Here you can notice, according to my cursor position, it stretched this string. And if I move my cursor a little further, now you can see it a string effect. So we are going to build this string effect using SVG animation. This line made with SVG with Put tag. So we need to understand what is put tag and how we can draw path elements using Put tag. Then we can apply GSP animation in this butt tech to create this effect. We are going to create this kind of silk SVG animation effect using GSAP. Let's back to the isal studio code. As you can see, we are in my sul studio code editor, and I already create Index Dotile style dot css file and script dot js file. I already create the boiler template for IdexdtEtimL file. At first, I'm going to link styledt CSS file with this index dot estimate file. So here, I'm type link tag. Link and Amutypty dot Css. Then inside my body tag, here I'm going to indag the script file type script Source. As a source, I'm going to pass this script file, script dot JS. I'm going to set this file. And I already open this file using live server extension in my browser. Now, at first, inside the body tag, here I'm going to create a deep tag. So tip Dev and here I'm going to assign a ID to this deep tag and our ID name is string. Then inside the string tag, we are going to create the SVG tag, the SVG graphic. But before let's jump into the style CSS pile, here I'm going to create the started template for CSS Sot, universal selector, and inside the calibrsF property, I'm going to use margin and I'm going to assign margin all of the direction zero. Then I'm going to assign padding, padding also zero. Ten, I'm going to add box sizing. I'm going to apply box sizing. Box sizing border box, and also I'm going to assign font family if we use any font family, but otherwise, you can skip it. So I'm going to assign font family font family and I'm going to use Franklin Gatheri this one. After that, I'm going to style our TML and body section. So ty HTL, DML body. I'm going to style the estML and body tag. First, I'm going to assign height, height for height, I'm going to use 100%. I'm going to use 100% of my screen. And then I'm going to assign, with, and here I'm going to pass 100%. After that, I want to assign background color to this body. I want to say that body tag, body, then inside the Calibra says, here I'm going to tip background color, background color, and I want little dark color smut has tag one, one, one, dark gray. I'm going to set this file. After I set this file, if I show you my browser, this is how our page look like. Now, let's draw a SVG canvas in our web page. Before I create any SVG shape in our web page, we need to define a SVG canvas area for this shape. Then inside this V canvas area, we can draw the shape. I want to create a V canvas from this point to this point, and I'm going to ascend height something 600 pixel. Let me show you what I'm trying to create. Suppose this is the white area is our browser page, and in this browser page, I want to define a SVG canvas. I want to define a canvas size from this point to this point. So I want to take with nearly 1920, and I'm going to take height nearly 600, something like that. To understand it better, I'm going to apply a background color to this V graphic. Suppose I apply this color. This is our SVD Canvas area. Now, inside this V Canvas area, we can draw any shape. It could be a circle, line, et cetera. But for this example, we need to draw a line. We need to draw a line shape. So we need to draw a line from this point to this point. And as you can see, you can notice, here we align this line vertically center of this canvas. And now we need to move this line according to the cursor position. We need to cut the line according to the cursor position, something like that. For that, we need to use quadratic sier curves. So let's jump into the visor studio code. And to define a SVG canvas area, we need to use Vg tab. So to type SVG. Then inside this is Vg tag. First, I'm going to assign width. So to type width with equal to, and here I'm going to assign nearly 1920 pixel because my computer screen resolution is 1920 5,080. So I'm going to take with nearly 1920. So to type 1910. Then I'm going to assign height, height equal to, and I'm going to take height nearly 600 pixel, otherwise, 500, that's good. Now let's jump into the tile dot CSS file, and I'm going to style this deep element stream. So I copy its ID name, and I'm going to jump into the tile dot CSS file, and hero tag has tag stream. Then inside the coli verses, I'm going to assign height, width, and background color. First, I'm going to assign height, height, and I'm going to take height, same as is Visigraphic. So I'm going to type 500 500 pixel. Then I'm going to assign with. But for weed, I'm going to assign 100%. We, I'm going to take 100%. Then I'm going to assign background color. Background color. For that, I'm going to use some background color nearly, but I'm going to use a little lighter version because we need to identify this area, something discolor. That you can identify the string area and the body area. Then I'm going to set this file, and I'm going to jump into the browser. After I set this file, if I go back to my browser, you can see nothing here because after I set this file, if I go back to the browser, here you can see the area, the area for the canvas. This is the canvas area for our vigigraphy. And now we need to draw a line. We need to draw a string from this point to this point. So at the next part of this tutorial, we are going to create a path element to draw a line. There are a lot of things that you need to know about Path tag, so I'm not going to explain everything in this tutorial. Stay tuned for our next tutorial. 12. Svg path element: Hello, guys. Good to see you back. Once again, I am back with another tutorial related VG with GSP animation. And today in this tutorial, we are going to learn path element. Particularly, we are going to learn quadratic bezier curves. Basically, Path tag, otherwise, path element is the advanced tag in VG graphic. Using Path tag, we can draw lines cubic bezier curves, quadratic bezier curves, and arcs, or any other shapes. We can draw polygon shape, polyan shape, and any type of shape that you imagine for. Without circle. In SVG path element come with some commands such as line command, we sier curve command, quadratic sier curve command, and arc command. But in this tutorial, we are particularly focused on quadratic ser curve because we need this curve to create the silk SVG animation with GSAP. Now, let me explain what is quadratic ser curves and how we can draw it. To create this curve, we need start point, endpoint, and the curve point. This is the curb point. According to this point value, it's going to curb the line. Suppose this is our canvas area for AVG art. Here we assign 910 pixel width and 500 pixel height. Now, first, we need to provide the starting point of this line. Then we need to provide the curb point. Now the question is, how you can define the starting point? Here we need to pass the XXS value and YXS value. Here you can see we use command. Yes, quadratic ser start from command. Then you need to pass the first point Xs value. Which is 20, and then you need to pass the YXS value, which is 150. Next, you need to pass the curve value, the quadratic ser curve value. So here, as you can see, from the XXs but before you need to type Q command, Q, then you need to type x's value. So from the Xs, I take 950 pixel and from the YXs here we take 20 pixel. According to this value, we can control the curb nese of this line. And if you want to reduce the curve, you can increase the Xs value. And at last, you need to assign the end point of this line of this path. So this is our endpoint. From Xxs here we take 900 pixel and from the YXs here we take 150 pixel. And this is how we can draw quadriity curve in SVG. And remember, to create the quadriity curve, here we need to use a attribute called D. So let's jump into the Visa Studio code eater and try to create a curve line. So I am back to my Viz Studio coditor and I already opened my browser using Lifesaver extension. Now we need to draw a PAT from this point to this point. For that, we need to use Put tag. Let me show you how. Then inside the SVC tag, I'm going to create the Put tag So tight PT. Then inside this path tag, I'm going to use a attribute. We need to use D attribute to create the P D for draw. D equal to inside the double quotes, as I told you, we need to start with starting point. So to define the starting point, we need to use A, then we need to provide the xs we do. From the Xxs I'm going to pass 20 and from the YXs here I'm going to pass the hub of this height, here I'm going to take 250. Then we need to define the quadratic vizier value. So to type Q for quadratic zier value, I'm going to pass 950. This is for XxsF YXs'm to pass 20. Then we need to define the endpoint. For the endpoint, I'm going to take 900. This is the XXs value, and for the YXs I'm going to take the same value, 250 because I want to draw a straight line. After that, I'm going to define stroke, stroke, stroke equal to, and I want stroke color white. Next, I'm going to define stroke weed, stroke, weed, and I'm going to assign stroke with to pixel. Then then I'm going to define field color, fill. And for the field color, I'm going to assign transparent. Otherwise, it's going to by default, it's going to fill with the black color, sort of type transparent. I'm going to satisfy. After set this file, let's jump let's jump back into the browser. As you can see, here it draw a beautiful curve. I draw a beautiful quadratic vizier curve. Now, if I change the quadratic sier value, such as YXs value, let me show you if I change it, if I make it 100, it's going to reduce the curve. After set this file, if I back to my browser, you can notice the result. It reduces the curvenes of this lime. If you want to make it a straight line, in that case, here you can pass the same vdu. If I pass 250 from the YXs and then set this file and back to my browser, now you can see it draw a straight line. Here we just manipulate the YX value. Also you can change XXS VDO. Suppose if I change the XSS value, suppose for XXS I'm going to pass 200 and for YXS also I'm going to pass 200. Now you can notice different type of curve line. Let me show you. After step this file, if I show you my browser, you can see the result. Now, this is how our curve look like. Now we can change the curbness of this line according to the cursors value and YXS value. If I move my cursor at that position, according to the cursor excesses and YXS value, we can control the curbness of this spot. This is what we are going to do in this project. Now, let's back to the studio code. Now let's link with GSAP animation. So in my browser, I'm going to search for SAP CDA, GSAP CDN. And from this first link, cinjs.com, I'm going to use this link, and I'm going to copy it. After that, here, I'm going to paste it before this scrip dot JS five. Then I'm going to jump into the script dot js file, and now I'm going to start our coding. At first, in my JavaScript file, I'm going to declare a variable there and our variable is P path equal to inside the double codes. Here, I'm going to pass this attribute value. I copy this value, the whole value, and I'm going to place it here inside this path. Then I duplicate this line and here I'm to type final path. Basically here I'm going to declare two variable. Final path equal to same value. Later you can understand why I use the same value in a different variable. After that, we need to select this the element, stream, and we are going to select this deep element using its IN name. I copy its ID name and back to the stream dot JspiTo select the element, we need to use Dom Dom methods. We need to use Dom method. We need to use query selector. Suntye document dot QoI selector, document dot oid Selector inside the roundre inside the double course hass tag, the ID name stream, and I'm going to store it in a variable. Here I'm going to declare where and our variable name is string equal to asilo it, this is the element stream. After that, we need to apply a mouse event to this element. Let me show you how. If you are familiar with Dom document object model, then I hope it is not so difficult for you. So type the variable string dot add event listener, this one. Then inside the round says, Here I'm going to use event, a mouse event, I'm going to use mouse move event, mouse move, and I'm going to call it function. Then inside the css and her into pass a coma between them, then inside the CLiress, I want to print the event vdu. To print the event value inside this function will need to pass DEPs. Then inside this function, if I print, Console, if I take Console dot dot log, inside the round resis dates, and I'm going to set this file. Now, after I set this file, if I back to my browser and open my console. Let me show you. Now you can notice whenever I move my cursor inside this string dv area, otherwise, this SVG element area, you can notice it trigger the mouse event. As you can see, whenever I move my cursor inside this area, it print, I print screen x value, screen y value, client x value, and client Y value. It return the position of the cursor. It provides the XXS and YXs. If I move my car at that section, now you can notice. Now you can notice from the XXs here it print 1,790 and from the YXs it print 452. Now, let's back to the visor studio code. And if you print only the YX value, just type dates dot Y. After set this file, if I back to my browser again, now if I my cur on that area, now you can see it print only the YXS value. So according to the XXs and YX value, we are going to set the quadratic curve value. So it's going to move the line whenever I move my mouse. So this is it for this tutorial, and the next tutorial, we are going to apply the GSP animation in this stream. So thanks for watching this video Stube. 13. Create Slick SVG Animations : So this is the last word of this tutorial, and at that section, we are going to animate this string line using GSP animation. But at first, I'm going to comment out this line, I don't need it. Then inside this function here, I'm going to call this path. This path variable. I'm going to type path then here, I'm going to use backticks because here we are going to apply template string method. I'm going to use backticks, and then I'm going to copy this exact value. After that, I'm going to paste it here. Then, as you know, to move the string line according to the cursor position, here we need to change the quadratic point value, these values. At first, I'm going to change the YXS value. So here I'm going to tie dollar sign and calices. This is Tremblt string method. I hope you are already familiar with that. And here I'm going to pass the YXS value. I'm going to tie DE ts dot Y. I'm going to say this fine. Now you might think after that it's going to work. No, it's not going to work because we do not apply, we do not apply this path to this attribute. We need to change the attribute, and we need to apply this path to this attribute. For that, we can use GSP. Let me show you how. But before, I'm going to make this string line straight line. It is not straight. So here, I'm going to tie from the Xxs I'm going to take quadratic zer 0.19 950. And from the YXs I'm going to pass 250, and I'm going to set this file. After set this file, here you can see now it makes our line straight line. Now to replace the attribute value, here we are going to apply GSAP. Then inside this function, I'm going to type GSAP dot to method. Then we need to at first, we need to target the element in which element I want to apply the animation, which is SVG, and there I'm going to target this path tag. So I'm going to tie path so from SVG tag, I want to target the Pat tag. After that, I use coma. Then inside the liss here I'm going to use a feature from GSP animation, which is attribute, er, AT R. Using it, we can replace any attribute value. And inside the liss and if I show you my index estimate file, I want to change the attribute value. So here to pass D. Then colon here, I want to replace with this path variable. I want to replace this attribute, the old attribute, this path variable. So type path here. But it is the predefined property from GSP animation. Using it, we can change any attribute value. First, we target the SVG path using its tag name, then we target the attribute D and we replace the attribute value with this PAT. And as you know, according to the cursor position, it's going to replace the YX value, the quadriity YX value. Then after that, I'm going to say duration. And I'm going to set duration 0.3 second. Then before I set this file, we need to replace this path value with the attribute value. I copy this one and here, I'm going to replace this value with this new value. Also, we need to change the position, so I want to make it from the Xs I want to assign 950. And then I'm going to set this file. Are this file, if I going jump into my browser, according to the cursor, xs position, it curb the line. Now this is how it look like. As you can see, it's already start following the cursor and curb the line. Now, we need to do the same thing for X xs. Now it's work only for the YXS direction. And now I want its follow from the XXs also. For that, let's back to the code editor. And here, I'm going to replace this value. I'm going to use dollar sign and the livers is I'm going to type ts dot XXs. Now after set this file, if I back to my browser again, now you can see, now it follow the cazar from the Xs and YXS also. It's changed the quantity zer Xs and YXs value according to the cursor position. So this is how it looked like. We are almost done. Just we need to apply some easing effect to get the result, to get the perfect result. So here, I'm going to open a new tab and I'm going to search for SAP, easy. If I open this document, now you can see here it provides some easing effects. You can try one by one, all of it. This is how easing effects work. I'm going to use this one power three, power three out. So I'm going to copy this property and Value. And then I'm going to jump into the code editor. And here, I'm going to type, I'm going to paste this code. Es out power three dot. And I'm going to set this file. Basically, it going to provide a smoothly animation effect. So I set this file if I back to my browser and reload this page. Now you can notice now our animation work smoothly. Now we need to solve one problem. If I move my cursor out of this box, now you can notice this string is not back to the original position again. It's swimming as it is, according to the last cursor value. So we need to solve this problem. So for that, we need to apply another mouse event. So let's back to the code editor, and here, I'm going to type string though I'm going to apply a even listener again, Add even listener. Then inside the round ss, this time I'm going to use mouse leave event. Some type mouse leave, mouse leave, then I'm going to call it function. Function. Then inside the Carlss, I'm going to apply GSA. G SAP, and we need to use two method. Then inside the caliss first, we need to slate the PAT. I'm going to copy the same selector SVG and PAT. After that, inside the clss again, we need to change the attribute value. We need to change the attribute value of this path tag. For that, again, I'm going to use or property ATTR. Then inside the clssH' going to say it D and I'm going to say this time I'm going to set it with final path. I copy the variable name, and I'm going to paste it here. And as you can see, in our final path, hair we draw a straight line. Nothing else. After that, I'm going to pass comma. Also, I'm going to add little duration, duration, and I'm going to say duration, 1.5 second. You can adjust your duration according to your nips and I'm going to set this file. After set this file, if I back to my browser, now you can notice it's follow my cursor. This string is follow my cursor and it bend the string according to the cursor position. But when I lead this area, now you can see it's back to its own position. But the problem is still it's not like a guitar string. For that, to achieve this effect here to achieve this effect, we need to go back to the is functions from this section, I'm going to use elastrc effect, this effect, this string effect. And I'm going to chase the value. For the first value, I'm going to use one and for the second value, here I'm going to use 0.2, and I'm going to copy the whole section. Es. Then I'm going to jump into the little studio code here after comma, at the next line, I'm going to paste the Vd. Elastic out. After I set this file, if I back to my browser and rewrote my browser, now you can see whenever I move my cursor out of this area, this line act as a guitar string effect. You can notice it. It's perfectly work. Whenever I move my mouse in this area, as you can see, it follow the mouse. But whenever I move my mouse out of this area, it's back to its original position, and it give little bounce effect. And now at last, I'm going to change the background color background color of this element. So here, I'm going to jump into the stylo CSS file, and again, I'm going to use 111. And I'm going to set this file. After set this file, let's back to the browser, now it's look perfect. It start working when I move my mouse range of this SVG area, and it really is when I move my mouse out of it. So this is how we can create this beautiful effect using SVG and GSAP. So thanks for watching this video. Stay tuned for our next Tutorial. 14. Buld a Custom Cursor animation: Hello guys. Good to see you back. Once again, I'm back with a new tutorial. But today in this tutorial, we are going to ParomePject. We are going to build a custom cursor animation using GSA. So let me show you the demonstration what we are going to build in this tutorio. As you can see on your screen, here and I create a webpage. And if I move my cursor in this webpage, now you can see this little circle follow my cursor. Wherever I move my cursor in this page, it follow my cursor. But also, I want to show you another thing. If I Huber my curar, otherwise move my cursor in this image, now you can see it increased the cursor size, the custom cursor size. Also, it shows some text, such as m. But if I remove my curar from this element, again, it becomes small and remove the text from this cursor, the custom cursor. This is what we are going to build in this project with the help of GSP animation. So let's start the practical and jump into the Visual Studio code editor. Finally, as you can see, we are in my Visual Studio code editor, and I already create index dot estalPage style dot Sass file and scrip dot JS file. And as you can see, I already link with Style file in my estimate page. Also, I link Script DJs file with this estimate page. To create this kind of custom cursor animation, we should have knowledge about Java Script Dom. Dom stands for document object model. I hope you already familiar with that. And if you don't have any dom knowledge, don't worry. We are going to learn it when we apply it. Now, let's jump into the CSS file to start the CSS boilerplate. So here, I'm going to type. First, I'm going to set the universal selector start, then inside the Class, I'm going to set Margin margin zero. Also, I'm going to set padding. Zero. Then I'm going to assign box sizing, box sizing, and I'm going to use border box value. If you want to provide any font family, you can for now, I'm going to use font family aerial. This one. After that, we need to define high denied to our body and HTML. Type HTL, comma body. Said the calivss height, I'm going to assign height 100%. And then I'm going to assign with with 100%. I'm going to set this file. After I set this file, let's back to the index dot ATL file. Now inside the body tag, I want to create a custom cursor, but before, I'm going to create a main div SoltvHtag main. So this is our main div element. Inside this main div element, I want to create a cursor dip Soltv has tag cursor. This is our cars a D. After that, if I open this file in my browser, let me show you and if I reserve this page, this is how it look like. It's show nothing. Then I want to assign a background color. Background color to this main DV element. Someone to use its ID name to select it, some type, has main. Then inside the Calibra says, at first I want to assign height height 100%, and Wi also 100 pass it. Then I want to assign diagram color. Background color, I want legal dark colors to use hastag one, one, one, and I'm going to set this file. After I set this file, if I back to my browser and reload this browser, now, this is how it looked like. I use this guard color, now we need to define the cursor. We need to style the cursor section, this cursor. For that, I'm going to select the cursor, HTAgKursor then inside the Cariss I'm going to assign height. Height, 20 pixel. Then I'm going to asinht W 20 pixel. And I'm going to assign background color. Background color, I'm going to use white color. White. I'm going to set this file. If I set this file and back to my browser and relate this page, this is how our cars look like a small square box. It looks like a small square box. Now we need to and now we need to convert this square box into a circle. For that, I'm going to use border radius. Let me show you how. So type border radius, and I'm going to assign 50%. It's going to convert this square box into a circle. After step this file, if I back to my browser and return my browser, this is how it look like. So after create the cursR now we need to go jump into the JavaScript file. Third, I'm going to select skit Js file. At first, we need to target the cars R using its ID name. For that, we are going to use Dom methods, document object model. So I'm going to type document Qui selector, Quiri selector. Then inside the roundbra says, inside the Duval course, I'm going to select this element, the main element using its ID name. So to type has tag and I'm going to store it in a variable. So here, I'm going to type where, and our variable name is main. Man equal to this element. Then I'm going to duplicate this line, and this time, I'm going to select the cursor at the same way. So I'm going to use its ID name again, cursor I copy the ID name, and I'm going to replace main with cursor. Also, I'm going to change the variable name cursor. And I'm going to satisfy. So here we target the main deep element. Also we target the cursor Dev element. Now I want to add a even listener to our main deep element. For that, I'm going to type main dot, Aden listener, Advin listener, and I want to use mouse move event. Wever I move my mouse, it follow the mouse cursor. I want the cursor DVelement follow the mouse cursor. So inside the Doble course, I'm going to use mouse move. This is our event name. Mouse move. After that, we need to define a function to call it function. Then inside the rounds, inside the Cal resis, here, I want to print the cursor position, otherwise, cursor data. Then inside the Cal res for now, I want to print, console dot log, console dot log. Inside the round resus inside the double codes, I'm going to type event event performed. It's going to print this message. Then I'm going to set this file. After I set this file, if I back to my browser, let me show you and turn on console and load this browser. Now you can see whenever I move my cursar in this area, it print event performed in our console. So whenever I move my mouse, it going to print, it's going to trigger this function. Now let's see what are function is written. Let's back to the studio code again here, I'm going to pass a variable name. Here you can take any variable name. For now, I'm going to take dates. If I print this value in my function, let me show you some type, console dot log. Inside the round brrses I'm going to type. I'm going to pass the name dates. Now, let's see what it going to return, when but before I'm going to comment out this line, I don't need this now. Now, let's see what it going to return when my cars are on it. So set this file if I back to my browser and open my console. Now if I deload my browser and move my cars are in this area in my window, here you can see it provide our cars XSS and YXS position. And this is what we need to follow the cursor. For that, just on to use XXs and YXs. Let's go to the code editor again. Basically, this variable returns an object and from this object, we can extract different values such as XXs YXs, screen xxs, screen YXs, et cetera. According to the events, events such as kick, double kick, it's going to return different values. Now let's back to the tile or CSS file here, I'm going to define the position of this cursor and I'm going to use position fixed. Here I use fixed position, not absolute. Now, let's back to the browser. If you open any mouse events such as this mouse event and scroll it little bit, here you can found the value and the Y value and we need this to value. Let's back to the visa studio code and jump into the scrip dot js file. And if you want to print the X value and Y value in your browser, otherwise, if you want to extract the value, such as if I want to extract the X value, then if I set this file and back to the browser and reload this browser and if I inspect this section, console, now you can see if I hooper my cus on this element, otherwise, on this main DV element, now you can see it provide the Xcess value. If I move it to the right side, now you can see the higher in, and if I move it to the left side, you can see the lower value. At the same way, you can access the Y xs value to extract height for width, we use Xs. Let's get to the cotray and now here we can use GSAP. For that, we need to use GSF CIN. So let's go to the browser and search for SAF CEN. From the SAP CiriN here, I want to extract this Cdian link. We need the CdiN link, so I copy this Syrian link, and so I copy the CdiN link, and I'm going to paste it before this squib.s5, and I'm going to turn on WADAp. After that, after that, we need to back to the scredt JSFi. Now inside this event, we can apply the GSP animation. And here I'm going to use KSA, dot, I'm going to use two method, two because I want to move the element from their initial position. That's why we use two method. Then inside the round dresses. Now, inside the roundbass at first, we need to target the element. We can target the element using his ID name, but I already target the element and we stored this element in this variable mean. Sorry, cursor. So we need to target the cursor elements, so I'm going to type cursor here. Also you can target the element using its Dime cursor. Otherwise, tag name. Because I already target it using Dom and save it in a variable. That's why here I directly pass the variable in. Then after coma inside the class. Now a let the carsor element using GSAP, we can define the X xs position of the carsor element. Let me show you how some type X from the Xxs I'm going to define dates X. Then for the YXs, I'm going to define dates Y. I'm going to set this one. Now after set this file, let's see it going to work on knock. I think it's going to work. Let's jump into the browser and reload the browser. I'm going to load this browser. Then if I Wopi cursor inside this Min Div element, otherwise, Min div area. As you can see, it's starting, follow the cursor. Also, it provides little transition by default. Its look very nice. As you can see when I move my cursor, according to the cursor position and YX position, the circle follow the cursor and when I stop my cursor, then the cursor stop according to the cursor position. Now let's get to the z studio code A. Now, here you can apply duration, easing effect, delay, whatever you imagine. Here you can use bounce easing effect, back easing effect, and many. But for now, I'm not going to use any easing effect. So this is the first part of this tutorial. In this tutorial, we learn how we can create the custom cursor animation. It is not a very difficult one, but at the next part of this tutorial, I'm going to bring it to the next level. So thanks for watching this video. Stay tuned for the next part. 15. Buld a Custom Cursor animation Part 2 : Hello. Good to see you back. Once again, I'm back with another tutorial related to this project, and this is the second part of this tutorial. At the previous part of this project, we learn how we can follow our cursor using GSP animation. And now I'm going to take this project one step further. Now, let's do to the user studio code. So as you can see, we are in my Visa studio code, and I'm going to move this cursor outside the main Div area. Yes, we can move this cursor outside the main Div area still going to work. And here, inside the main Div element, I'm going to take another DV element, and I'm going to assign ID image. Hashtag image. Now let's style this D element, image. I'm going to copy its ID name and back to style CSS file. And here I'm going to select the element using its ID name. Then inside the colorss first, I'm going to assign height, height, and I'm going to use VW unit 30 VW. Then I'm going to assign weed, and here I want to pass 70 VW. And also, I'm going to assign a background color background color, and I want to assign. And here I'm going to assign background colored red. And I want to sub this one. And before I open this page in my browser, now we need to corre something. Here you can notice we did not close this car tag, so I'm going to move this closing dip tag above the main Dip tag, and I'm going to set this file. Then after I set this file, if I back to my browser, now you can see it looked like that. Now after that, we need to align this element middle of this page. For that, we are going to use flix. This is the flix method. Let me show you how. Inside the main dip element, I'm going to use display Flix, and I'm going to type Justify content center. Align item, Center. And I'm going to set this file. After I set this file, if I back to my browser again and reload this browser, here you can see it plays this image element middle of this page horizontally and vertically. And now we need an image. I already open a website called unplas.com. From here, I'm going to select this image. You can select any image it's up to you. So I'm going to click on this image. I like this image for this project, so I'm going to copy the image address, copy image address. And then let's back to the with a studio code. And here, I'm going to set the background image, background image, and I'm going to pass the URL. I'm going to set this file. Up to set this file leads back to the browser. And here, I'm going to reload my browser. Here, also we need to define the background position and the size for that. I'm going to type background position, which is center. And background size, background size is Cobur. If I set this file and back to my browser again and reload this page, now you can see the complete image. And now I want to select this image div element in our JavaScript page. So let's back to the JavaScript page and here we need to create a selector for image image DV element. I duplicate this line, and here, I'm going to replace Karza with image. And then I'm going to use this ID image. And I'm going to replace cursor with image. And I'm going to set this fine. And now I want to apply add even listener to this element, this image element. So here, I'm going to type image dot add even listener. Then inside the round brr says, first, we need to select the mouse event. Here I'm going to use mouse Enter event, I'm type, mouse Enter. Basically, it's worth if I open my mouse, otherwise enter this mouse at that reason in this development. And then a trachoma, we need to call a function. Then inside the clivrss I want to increase the size of our cars development. So what does that mean? Whenever I hoar my cursor, otherwise enter my cursor at that reason this image region, I want to increase the size of this custom cursor, this circle. For that, and here I'm going to apply GSA, and I'm going to use GSAPt two MthdGSA two. Then inside rounds first I'm going to sel cursor. Then after coma inside the calyces, I want to scale our casar element. So here, I'm going to use scale property. Scale and I'm going to set scale value two, and I'm going to set this file. So after set the file, let's back to the browser and reload the browser. So wherever I who my cursor on this image resin, as you can see, scale up the custom cursor size. But if I remove my cursor from this area, it's not going to scale down it. Also, we need to solve this problem. Now, let's back to the code editor. For now, I'm going to increase the scale size. I'm going to make it four. And also, we need to handle if we remove our cursor from this area, the image area. For that, I'm going to duplicate this line, and this time, I'm going to use another event, which is mouse leave. And this time I want to reduce the scale size, I want to make it one, and I'm going to set this file. After set this file, if I back to my browser and rewrote my browser, now you can see whenever I move my mouse in this image area, it increases the size of cursor, this custom cursor. But if I remove it from this image area, it's scaled down. But you can notice we have a problem. If I stop moving my cursor inside this image area, now you can see steal scale down the cursor size. I don't want it. We need to handle this problem. 16. Buld a Custom Cursor animation Part 3: So let's that to the z studio coedtor again. To resolve the problem, here we can use overlay. But before we need to understand why this problem is occur, let me show you why. So let's that to the browser and you can see when I move my cars in this area, it's become big when I stop moving my cursor, it's become small. Because this time I hover my cars are above the cars or circle element, not above the image element. That's why it lose the mouse event and become small again. That's why it shrink down every time when we stop moving our cursor. But what? If I move my cars are outside this little circle, now you can see again it's become big. But whenever I stop, again, it becomes more because now our cars are hovered on this cars are circle area, not the image area. To solve the problem, we need to use a overlap. Let me show you how. Here you can notice after stop the cursor, it run mouse leave event. Now the question is why it's run mouse leave event? Because now I hover my curor on this circle, this small circle, not the image. That's why it's called mouse leave event and reuse the size of this cursor. But if I remove my cursor from this little circle, again, it becomes big. But after stop my cursor, again, it becomes small, because this time it called the mouse leave event. To resolve the problem here, we need to apply a overlap. Let me show you how. Basically, the problem is this Karza dip element came between the image element and create the problem. So to resolve the problem, at first inside this image deep element, I'm going to take a image tag, IMG. And as a source, I'm going to provide the same file path, this URL. So I copy this URL from this place, otherwise, cut this URL from this place and I'm going to put it here. With that, also, we need to remove these properties from this position. I don't need it at that place and here, we need to create a new selector. First, I'm going to select the image element and inside this image element, I want to target the image tag, IMG. Then inside the Cari verses here, I'm going to define the nuid height. I'm going to use 100%. Also, I'm going to use with 100%. Now, Harry do not use any background image to this image DV element, but in our TML, we use image tag. Now, here, inside this image tag, I want to create a overlay. I want to assign an ID overlay. Then I'm going to set this file. After that, also, you need to fit this image, so I'm going to use another property fit, object feed copper. I'm going to set this file and back to my browser. Now, if I reload my browser, it looks like that. Oops, image is broken. Because here as a source, we need to pass the absolute URL. So I'm going to remove this URL command and then set this file. Now let's go to the browser E and reload the browser. Now it's look fine. Do you think it solved the problem? No. Still, it's not solve the problem because we need to style the overlay element. So here, I'm going to select the overlay its ID name, and I'm going to target the overlay. Then inside the curly says, I'm going to use background color, background color. I'm going to use red colour. And then here, I'm going to assign height, height and width, height. For height, I'm going to use 100%, 100% of the image area. Then I'm going to assign with we also 100%. I'm going to sub this file. Now I set this file. If I delt my browser, this is how it look like because we create this overlay before the image, not above the image. But we need this overlay element in absolute position. But before here, we need to provide in our image element relative position relative, and our overlay position Absolute. I'm going to set this fine. Now, after I set this file, if I back to my browser and reload my browser, now it's look like that. But what? If I reduce the opacity. If I reduce the opacity of this element, the overlay element. So here, I'm going to set background colored transparent. And I'm going to set this file. After I set this file, now, if I back to my browser, here you can see now you cannot see the overlay element, but if I her my cursor on this, the image element, this time we have another problem. The problem is our cursor element go behind to the image div element. We need to increase the Z index value of this cursor element. Again, back to the visa studio code, and I'm going to increase the Z index value of the cursor Z index. I'm going to make it Z index one. And I'm going to set this file. After I set this file, if I back to my browser and then my browser and whoever my cards are on this element, here you can see the result. But still it return the problem because I understand the problem. Let's back to the cod ray. Because we need to resolve this problem, the Z index problem, if I make it nine and move the overlay element above the Karza element. So here, I'm going to use Z index value in my overlay. So use ZD index ten. So here I basically move the overlay element above the cursor element and then set this file and back to the browser. Now reload my browser. I I open my car on this element, now you cannot see the problem. Now it's word very fine. Now you can see it do not reduce the casar size. We resolve the problem successfully. Now if you want to add text on this element, this cars are element, yes, you can. You can put anything. You can put text, image, or any other object. For that, you can use Dom method. Let me show you how. Again, let's back to the stud code, and let's jump into the script Js five. Whenever I enter my cursor, then I want to add a text in this element in this cursor element. Here I want to change the inner Mytype cursor inner HTML, and I'm going to set it int the double course, few more. View more. And when I remove my cursor from the image area, in that case, I want to say nothing, empty space. I want to sub this file. After I set this file, if I back to my browser and reload my browser, now you can see when I move my cursor on this image area, you can see the text view more, but we need to put the text inside the Karza deep element. For that, let's jump into the style CSS file. Here, I'm in my style dot CSS file, and we need to style the cursor section. Now inside the cursor selector, first, I'm going to define the font size. I'm going to define font size, and I'm going to make it five pixel. And then we need to align this font inside this little circle, this circle. For that, I'm going to use display display flex. And align item align, item center. Also, we need to center the contents. I'm going to tie justify content center. And also, I'm going to use text align text, align, center. After set this file, if I back to my browser, let me show you and read my page and my cards are on this element, now you can see the text perfectly. It perfectly aligned to the cars element. So this is what we are trying to build in this project. In this custom cursor, you can put anything here. As you can see, if I bar my cursor on this element, it increases the size, and if I remove the cursor from this element, it decrease the size, and also it vanish the text. So we successfully build our project. Thanks for watching this video stay tuned for our next project. 17. Create Animated Timeline Designs part 1: Hey, guys, good to see you back. Once again, I'm back with a new tutorial related DSP animation. Today in this tutorial, we are going to create a beautiful project. We are going to create a horizontal animation timeline project. As you can see in my browser, we have a horizontal line. And here you can see, we create a timeline using these boxes. Now I want to animate this box when I deload my browser. So you can notice when I reload my browser, first, you can see it moved the horizontal line, then one by one, it's going to animate our boxes. Boxes with bows effect, rotation effect scale effect. Ese effect, and at last, we move this box from the opposite direction. So how we can create this animation effect? As you know, to create this animation effect, we are going to use GSP timeline. Also, we are going to use SAP zing properties. So without wasting your time, let's start the practical and see how we can create this beautiful animation. So as you can see, we are in mind visors Stu Ceditor. And if you notice you can see in our body tag, we have a main Deep tag. And inside this main Deep tag, how we create multiple boxes. Here we create total six box, and every box come with different ID. With that, here we assign a class name box to every DP element. And to define the position of the box, also we assign to other classes box top for top position, and for box bottom for bottom position. We use this class to position our element above the horizontal line. Also, we have another class name bogs bottom. And these glass is used to place boxes below the horizontal line. Now, let's jump into the CSS file. If I show you the CSS file, at first, we assign fixed width and height to our main deep tag, and also we set a background color. Then her we create a horizontal line using Posido selector after posito. First, we create a blend content, then we position it absolute because in our main element, Heros use position relative. That's why here we use absolute position. Then I use fixed height then With height, six pixel a With 1920 pixel. Then after create the horizontal line, here I create the boxes, these boxes. Next, I create these circles. Here we create two different circles for box top classes and box bottom classes. To create the circles, also use upper Posidoselector. As you can see, this circle and the arose made with positoglass selectors. At last, one by one, I position this box according to horizontal line. In this tutorial, I'm not going to explain you how I can create this TMS structure. Don't worry, I will provide the source code of this structure. Now, let's jump into the Js file, apt JS file. But before, if I show you my index dot TML file, here you can see, I already linked with SP library using CDN. Also attach app dot JS file with this document. So let's that to the app dot js file. So first, I'm going to integrate timeline. So I'm going to create a variable cost and our variable name is TL. TL sta for timeline equal to GSAPGSAPTline function. Then Semgron two in this line. After I create the timeline, one by one, I want to implement all the element. At first, I want to implement the main element. So I'm going to select the class name. And then back to the app s five. At first, I'm going to use Form function. Tal dot from then inside the roundress at first, I'm going to select the main element using its class name dot Ming, and I want to move this element at XX direction. Inside the caries, heterotype X, colon, inside the double codes -100. If I set this file and back to my browser and reload my browser, you can see the result. As you can see, we move this main element from the left to right side. I think this animation is too quick. Let's use some duration. So here, I'm going to use duration property. Duration, and here I'm going to use total force again duration. I think this is enough. If I set this file and back to my browser and reload my browser, you can see the effect. As you can see, whole section move right side within 4 seconds. But if I reload this browser again, as you can see, the background color of body is still white. Now, we need to match the background color of this body with this color. For that, I'm going to jump into the style CSS file. And here, I'm going to use the same background color in my body tag. So at first, I'm going to select the body tag. Body is at the cools is, I'm going to use this background property, and I'm going to set this file. Now, if I back to my browser and reload it, now our body background color and main element background color is similar to make this animation more attractive, let's make it 100% -100%, not pixel. If I set this file and back to my browser and reload my browser, you can see the animation, how it's loop. This is just animation of the main section. But as I told you in our earlier tutorials, using live server is the not best option for CSS animation because every time I save my file, it reload the browser. So I'm going to pause this recording for 2 seconds. And this time, I open this document from my directory, not from the live server. So at first, in our timeline, we move this main element from the -100% excess direction. Here we use timeline because one by one, I want to part from my animation. Next, I'm going to select our box one element, this one. So I copy the ID name and back to the app dot js file. And here I'm going to tie. Basically, I'm going to duplicate this section and replace dot Min with our first box using its ID name, hasta box one. Also, I want to move this element from XX deduction, and here I want to say duration just 1 second. And I mode with this file. Now, let's back to the browser. If I reload this browser, at first, it's going to perform the main animation, then it's going to perform the second animation. But the problem is up to run the animation for the first element, these circles go behind to the horizontal line. So to resolve the problem, let's back to the style dot CSS file. 18. Create Animated Timeline Designs part 2: So this is our style CSS file. This is the horizontal line. So at first, in our horizontal line, I'm going to set z index, Z index, and I'm going to set Z index one. Then I'm going to set Z index in our box. So I'm going to type Z index, and here I'm going to pass 999. And I'm going to set this file. Here I use big value because every time I need my boxes above the horizontal line. That's why here I say horizontal line zero index one, and box zero index 999. If I set this file and back to my browser and reload this browser, this time you can see up to run the main animation. It moved the box. And as you notice, this time our circle is above the horizontal line. With that, I want to make this box animation more attractive. So here I'm going to say it opacity. So let's back to the Adder Jas file, and this time I'm going to use another property called opacity, OPA CITY, opacity, zero. So when the box start moving from the xx's direction, then we set the oposit zero. If I back to the browser and load my browser, now you can see upturn on the main animation. If you notice carefully, it's worked properly, but if I increase the duration, if I make it three second for the box animation, and then again, back to the browser and reload the browser. First it run the mean animation, now you can notice the opacity. Here you can notice the opacity of this element, how it's changed. And now I want to take this animation to the next level. For that, we need to use some easing effect. So let's jump into the documentation of this website and search for easing, EASI Z. You can search it in this filter side verse section. Tset provide multiple easing animation example, such as Power one, power two, power three, power four, back, bounds, elastr, et cetera. Every option is different from each other. Suppose if I select power two, this is how our animation going to run. If I use back, this is how our animation going to perform. This is the grab of this animation. At the same way, if you want to use Illustr effect, this is how illustr effect work. Suppose I want to use this effect, Illustry. So I want to copy this property and value and then back to the studio code. And here, I pressed the duration, 2.2 0.5 second. Then I'm going to use comma. Next, I'm going to use this property and value Illustry. And I'm going to set this file. After I set this file, if I back to my browser and reload this browser, upper platform the main animation. You can see the Illustr effect for the first element. For now, I would like to stop the main deep animation because every time it's going to run the animation and it take more time. So first, I'm going to comment out this section. Don't worry. I will uncomment this section later. Then I'm going to set this file and reload my browser. Now you can notice only this animation. And if you want to change the effect, suppose you want to use B. In that case, just here, you need to type is back. Up to satis file, if I reload my browser, you can see it back effect. Now, at the same way, I want to bring this element from the opposite direction. I want to bring this element from the right side. This time, I want to bring our last element from the right side. So I'm going to duplicate this section, and this time I'm going to select box number C because this is the last box. We slip this box using its ID name, and then I'm going to change the Xs position 100% from the Xs. If I set this file and back to my browser, and reload my browser. As you notice, first box come from this place and second box come from this direction. Put the animation doing the same thing, but just to change the direction. Next, I'm going to use bouncyft for this element, 2012. If I select this option, as you can see how this animation work. So let's back to the visor studio code. Between box one and box six, I want to place box two animation. I want to make it serial so duplicate this section and select box two, and I'm going to change the e value back to bound. And also we need to change the position, is to YXs minus YXS position. And I'm going to set this file. After set this file, let's rote the browser. After I reroute the browser, a run the first box animation, it's going to run the second box animation. Oops, I think I did some mistake because we need to bring this box from the bottom, not from the upside. So let's get to the reser studio code and remove the -100% and set this file. After I set this file, again, I'm going to reload my browser. After I run the first animation, you can notice the second animation, how it's work, and it provides bows effect. Then it run the third animation. Then I'm going to animate the third box. So let's get to the visuals st code, and I'm going to duplicate this section. And this time I'm going to select box number three, and I'm going to change the direction -100%. With that, now with bounds, I want some rotating effect. So I'm going to use a property called rotate. Rotate colon, and I want to rotate it 360 degree, a complete circle. And I'm going to set this file. After I set this file, if I back to my browser and reload my browser, first it run our first element, then it's going to run the second element. And if you notice, as you can see, it bows the element. Also it rotate the element. Next, I'm going to target the fourth box. So again, I'm back to the user studio code and duplicate number three. First, I'm going to change the direction 100% because I want to move it from the bottom. Then I'm going to use the same bounce effect. But this time I'm not going to use rotate effect. This time, I'm going to use scale wheel. Scale, colon, and I want to make scale 0-1. So here I pass zero. But before I set this file, we need to change the ID, box number four. And I'm going to set this file. Now, let's reload the browser. After reload the browser, if you notice the fourth box, you can understand the animation. With bounce effect, it scale the element. And now I want to animate the fifth element. For that, this time I'm going to use another effect. This time, I'm going to use slow effect. So let's back to the with a studio code. And first, I'm going to duplicate this section. Then I'm going to change the ID, box four to five and change bounce to slow. At first, I'm going to change the direction -100%, and I'm going to remove the scale one. This time, I'm not going to apply scale effect. And I'm going to set this file. After set this file, let's back to the browser and reload the browser. After reload the browser, as you can see, one by one, it's going to perform all the animations. Bouncy animation, rotating animation, scale animation, slow effect animation. And back animation from the opposite direction. And now I'm going to activate my main D animation. So let's back to the Video studio code and uncovent this section and set this file egging. Now, let's back to the browser and reload my browser. Now you can see, first, you can see a horizontal line come from this direction, then one by one, it perform all the animation. So, finally, we create this timeline effect animation using GSAP. So this is it for this tutorial. Thanks for watching this video. Stay une for the Next Tutorial. 19. Create Stunning Text Animations with GSAP part 1 : Hello, guys. Good to see you back. Once again, I am back with a new project related GSP animation. Today in this tutorial, we are going to learn this beautiful project. So as you can see Weber, I reload my browser, you can notice the animation. So this is what we are going to build in this project. For this project, we should have little knowledge about JavaScript though. So without wasting your time, let's start the practical. We need to select all the characters one by one from this word. Then we need to animate it separately, but we are going to do it using SAP animation. We are going to use strager. Also, we are going to put every character of this word into a Span thag dynamically. So let's start the practical and see how we can create this animation project. So finally, we are in my Visual Studio coditor, and as you can see in my current working directory, we already create three file, indice dot tv file, scrip dot js file, and styler CSS file. And as you can see at index dot EtvLFle, we already link with Stylo CSS file. Also, we link with script dot js file. That we already use the Cdian ink or GSP animation. And in our style CSS file, we already typed the started tablet for the CSS. He set margin zero padding zero, box sizing border box, and also we provide height and width to the estimate tag and the body tag. After that, I'm going to open this page. I'm going to open this file in my browser. And I'm going to open it without using Live server. So as you can see in my browser, our page is completely empty. Then at first, I'm going to type the text using heading one tag. Let me show you how. So here, I'm going to type H one. Then inside the H one tag, I'm going to pass Hello World. I'm going to set this one. After pass the heading one tag, we need to style the web page. Let's jump into the style or CSS file. At first, I'm going to select the body tag. Tag body. Then inside the body tag, inside the courses, I'm going to provide background color. Background color, and I want little darker color. I'm going to use Hastag 111. Next, I'm going to use this flix because we need to move this heading one tag middle of this page vertically and horizontally. I'm going to use this type ofperty display flex. And align item, align items center. After that, justify content, also center. Then I'm going to set this file. Up set this file lets back to the browser. Now if I reload my browser, as you can see, it's look like that. Our text is barely visible. So we need to change the text color. I'm going to change it into white color. So here, I'm going to type. First I'm going to select the H one tag, H one. After that, inside the color says, I'm going to assign color. Color and our color is white. White color. Then I'm going to apply font size. Font size. And for this example, I'm going to use 150 fix el font size, and I'm going to set this file again. Now let's back to the browser again. If I reload my browser, it look like that. Now, let's jump into the JavaScript file and select this element. I want to say the H one element. For that, we need to use Dom method. So here, I'm going to jump into the script DJs file, and I'm going to type document dot query selector. Query selector. After that, inside the round addresses, inside the double course, I'm going to use its tag name which is H one. Then from this document, I want to extract the text content. I want to say, I want to extract this text, hello world. And as you can see, here I use hello word together. I do not provide any space between them. So this is, for example, you can type anything will come whatever you want to type. So at that place, I want to extract the text content, text content. Then I'm going to store it in a variable. For that, I'm going to declare a variable there and our variable is g one, where H one equal to document dot query selector dot Tex Content, and I'm going to set this file. Now, if I try to print this in my console, let me show you some type console dot log. Console dot log inside the round adress, I want to print the variable H one. Then I'm going to set the file. After set the file, if I dug to my browser, let me show you and reload this page. Then if I show you my Console, now you can see in my console it print the hello word. So I successfully select the taste and store it in a variable. Now, we need to split this text. We need to split the text by characters. For that, we need to use a method called split text. So let's jump into studio code again. And here, I'm going to tie first time comment of this line, otherwise, you can remove this line. We don't need this line. Then I'm going to tag that and our variable mis and spit text. Speed text. Spit text equal to h one dot speed. Then inside the double quotes, and I want to split the test by characters. Not the space, not any other characters. I want to split the text by all the characters. So I'm going to use empty quotation, this one. Then if I set this file and try to pin this variable in my console, let me show you some to type, Console, dot log. Inside the round Bress, I will pass the variable speed text. Then I'm going to set this file. After set this file, if I reload my browser and turn on, inspect and show you my console again, now you can see here itanNE. Basically, divide the word by their characters. Here you can see all the character differently. Also, you can see their index number, zero H at zero position, we have H at one index position, we have E. This is how we divide all the characters. 20. Create Stunning Text Animations with GSAP part 2: And now we need to run a special loop. We need to run a special loop for this splitted text. We are going to run for each loop. So let me show you how we can use for each loop. We need to run this for each loop in the variable, split text. I'm going to type, split, text, tat for each. Then inside the round recess, I'm going to pass the function. Function, and for now, I'm going to pass empty function, then inside the curses. But before, I'm going to declare empty empty variable. Let me show you there, clutter, CLUTER clatter equal to it's a emptied, completely empty Vd. I will tell you later why I define this variable. Don't worry about it. Now, let's talk about for each loop. It going to run how many value have in this variable? According to the number of value in the pretext variable, it going to run the loop. Suppose, as you can see, in this word, hello world, we have to we have to tell ten character, so it's going to run this loop to tell ten time. So if we have to tell five word, then it's going to run the loop for five time. So for each elemate it's going to run this loop. That's why it's called for each loop. Suppose if I type console dot log, console dot log, dot, log inside the roundra if I pass hello and then set this file and back to the browser. If I reload my browser after reload my browser, if I open my console, now you can see it going to return to in hello in my console. Here you can see, we have to ten hello in my Console, I printed TNT because we have to tal TN character in our word. So let's get to the code editor, but I don't want to print hello. Here I want to rejoin the divided text. And now I want to store every character of this text variable into this variable, this empty variable clutter. So I'm going to type clutter, equal to clutter, plus here you can use standard string method. So I'm going to type Batis then inside the backticks. But before, let's try to understand what I want to do. For now, I'm not going to type backticks, and here I'm going to type any character, any word. Suppose hello. I'm going to set this side. Basically, it's going to store ten time hello in this platter variable. Here I'm going to print console dot log. Console dot log inside the round dresses I'm going to pass the vari clutter. And I'm going to set this file. After I set this soil, if It to my browser again and read my browser, now you can see in my console, it print hello time. Every time it's going to add the hello word in the clutter variable one by one. At the same way, I want to store all the character of this speed text variable. Basically, I want to print this same word, hello word. For that, we need to use dactis. Let me show you how. So here, I'm going to type. I'm going to use shortcut, latter, plus equal, increate with every time it's going to increment with one value. So inside the double co inside the Bates, inside the Batixs I want to store the same word. But before, we need to define a variable in our function. Here I'm going to define M. This M value stored the current character. So Hearty, tablet string method, dollar sign, and Clss. Then inside the Calses I'm going to pass the variable name M and I'm going to save it again. After set this file, if I reload my browser and if I show you my console, now you can see again in print Hello World. Now you might have question, why I do the same thing? I am full? No, I'm not. Why I written the same word hello word using lot of coke? Because now we have control over every character using JavaScript. Now we can put every character in a span tag. Let me show you what we are going to do. So as you can see, if I want to animate all the characters by one after another, otherwise differently, then we need to put all the characters into a span tag to select it differently. But what? If we have multiple words such as hello word, it's total ten character. For that, you need to iterate it and you need to separate characters from the words. And now I'm going to put all the word into Span tag using the help of Dom. So here, I'm going to type span tag. Let me show you how span, Dan, closing tag, span, and I'm going to set this file. After I set this file, if I back to my browser and then delete my browser, and if I show you my console, now you can see it put all the character into span tag, and also you can see the elements section. Let me show you. No, it's not going to show you now because we do not apply this result in our element. Let me show you. We need to apply it in our element first. So let's back to the coordinator, and then I'm going to change the inner estimate. So type H one dot inner HTML, equal to, and here, I'm going to put this variable clatter. And then I'm going to set this file. Basically, we do all this stuff to put every character in a span tag, nothing else. But before I set this file, let's break this down. I'm not going to use one line so I'm going to duplicate this line. Otherwise, yes, I'm going to duplicate this line. First, I'm going to change the variable name. Here, I just select the element. I'm not going to extract the text and not going to save it DAT in this variable. And our next variable is H one text. H one takes Eguir two and Hemo type H one dot text content. This one. So basically, first we select this element, and then we extract text from this element. After that, we need to spit this word. By every character. This time, I'm going to replace H one with H one text, and I'm going to set this file. Now I want to set this file, let's back to the browser. As you can see, we are in my browser and I'm going to reload my browser. After reload my browser, if I show you my Console, otherwise, elements section, now you can see in my body tag, we have H one tag. Then if I open this H one tag, now you can see it put. Here it put Spen tag for every character for H E L O WORLND so now we have the control over each of the element because of span tag. Now we can control every character. That's why we need to put all the character inside the span tag. This is it for the password of this tutorial. At the next word of this tutorial, we are going to apply IGSp animation of every character. So thanks for watching this video stay tuned for our next chapter. 21. Create Stunning Text Animations with GSAP part 3: Hello, guys, good to see you back. This is the second part of this project. At that section, we are going to learn how we can animate it using GSA. Let's go to the vis Studio code. We are in my visor Studio code editor. At first, I'm going to jump into the scrip dot has file. Now, at first, with Span tag I want to assign a class name to this span tag. For that, first, I'm going to type inside the Span tag class. Class equal to inside the double code. Inside the double code, I'm going to use tempted string method, dollar sign and arises. Then in our function, I want to access the index. First, it's going to return the element, I mean the character one by one. Then with the character, also going to return their index number. I'm going to type index IND. Here I'm going to pass index, IND variable IND. I'm going to set this file. Now after set this file, if I reroute my browser, let me show you some to reroute my browser and show you my Console inspect. Console, otherwise, body tag. Now you can see inside my span tag, we have a class. This is class number zero because our index start with zero and we have total ten different span tag. For all the different span tag, it assigned different class number. It assigned different class name. I'm not going to use classes in this project, but I will just introduce you. How can we assign class for different span tag? Now, let's back to the studio code. After that, first I'm going to remove this line, I don't need this line, then I'm going to run the GSAP animation. So type G, GSAPt dot from. I'm going to use from method. From and inside the round dresses, at first, I'm going to target the H one tag. So I'm going to pass inside the double codes H one. Then after space, I want to target the span tag, which is inside the H one tag, so type span. And then after comma, inside the aliases, I'm to type from the YXs I want to move 100 pixel. So it's going to run the animation from the hundred pixel YXS to or is in place. So if I set this file and back to my browser, if I reload it, it's not going to run the animation. Let me show you. So if I back to my browser and reload this page, as you can see, we do not run the animation because now let me clear a confusion. As you can see, this Pentag which is created by JavaScript in our timal page. It is an inline element. It is not the permanent element. So we need to make it inline block. We need to make it in line block in our CSS file. So this span element inside H one tag, we need to make it inline block. So inside the childhood CSS file, here, I'm going to select H one tag H one. Above that, up to target the H one, also, we need to target this span tag, span. Then inside the Clss I'm going to use the property called display. Display and here I'm going to type inline block. I'm going to set this file. Now after make it inline block, I'm going to set this file and let's back to the browser. If I my browser, now you can see it run the animation. Now, add little other properties on this animation. For that, here, I'm going to add little opacity. Opacity, opacity, and I'm going to assign opacity from zero. It's going to start from zero and then is back to the at opacity one. After that, also I'm going to add duration. Duration for duration, I'm going to add 1 second. Also, I'm going to add lay and I want 0.5 second delay for each of the animation. Then I want to run them, all the character animation one after another. So for that, we use stagger value. We already fill there with stagger, this property. Stagger, and I'm going to assign stagger 0.150 0.15 second. Basically, it's going to run all the span element one after another. So after set this file after set this file, if I back to my browser and if I read my browser, now you can see it going to run a beautiful animation effect. It's going to run all the character animation one after another. Let me show you. So after I relate my browser, now you can see it run this animation. This takes animation, the beautiful takes effect animation. Now, let's make this animation more cool. For that, I'm going to had this overflow area. Let me show you how. So if I back to my stylo CSS file and assign a background color to this H one tag, background color, red, then I'm going to set this file. After set this file, if I back to my browser and my browser, this is how it look like, but I want to hide when I text outside from this area. For that, here, I'm going to use a property called overflow. Overflow hidden. Also, we don't need this diagram color anymore. For example, after I set this file, if I now you can notice whenever I reload this page, it's not going to show the characters outside the red area. Let me show you. Reload this page, you can see the result. You can see the characters outside the red area. Now if I hide this red area, let me show you so if I hide this background color and then back to the browser and reload this browser, this is how our text animation look like. So this is it for this part of this tutorial, and the next part of this tutorial, we are going to make this animation more beautiful and more complicated. For that, we need to make some complicated calculations in JavaScript. So thanks for watching this video Stdune for our next part of this tutorial. 22. Scrolling text animation Part 1: Hello, guys. Good to see you back. Once again, I am back with a new project related GAP animation. Today, we are going to perform scrolling text animation using GSAP. So as you can see, this is the text. When I scroll down my page, as you can see, it start the animation. But when I scroll up this page, as you can see, it start the animation at opposite direction. So this is what we are going to create in this tutorial. We are going to change direction where we scroll our page. If we move downward, then it's going to run this animation at that direction, and if we move upward, then it's going to change the direction. And also, you can notice it changed the direction of arrow. So without wasting your time, let's start the practical and see how we can create this beautiful scrolling text animation. So as you can see, we are in my user Studio code editor, and this is my current working directory. And as you can see, we already create index dot estimate file, style dotsssfle and screen dot js file. And I already open this estimL document in my browser. Then Timel page. And also, you can notice, I already attach the Cdanlink of SAP animation. Then also attach with screen dot js file. Now at first, inside my body tag, here I'm going to create total three deep element. So t deep has tag, and its DNA is page one. And the same way, I'm going to create two other deep element. I du this line, and this is page number two, and this one is page number three. So these are all emt D for page. After I create the three page, I'm going to jump into the style or CSS file. At that section. As you can see here I already provide margin padding and also wetyle the table and our body tank. Basically, it is the default template of CSS. Now, at first, I'm going to select page one. Then after coma, I'm going to slit has tag, page two. Then I'm has tag, page three. Then inside the librass first, I'm going to assign height, height, 100 H. And then I'm going to assign Width, width hundred persit. So after set this file, if I back to my browser, here you can see the scroll bar. I do not provide any background color to this page, and if you want to assign different background color for this page, yes, you can, but I'm not going to do that. After that, now let's jump into the index dot tML file. Then inside the page to section in this Dev element. Here I'm going to take another Dev element. First, I'm going to type Dev has tag, and its Dame is move because this is the movable area. Here we are going to move all the text. Moped here I'm going to create another Delement DV and its class name is Mark Mark. Then inside this Dv element, here, I'm going to take a H one tag H one. Then inside this H one tag element, I'm going to type, hello, welcome to GR. Welcome to GSR. Then I'm going to set this file. After set this file leads back to the gauser. So as you can see, if I scroll down a little bit, here you can see the text. Hello, welcome to GSA. And also, we need to add a erosim at that position. After the text, at that position, after the text. For that, I already download a icon. Arrow dot VG. If I open this image, here you can see the result. This is the image we are going to use for arrow. You can found this kind of arrow image easily on websites. Just you need to search for right arrow otherwise left arrow. Then I'm going to use this VG image at that position after the H one tag. So type image tag. I'm going to use Image tag IMG image. And as a source, I'm going to pass arrow dot SVG. Then I'm going to set this file again. After set this file, let's back to the browser. If I reload my browser, this is how it look like. Now we need to align this arrow after the text. But first, we need to reduce the arrow size. So let's back to the studio code and jump into the stylo CSS file. So first, I'm going to style the move div element. For that, I'm going to select hashtag move. Move inside the Caliss, I'm going to use background color property, Bground color, and I'm going to assign background color yellow. Now I'm going to set this file, but before I set this file, I think I did some mistakes, it's not move, it's moped ED. Then I'm going to set this file. After I set this file, if I back to my browser and now it's look like that. After add the yellow background color to the mood area. Now we need to put this arrow side up, this text. But before, we need to reduce the size of this arrow. For that hair, we need to select the image tag. We select this image tag which is inside this MR class. So copy the class name, then I'm going to select the MRF MR I want to select IMG image. Then inside the clauses, I want to assign height. I'm going to assign height, height, and I'm going to pass the value 70 pixel and I'm going to set this file. After set this file, if I back to my browser and rewrote my browser, now it's good. It's look good. Now, after reduce the size of this arrow, I want to select the H one tag which is inside the MR class. So to type dot Mark H one. Then inside the calibre says, at first, I want to select the phone size propriety fond size. Then Hem use 70 pixel font size, 70 pixel. Sorry, pixel. A that, I'm going to slate this element, this mark element. So here, I'm going to type dot mark. Then inside the Calibre says, I'm going to use property. Here I'm going to use Property display, display flick. And then I'm going to use another property Aline Align items center, and I'm going to set this file. If I set this file and back to my browser, you can see the result. Now we successfully align this erosine beside of this text. Next, I'm going to assign little gap between these two items, text and the erosine. For that, I'm going to use gap property, gap, Gap, equal two, and I want to assign two VW few food weed gap. Then also going to assign little padding. Padding for padding from top and bottom, I'm going to use zero and for the right and left, I'm going to use 1.5 VW I'm going to set this five. If I back to my browser, this is how it look like. And if you want to increase the padding, yes, you can, it's up to you. And now I'm going to duplicate this mark section multiple time. Let me show you. So here, inside this index dot estimate file, I'm going to select this mark element, this one, this element. Then I'm going to duplicate this line multiple time. Here I'm going to duplicate this line total five time, and I'm going to set this file. After I set this file, if I back to my browser and reload my browser, this is how it looked like. Now, we need to align the takes beside of it. For that, again, we need to use flex display flex property in our mood div element. So in our modi element, the parent div element, I'm going to use this property, display flex. And I'm going to set this file. After I set this file, this is how it's look like, but there is another problem. We need to resolve this problem. We need to shrink the text. Also we need to hide the overflow area. For that, back to my vis studio code, and in our marque section, I'm going to use another property called flex shrink flex shrink and I'm going to pass zero. Then I'm going to set this file. If I set this file and back to my browser, this is how it's look like. Now we need to hight the horizontal scroll ar. For that, we need to use overflow hidden property. In our M div element, I'm going to type overflow heated. And I'm going to set this file. After set this file, if I back to my browser, this is how it looked like. Now it's look perfect. So that's the first part of this tutorial. So here, we just align the text and create the structure. At the next part of this tutorial, we are going to start the JavaScript. So thanks for watching this video, Staytune for our next tutorial. 23. Scrolling text animation Part 2: Good to see you back, guys. This is the second video related to this project. And in this video, we are going to start the JavaScript. So let's jump into the Rsa studio code editor. So here, I'm going jump into the script dot TAS file. Now inside the Javascript, we need to extract a value. We need to extract the value, which going to told us we scroll down the page. Otherwise, scroll up the page. I want to extract the scroll diction of web page. I want to say, whenever I scroll my browser downward, then I want to extract the value of scrolling. At the same way, when I scroll my page upward, also, I want to extract the value. For that, we are going to use event. We are going to use event on this window. This complete Dower Window. Here inside the script dot js file, we are going to use window dot add even listener method, Window dot, Ad evenlistener. We are going to use an Evet and here we are going to use Hullvet hell. Inside the Duval course, I'm going to type WHE. After that, after you use this event, we need to return a function. Function. Inside the undress, I'm going to type B ETS. Then inside the libres, here, I'm going to type console dot log. Inside the round brress, I want to print the Wheel valve. Basically, I want to print the Gets value DTS. And I'm going to set this file. After I set this file, if I back to my browser and if I open my Console, let me show you, as you can see whenever I scroll down my page, it triggered the wheel event. At the same whenever I scroll up this page, also it return a value every time it return a value from this page, we need to extract the Y excess value of this scrolling. For that, we need to grab this value, Delta Y. You can notice whenever I scroll down my page, as you can see, it pass positive 100 value whenever I scroll up this page, it pass and whenever I screw up this page, it pass negative 100 value. We need to grab this one. If it is past negative value, then we need to run this animation opposite direction. And if it is pass positive value, then we need to run this animation at the same direction at that direction. So using of Delta Y value, we are going to set the condition. But at first, let extract the Delta Y value. Here inside the Javast file, here I want to X Delta Y, DL Tay, Delta Y, this one. Now I'm going to set this file. After I set this file, if I back to my browser again, then you can notice only the Delta value. If I scroll down my page, here you can see the Delta value 100. If I scroll up this page, also you can see the Delta value, but this time you can see the negative value because we screw up this page. Now, according to it, we are going to set a IP condition. Let's back to the code editor, and here I'm going to comment out this line and I'm going to set a IP condition. If Delta I dates dot, Delta Y, Delta Y, greater than zero. I Delta Y value greater than zero, I want to see the positive, then inside the IP condition. This time I want to print, console, dot, log inside the roundss. Inside the double course, Imtype normal scrolling, scrolling. Then s inside the coliss Amt, console dot log. Inside the roundre inside the double course, amutRverse scrolling. Scrolling. I'm going to set this file. Up here, set this file, if I back to my browser again and this time if I scroll down my page, as you can see, it print normal scrolling. If I scroll up this page, this time it print reverse scrolling. So we set our condition successfully. Now inside this condition, we are going to use GSAP. Let's back to the codior again and I'm going to comment out both the lines. I don't need it. We just type it for testing purpose, nothing else. Now inside the positive condition, I'm going to use GSAP. I'm going to use GAP dot two method because we are going to move the element from the initial position to another position. So type G SAP GSAP dot this dot two method and inside the roundreses first want to select the element in which element I want to, I want to animate it. So I want to select this element Murky. I'm going to copy this class name, and I'm going to type dot Murky. After that, inside the Kalis after coma, here we are going to use transform property, transform and in positive condition, I want to move this element to this direction. For that, I'm going to use translate X value. So let's get to the the studio code, and this time, I'm going to type, transform, translate, translate X. The inside the round dresses, I'm going to change the direction. I'm going to change phono type -200%. I'm going to set this file. Let's set the file and back to my browser and see, is it work properly or not. As you can see, we are in my browser and whenever I try to scroll down my page, as you can see, it move the element. Let's reload this page and do it again. After, scroll down my page, as you can see, it run the animation. But here we pass minus value, so it's the animation at opposite direction. I first I'm going to provide a duration little. We to provide a little duration to understand the animation. So first I'm going to remove the minus vdu. I want to move it 200% at X direction. After that, I want to set the duration, duration, duration, I'm going to provide four second duration. After that, provide the duration. Also, I'm going to use repeat value repeat repeat, and I want to set repeat value minus one. I'm going to set this file. After I set this file, let's back to the browser. If I scroll on my page, now you can understand the animation and I repeat the animation multiple time. Now, let's move the element from the -200 person. I want to change the origin position of this text. -200% and I'm going to set this file again and let's back to the browser again. This time whenever I scroll down my page, it run the animation opposite direction, and it look very beautiful. When I scroll up my page, it's not working because we do not set the animation for it. Now from this animation, we need to remove the easing effect. By default, it set easing effect, so here, I'm going to type property. Es EA AE, E and inside the double code, I'm going to use Nan Value. I don't want to provide any easing effect. And I'm going to set this file and back to my browser. This time, if I scroll down my page, you can notice now you can notice our animation doesn't stop. There is no slowing effect because we remove the easing effect. Now, let's handle the other condition. Here I'm going to copy the same code, and I'm going to pest it condition. Now, if I revers scroll it, this time, I want to move this at X direction. But here, I'm going to pass positive value 0%, and I'm going to set this file. Now to set it 0% at excess direction, it means going to run opposite direction and set this file if I back to my browser, and this time if I scroll down my browser, otherwise scroll up my browser, as you can see, it run the animation opposite direction. If we scroll up and scroll down the page, this time it's going to change the direction of this animation because it depends on the positive and negative value. According to the positive and negative value, we said the condition. Now, we need to change the arrow direction. For that, let's back to the user studio code again. Just try to understand, first we start the text from the -200% at excesss direction. It is for normal scroll, and if we revers scroll it, then it's going back to the 0%. Now, we need to target this arrow, this image arrow. So for that, inside the Delta Y condition, the first condition here after GSAP again, I'm going to use GSAPGSAP two method, two, and then inside the round grasses, inside the double course, first we select the image. And I want to select this image which is inside this marking. So here, I'm going to type dot marking. I copy this selector mark and I'm going to taste it here. After that, I'm going to provide space and I'm going to type image ING. Then after coma inside the calves, inside the clivss here, here I'm going to change the direction of this arrow. I'm going to rotate 180 degree. I'm going to use rotate value ROTA TA, rotate. 18, I want to set this part. Then I'm going to copy the same selector for another condition, s part. Here I'm ti This time, I want to rotate it for zero degree. Again, it's going to change the direction. So to step this file if I back to my browser so as you can see, we are in my browser. If I scroll down my page, you can see, you can notice it going to change the direction of this arrow. Let me show you. After scroll down the page, as you can see, it's going to change the direction of this arrow and it move the animation. Then if I scroll up this page, again, it's going to change the arrow direction and it's going to move this animation this direction. This is what we can create using GSAP. Now, let's back to the vis studio code A. So I hope now it's clear for you, how can we handle scrolling text animation with GSA? Thanks for watching this video. Stay tuned for our next project. 24. Build navigation bar of landing page: So welcome to another project Rel tate GSP Animation. And today, we are going to create this landing page. After that, I'm going to animate the components one by one. We are going to build this landing page from the scratch, and then I'm going to add SAP animation. Particularly in this project, we are going to learn how we can use timeline with scroll Tigger. Timeline and scroll trigger both are separate thing. Timeline help us to run animation synchronously. We already learn about that in our previous project and scroll trigger help us to run our animation based on scrolling. In this project, we are going to merge both the things. That' going to help you a lot in future, and in your upcoming projects, you can apply it. In this studiL I'm not going to create any real website, but I'm going to build this landing page from the scratch. Don't worry. I will guarantee you you will enjoy this process. Let's jump into the result studio code editor. I am in my resources stdio code editor, and as you can see, I already create the Blettemplate, index DML, and I already link with style CSS file. This is our style CSS file, and her I already typed the default CSS. Here we said Margin zero padding zero box sizing water boox and use font family area. Also, we say height and width 100% to our body and estimate tag. So if I back to my index estimate file, and here you can see we already use the CEN link of this SAP animation, and we also create script dot js file. So at first, in our body tag, I'm going to create a section, a section for navigation. At first, I'm going to build the navigation bar of this web page. Basically in this tutorial, we are going to focus on only this navigation bar. I'm going to create this project part by part. So let's jump into the is a studio code. So at first, here, I'm going to take a section, a section D element. Section. Then I'm going to assign a class class and our class name is section one. And at that section, I want to create a NAP bar. I want to create Naviation bar, so I'm going to use NAT tag, NAV, NAD. Then inside this NAT tag, at first, we need to create here we need to create this logo text, Wizard, Wizard Z, Summer to type. I'm going to take H one tag H one, then inside the H one tag, here I'm going to type W I, ZAR D, wizardt Z. Then I'm going to sub this file. After I set this file, I'm going to open this file in my browser. So as you can see this is how it look like. Now, let's back to the code editor again and now I'm going to create other component. I want to say other Nb element such as about us, services, use case, pricing and blog. For that, I'm going to create another deep element, Dev and inside this Dev element. But before I'm going to assign a class to this deep element, and I'm going to type class, and this is class part. Two. You can take any name. For now, I'm going to type part two and then inside this de element, I'm going to take H one. Here I'm going to take H four tag, heading for tag, and I'm going to type about us. After that, I'm going to duplicate this line and then I'm going to type. I'm going to type services. Then I'm going to duplicate this line again. This time I'm going to tag use cases, use cases. Then I'm going to duplicate this line again. This time I'm going to type pricing. App that I'm going to type log. So I dub this line and I'm type log. Then we need to create a button. So I set this file if I back to my browser and her in to create a button area, this button, request DCP. So inside this estimate page, I'm going to take a butter tag PU DTN button, and I'm going to type request request a code, and I'm going to set this file. Now, let's jump into the CSS pile and start styling. At first, I'm going to style this section area, so I'm going to select the element ACC TIN section. Then inside the Cls first, I'm going to assign height, height, I'm going to assign 100%. Then I'm going to assign with with also 100%. After that, I'm going to assign a background color for now, some type background color. You can use any color I'm going to use this disk color. And also, I'm going to say it position relative for this section, position, position relative. And I'm going to set this file. After I set this file, if I back to my browser and going jump into this page, this is how it look like. I just use this background color to show you we just use the 100% of this area. And now we need to style this Nab element. So let's back to the results studio code, and I'm going to select the Nab tag in Nab. Then inside the Clirass first, I'm going to use this propriety, display and I'm going to use slicks play flakes and align item, align IMs center. Then justify content, Justify content, space between space between. It's going to provide space between the elements. Let me show you after set this file, if I back to my browser, this is how it look like. It provides space between the logo and the nebber elements. After that, we need to put all the takes side by side. For that, again, we need to use the same property two hour Naba element. Let's back to the studio code. This time, I'm going to style this class, this deep element, part two, part two. I copy the class name. After that, I'm going to select this one in my style file. And inside the color recess, nearly I'm going to use the same properties, displayflx Lin items center and justify contain space between, and I'm going to put it here. Apres this file and do to my browser, this is how it look like. After that, also we need to provide gap between these texts, these number items. Here, I'm going to use, gap property, and I'm going to assign gap 60 pixel, 60 pixel. And I'm going to set this file. After I set this file, this is how it looked like. And also we need to add a little pading around the Nabb section. So here, I'm going to type inside the Nab padding. I'm going to use padding property. From top and bottom, I'm going to use 60, 60 pixel. And for left and right, I'm going to use 80 pixel. I'm going to set this file. After set this file, this is how it's look like. After that, I'm going to increase the font size of this text logo. For that, we need to select the H one tag which is inside the Nap tag, some type NV Nav. Inside the napteg I want to select the H one tag, then inside the calices. I'm going to use font size font size. Herm type font size 50 pixel. And I'm going to set this file. After I set this file, if I back to my browser, this is how it looked like. And then I'm going to style these Nuber items. Also, I'm going to increase their font size. So let's back to the codeor again and this time, I'm going to select Nav NAV Nav. After I select the NAB, I want to select H four, heading four, tags H four. The inside the Cli verses because we put all the Nb items inside the heading tag. So after H four tag, first, I'm going to define the font size font size, Phone size, I'm going to assign font size 30 big. I think this one is perfect, and also I'm going to assign font to it, font weight, and I want to assign font to it 500. I'm going to set this file. After step this file, if I back to my browser, this is how it look like. It's look good. After that, I'm going to style this button. So let's target this button. So let's back to the users to your code. And this time I'm going to target NAF and inside the Nav, I'm going to target the button tag button VU T O N button inside the colores at first, I'm going to assign little padding on it. So type padding from top and bottom, I'm going to assign 18 pixel padding, and from left and right, I'm going to assign 30 pixel padding. After that, I'm going to define the font size font size font size, and I'm going to assign font size 22 pixel. Then I'm going to use border radius. Border radius, and I'm going to assign border radius, ten pixel. Next, I'm going to assign font weight, font weight, and I'm going to assign font to nearly 600 little bolder font. And also to assign border. I want two pixel, solid border, solid solid and, and our border coolor is that some type 000, Hastag 000. And also I don't want any background color to this button, so I'm going to type background color. I want to make it transparent. I'm going to set this file. After I set this file and back to my browser, this is how it look like. It's look good. After that, if I back to my landing pase design, here we have a star icon, left side of the text, the logo text. So we need to find the same kind of star element. So here I'm going to open a new TAF and I'm going to search for I'm going to search for Remix icon. Remix icon. Then you need to click on this link, and from this section at first, you need to click on this Github link to access this library. So I'm going to copy the CDN link. This is the CDN link. So I'm going to copy the CDN link of this CSS library, this icon library and back to my index dot HML five. And here, I'm going to use it above the style dot CSS file. I'm going to paste this leak. I'm going to set this file. After I set this file, let's back to the browser. From this section, I'm going to search for star icon, some type STAR, star. After search for star, if I scroll down a little bit, as you can see, it provides some star icons, and I need this one shining to this option. I'm going to click this one and and from here, I'm going to copy the ML code. Also, you can use SVG, PNG, and I'm going to use but I'm going to use this estimL code already predefined class. Let's back to the studio code, and I'm going to put it inside the H 110 before the wizard set. I'm going to set this file. After set this file, if back to my browser, and this is how it look like. If I compare with the original design, let me show you as you can see, here we need to rotate the star a little bit. Let's back to the code and try to rotate this star. At first, we need to select this star which is inside the Nap tag and also inside the H one tad. Here I'm type, Nav, H one. After that, I want to slate the star which is inside the I tag. Then inside the Coleras, first property, I'm going to use rotate. Rotate, and I want to rotate it up to 45 degree DEG. Then I'm going to increase the font size of this star. I'm going to type font, yes, it's a font, so we can increase the font size font size, 55 pixel, the set this file and back to my browser. After going jump into this page, as you can see, it's not rotate this star because it's a text. It's a inline text. So we need to make this element inline block. So here I'm going to type display Inline dog. If I make it Inline blog and then this file again and back to my browser, as you can see, this time it rotate this star Elmate and it looked pretty fine. Now it's look pretty similar with this landing pace navigation bar. This is it for this tutorial. At the next tutorial, we are going to create the next section. After create these sections, we are going to animate these things one by one. So thanks for watching this video. Stay tuned for our next part. 25. Build header section: Hello, guys. Good to see you back. This is another part of this project. Today in this project, we are going to create this portion, the second part of this header section. Here we are going to create this portion. Let's jump into the Visa Studio code editor. We are in my Visa Studio code editor. At first, I'm going to close the Nap tag and then I'm going to jump into the style CSS five. Then I'm going to remove the background color of this section. So so I'm going to commend this line and set this file again. After I set this file, if I back to my browser, if I show you the page, this is what it looked like. After I remove the background, it's become white. So for the header section, we need to create a deep tag. So let's back to the visual studio code. After Nap tag, I'm going to create a div which class which class is center, Soong type dot CN TR, center. And then inside the center div element, I want to create total two D element, center part one and center part two, some type, centered. Part one. Then I duplicate this line, and next one is center, part two. Then inside the center part one, I'm going to put a heading tag. Why we need to put a heading tag? Because if I show you the design, we need to put this heading tag. This heading one. Navigating the digital landscape for success. We need to type the same text. So here, there is back to the code, and I'm going to use H one tag, and inside this H one tag, I'm going to tie navigating digital landscape. Success, and I'm going to set this file. After set this file, if I back to my browser, this is how it look like. Then we need to create this paragraph and the button. For that, let's back to the code. But before I create it, I want to design this section. I want to design the center part one and center part two. Let's back to the sky CSS file and here at first I want to target the centered the element, Sum t dot center. Then inside the class, at first, I'm going to use background color to identify the center area. Background color, and I want to assign red color, RED. After I assign the background color, I want to assign height, height, and I want to assign height 80%. Then I want to assign wet Wheat, and here on the S&W 100%. After that, I'm going to set this file and back to my browser, this is how it look like. Then we need to divide the sentative area into two parts. We need to create part four, this text and these graphics. For that, let's that to the browser, and I'm going to use display propriety flix. Display flex. Then at that section, this time, I want to target the center part one, this deep element. So I'm going to type dot center part one inside the calices. I'm going to assign height and weight to this section. So I'm going to assign height 100% and I'm going to assign with 40%. Then also, I'm going to assign a background color to identify the areas on the type background color. You can use any color, I'm going to use this Bisk color and I'm going to set this file. After I set this file, if I back to my browser, this is how it's look like. This area is for text, and this area is for the graphic. Then I want to add little padding in our container, the main center div element. For that, here, I'm going to add little padding from all of the direction, some type, padding, et pixel. I'm going to set this file. If I back to my browser, this is how it looked like. At the same way, we need to assign the area for the center part two. Let's back to the studio code and I'm going to duplicate this section and this time, I'm going to target center part two, and here I'm going to assign with 60%. I'm going to add a background color. And you can add any background color for the demonstration, so I'm going to add pink background color, otherwise, this one, whatever. After set this file, this is how it looked like. Now I'm going to remove all the background color because it's look very annoying. So I'm going to comment out both the lines. I just use the background color to show you the area. I don't need this now, so I'm going to comment out all the background color. Also the center background color. I'm going to set this file. After set this file, if I back to my browser, this is how it's look like. Then if I look at my design, this design, as you can see, after the heading one text, we have a paragraph and the button. You need to create the paragraph and the button. So to create the paragraph here, here I'm going to take a P tag for the paragraph after the H one tag, and I'm going to use total 30 words, some type em 30. I'm going to say this fine. Also, we need to create the button, so I'm going to type button tag, button element, and here you can see in this button it type book for consultants. I'm going to use this text, the same text, Hem type book for consultants. And I'm going to set this file. So after create the button, leads to the browser. Now, this is how it look like. Now we need to style this section. So inside this tiled CSS file, now I'm going to target. Now, at first, I want to target the heading one tag, H one tag, which is inside the center part one. So I'm going to copy this selector and then I'm going to paste here, and after that, I want to slick H one tag. Then inside the Caliss I'm going to assign font size. Font size, I want to assign font size 90 pixel. Then I want to assign Font, wait, font, wait, 400. I want to use little thin font. So after set this file, if I back to my browser, this is how it looked like. Then we need to style this paragraph. For that, I'm going to select the P tag. So after that, I'm going to select. Instead of using H one, I'm going to use P. This time, I'm going to use font size 20 pixel and I don't want to use font to eight, so I remove this line. Also, I want to assign little we to this paragraph with, and I'm going to use weed 80%. Then I want to add little margine from the top and also from the bottom. So I'm going to use margin, top, 30 pixel and margin bottom, 40, otherwise, 30 pixel. So going to use 40 pixel for now, and I'm going to set this file. If I set this file and back to my browser, this is how it looks like. I just try to match the layout with the original design. So after that, we need to design this button, book for consultants. Now we need to style this button, and this is how our button look like. We need to use border radius little wet. Also, we need to use black background color. Let's back to the studio code, and this time, I'm going to target the button. So from the center part one, I want to target the button, BUT ON. And inside the color versus, first, I'm going to use background color, background color, I want to use black. Then we need to use fawn colored white, opposite font color, somype color, Sou type color, and the font color is white. Then We need to use border radius. Border radius, I want to assign ten pixel. And then we need to provide a little padding, I think. Padding from top and bottom, I want to assign two pixel. I think it's enough. And from left and right, I want to assign 40 pixel. Also, we need to use font to eight. I want little bolder font type, font, weight, 600. I'm going to use 600 value and then I'm going to remove the border. I want to remove the border, let's see. Yes, there is no border, so I'm going to remove the border. Her type, border, none. After I set this file, if I back to my browser, this is how it looked like. We need to assign font size. I forgot to assign font size, so let's back to the coitor and here I'm going to type font size, and I'm going to use 25 pixel. After assign the font size, if I set this file, if I back to my browser, this is how it's look like. Now it's pretty similar with this design. Now after that, at the center part two section, we need to add this graphic. I'm going to use the same graphic but not in this video. Because I don't want to create this video to law. At the next part of this video, I'm going to add this drapi see you soon. 26. Arrange the logo and the graphic: Good to see you guys. This is the third tutorial related to our project and in this tutorial, we are going to create the second section at that position. Here we are going to place the graphic and also we are going to add company logos at that position. Let me show you. This is our original design and from this design, we are going to cut this image, this graphic and we are going to put the same graphic at that position. Also, one by one, I'm going to put all the logos in my design. Let's get to the Visual Studio code. As you can see in my Visual Studio code, we have a folder called image ING. I already crop the images that we need for to create the landing page, such as these graphics and the other logos. One by one, I cut all the logo from this landing page. Now, in our center part two section, we're going to put this graphic. Here I'm going to take image dag IMG image, and as a source, I'm going to pass the file path, which is in my image folder, Img image, and I'm going to use this image, Announce announce dot JPG and I'm going to set this file. After set this file, if I back to my browser, let me show you. Now you can see, and if I reload my browser, this is how it looked like. Now, let's back to the Style Dot CSS file. From Style Do CSS file, we need to find out the center part two section, this one. And after that, I'm going to target the image. So type dot center for two, and I'm going to target the image tag IMG image inside the class, I'm going to assign height, height, and I'm going to use 100% height of the parent container, 100%. I'm going to satisfle. After satisfle if I back to my browser, let me show you and reload my page. Now you can see the result. This is how it look like. Now we need to move this graphic to the right position. For that, let me show you here in my parent container, I'm going to use position property position, and in my parent continent, I'm going to use relative, and in my child continent, I'm going to use position absolute. Then from the right side, from the right, I'm going to assign zero value. So please set this file if I back to my browser, and reload my page, now you can see it resolves the problem. And if you add little padding from the lit side and from the right side in our center container, let me show you. So in our center container here, I'm going to use padding. From top and bottom, I'm going to use 80 and from left and right, I'm going to use 100 pixel. And from top and bottom, maybe 70 pixel is good for it. Then I'm going to set this file. After I set this file, if I back to my browser and reload my browser, now it's looking pretty good. Now let's input the images. Let's that to the result studio code and let's jump into the index sot estimate file and inside this section one, I want to create another section and I'm going to name it dot logos. Here I'm going to put all the images one after another. As you can see in my current working directory, I already extract the images and name it Logo two, logo three, logo four, lo five, logo six. Then one after another, I'm going to input all the logos using image tag, IMG and as a source, I'm going to type IMG folder, then I'm going to target logo, then I'm going to duplicate this section multiple times. This is for logo two. Then I duplicate it again. This is for Logo three and this one is for Logo four, and this is for Logo five and last one is for Logo six. I'm going to set this file. After set this file, if I reload my browser, let me show you, here you can see all the logos one after another. Now, next, we need to select the parent continuer. Let me show you we need to select this paren continal logos using its class name. In our style section, here, I'm going to select dot lose. After that, the color recess, I'm going to use this property. Display, and here I'm going to use display flex. Next, I'm going to use Align Align items center. Then justify content, justify content space between this one. Also, I'm going to add little padding to these logos. Padding for padding, from top and bottom, I'm going to use 30 pixel and for left and right, I'm going to use 120 pixel. I think it's good for it, and I'm going to sell this five. Also, you need to assign little height to these images type dot logos. Inside the logo, I want to create all the images image tag, ING. Then inside the Calibra says, I'm going to assign height, height, I'm going to assign 60 pixel height, 60 pixel, and I'm going to set this file. After I set this file, if I back to my browser and then I load my browser, this is how it look like. So to create the first section, we need to jump into this section number two, the services section. Here I'm going to perform our main animations, but I'm not going to do that in this tutorial. We are going to start it from the next tutorial, so see you soon.