Getting Started with GSAP 3

hey everybody sex-ay che from green sock here and today I'm going to show you how to get started quickly with the green sock animation platform otherwise known as G SAP the first step is to get g sap into our project if we go to green SATCOM we see several options there's a CDN link that you can click on copy and then paste in your script tag like I did here we highly recommend the CDN option because it's so widely cached in those superfast if you're using a build tool or bundler you can install GCF via NPM as seen here if you want to download a local copy of G tap just click the zip button if you're a club green sock member and logged in the zip file will also contain the bonus plugins like morph SVG for more detailed installation instructions simply click more that will take you to the installation page which gives more details about the zip structure more CDN links some build tool instructions and other information and resources related to using GCF here I have a simple HTML page that loads a local copy of G set that I downloaded notice that the logo image has a class of logo applied to it I'll be putting my animation code in the main GS file below monitor is what this page looks like in the browser in this video I'll animate mostly Dom elements but g-csf animates any property of any object whether it's SVG canvas WebGL or generic JavaScript object as you'll see you later if we want to animate our logo to another state we can use jisub's convenient dot 2 method like this g sub 200 go duration 2x 300 here the first parameter is the target object or objects that we want to animate which can be a selector text like this a variable an object or even an array when G sub C selector text such as logo it uses the browser's query selector all method to find all matching elements in this case is just our logo the second parameter is configuration object with the destination values for any properties we want to animate along with special properties like duration or delay we call this whole animation a tween because it animates between states so after we save it and we run it we can see that I look at much to the right by 300 pixels let's take a closer look and Bell over tools to see what's going on under the hood in G SAP X is just a shortcut for the translate X transform these have recognized that the target is a Dom element animated the inline CSS Styles accordingly notice that we didn't have to specify you know like pixels although we could have gzip has all sorts of conveniences like this so that you can focus on animation rather than the underlying complexities like adding prefixes working around browser bugs converting between units normalizing behavior between SVG and other elements and so on we have obsessed over all those details so that you don't have to let's animate some more properties control the background color of our imaging CSS we would write background color with a dash but since gzip is JavaScript we're going to use camel case instead and so instead of having a dash or a space you just put a capital C for our second word this is because what would be the dash and CSS is interpreted as a minus sign in JavaScript let's set it to a purple color this color is in hex format but RGB or HSL values work to do set handles almost anything you throw at it let's also animate the border radius and set it to 20% since you want to enter % we'll put it in quotes to make sure it's in string form otherwise JavaScript will interpret that as a modulo operator lastly let's add border five picks solid white now when we save this and run it you can see that jiseop will animate all of those values at the same time as mentioned earlier giuseppe recognizes some special properties in the bars object that control various aspects of the animation like duration and delay one of the most useful is ease which controls the style of motion there are many uses to choose from but let me show you a few here if we add ease back then our target will shoot past the endpoint and then back to it switching it to elastic makes it have a spring-like effect bounce does exactly what you might think that it does gzip has a handy ease visualizer for exploring the different options that are available simply click on an ease to preview the effect that it has here we have back there's also elastic bounce rough slow which is like a slow-motion beginning a beginning in the end of Queens it'll go slower steps which does a number of jumps depending on the number you set Cirque shows in a circular motion exponential sign or even a custom value where you can click and drag to make a new YZ curve using GCS custom YZ but if you're happy once you're happy with your YZ you can simply select the YZ and copy it and paste it into your project notice that these power eases are the same ease but just with different steepness levels so the higher the number the more steep it is you can also click on any of these underlying values to change how the YZ visualizer is working so you can change out the YZ visualization that you're using or you can switch out the duration or something shorter or longer you can switch out the type of YZ here using out which is the default or in or in out or you can even switch the YZ that you're using using this more visual format and you can also switch out the configuration value so if you have something like back we can click on the number and change the configuration values going back to code now notice that I've added an SVG with a group element that has a class of astronaut what if we want to animate our logo and the astronaut around their centers first we need to set the transform origin for each element to each Center using deceptive you'll notice that there's no duration for the set method like there are in tweens this is because jisub sets the property immediately when it's called and since you step users query selector all four strings like this we can select multiple elements just by using a comma between our selectors now we can tween them by saying D sub 2 and then giving it a duration of 2 and a rotation of 360 so now I may say this may run it we can see if they'll rotate about their centers as I said earlier D SEP isn't just for animating Dom elements if we have a generic JavaScript object like this one then we can tween it in the exact same way however we need to create a new tween for this since can't be referred to using the a query string like our Dom elements so I'm gonna go ahead and copy this between you from above and switch out the target for my object instead but since it's not related to the screen like the other elements how can we see it updating let's use a non update callback function to display the updated values so here we're going to say on update and create a new function and inside of that function we're going to console that log of the values so that's all about log my object dot rotation T's heparin whatever function is given to an update every time that DS app updates case F also has other useful callback functions like onstart which fires when a tween is started and oncomplete which fires when between is finished its animation completely I'm going to increase the duration of both of these twins so they can see what's happening as it's happening so now we can run this and open up our developer tools and see that gzip is smart enough to animate the irritation property of our genetic JavaScript object the CSS transform of our image element and the SVG transform of our SVG element all without us having to tell it what to animate if you tried rotating it rotating the SVG like this without G SAP you run into some browser bugs that would make this sort of thing difficult but G SAP handles that for you here we have a tween that fades out and scales down our logo by animating to these values what if we want to animate from these values to their normal ones all we have to do to animate from these values is switch out this dot to four dot from instead so now when we run it it looks like this this is perfect for effects that you want to run on page load to display the content of your page set some circles to our page that we have more to animate now when you run this you can see that they appear on the page but they don't have any animation yet we can animate all of these circles using a single tween by passing in a selector that they all share so here we can say D Sept and then circle that's a class that they all have and then giving it a duration I'm going to say 1 and opacity so that it fades in of 0 and they wipe I use that it comes upwards and so now when I run this we can see that all of our circles will animate at the same time but animating them all together like this doesn't look great would be better if their start times were offset a little thankfully we can do this very easily if you snap staggers so here you can just say stagger and then a value so I'm gonna say 0.25 now when we save and rerun it we can see that our circles will animate in with an offset of a quarter of a second starting from the previous one here we're using a simple stagger but we could also use a more complex one for more information on that check out the link below you could even animate in each circle using a function as the value for example if we want to each circle to i'mme then using our random y-value we could use a function instead of 150 here this function generates random number between negative 200 and positive 200 so near run it we can see that our circles will use a random y-value in that range if we run it again we can see that a new number for each circle is generated however since random values are so common G step has some convenient built-in functionality to generate random values can utilize it in string form like so by saying random and then passing in the parameters that we want in this case negative 200 - 200 and that will be the range that it generates around number in between so if we run it we can see that it has the exact same effect to stuff that also has many useful utility functions that you can use to calculate animation values but I don't have time in this video to cover be sure to check out the link below for more information jiseop also gives us handy functions that can manipulate the playback of our tweens here I've added a few buttons to our page I've also attached a bit listeners to each button with different control methods related to our tween now we can click on these buttons and they'll control our tween state so we can have our tween play/pause go to a certain progress value in this case the 20% mark go to a certain second like the second second here or reverse our tween or have it speed up or have a timescale really slowly and slow down I created this visualizer at the bottom to illustrate some of the timing concepts that we're going to talk about this visualizer is not a part of DS app but was made using control functions that G's app gives us these green bars represent our tweens this red line represents the virtual playhead that tracks which T means to play let's talk about sequencing by default tweens start playing immediately as the visualizer shows here with them both starting at the 0 second mark but what if we want the circles to animate in after the logo finishes animating for simple things like this we can use G steps tool a property just by saying delay and then giving you a value like 1.5 since that's the iteration of our first tween now when we run it you can see that the second tween will wait one and a half seconds before it starts but if I decide later to make the logo animation longer watch what happens so if I change this 1.5 to 2.5 then oh there's a second of overlap between our tweens to avoid this issue with our current setup we'd have to go through every tween that has a delayed figure out what its new delay should be with complex animations this can be time-consuming G saps timeline feature solves this issue thank you for GCF time on like a container where you can position animations in time or in relation to one another and then you can control the entire thing as a whole let's create our first timeline so here we can just say G's app timeline but most the time we want to save it to a variable so I'm going to save it to a variable called TL now we can add our animations to this timeline simply by swapping out TL for the G SAP object so here you can say TL dot from and in our tween and the same thing with the second one and GC app will automatically add these tweens to our timeline when we run this we can see that our tweens get added to the timeline but now there's this gap in between this is because by default animations get added on to the end of the timeline so we get perfect sequencing right out of the box so here we need to delete the delay that we added earlier oh and now you're on it we can see that our second tween gives to the end of the first tween now if we change the duration of the logo animation the second twin will automatically adjust itself so if we go from 2.5 to 1.5 we can see that the second tween automatically lines up to the end of the first tween now it's easy to add more animations in the middle of our timeline and of everything later automatically adjust for example if I wanted our logo to rotate before the circles fade in we could add a tween like this and then we could run it and see that our logo will fade in that will rotate and then the circles will fade in what if we wanted to wait in an additional second before fading in the circles we could use a delay like we did before but generally it's better to use an additional parameter that's available in timeline tweens called the position parameter it comes after the large object and tells the timeline where to put the animation you can use an absolute value like 4 or we can use a relative value like + equals 2 which would make it 2 seconds after but since we want 1 second after we're going to use a value of 1 you could also use a negative equals 0.5 or something like that to make sure that it starts before the previous tween ends but here I'm going to use a value of plus equals 1 so that we have an extra second of gap in between the rotation of our logo and a fade in of our circles one nice thing about this relative offset is that it dynamically adjusts to the previous animations like when we made the logo animation longer earlier Queens aren't the only thing that you can add to G set timelines you can even add timelines to other timelines nesting that as deeply as you want which allows you to make your animation code very modular see the learning session of green SATCOM via the link below for more advanced tutorials we can also add a label to our timeline in order to use it as a reference point for other tweens but first I'm going to remove this relative offset and then I'm going to create our label using the add label method give it a name and then you create a new tween with the position parameter pointing towards the name of that label that we've added it's not when we run it we can see that there's a new label being created and the tween is positioned at that label there are many options for the position parameter that makes sequencing a breeze see the dots for more details if you want to have a tween or time line repeat you can just specify a repeat integer and its configuration and I'll repeat that many times so here we can just say repeat and then to and so now our time line will play through once regularly the first time and then repeat two more times for a total of three times if we want to repeat infinitely we can use a value of negative one there's another property that's really useful with repeats called yo-yo so if we said yo-yo and set it to true here then our time line will play through regularly the first time but the second time the first repeat that'll go backwards through its time line as you see here then on the next iteration it will go back forwards and it will continue that process for the number of repeats going forwards and then backwards this is really useful for certain animation effects thus far we've only covered the very tip of the iceberg of what's possible with tea sap as you can see in this tea tap overview GCF comes with many other pieces that we didn't have time to mention or cover including many helpful plugins extra tools and utility methods Club green sock has even more incredibly handy tools and you sign up for club green sock you get access to Members Only plugins like dries fiji physics 2d and physics prop plugin which make animations more realistic by adding physics to them scramble text plugin custom bouncing custom wiggle which are variations of custom ease north SVG plugin which can morph between any two SVG shapes no matter the number of points inertia plugin which lets you throw things and rotate things easily split text which makes it easy to animate lines words and characters of text motion path helper which makes it easy to change animation paths right in the browser without having to go back and forth between a graphical editor and your browser NGS dev tools which makes it easy to playback your animations and focus on the parts that you really want to focus on if you ever have a question about how to use g sap can't figure out an issue that you're facing or just want to be a part of a greater community come check out the green sock forums they're incredibly helpful and friendly place for bursting about an issue we do ask that you create a minimal demo using a code pin to show the air that's a lot for this getting start video if you're craving for more check out the learning section of green socks website link below for more useful articles and videos happy tweening

Channel: GreenSockLearning

Views: 25,864

Keywords: gsap, tween, GreenSock, getting started, how to, beginner, javascript, animation, library, timeline, web

Id: M4GCT-2kaoo

Length: 17min 1sec (1021 seconds)

Published: Mon Nov 11 2019