Intro to HTML5 Animation with GreenSock (GSAP) Tutorial (Live Streamed)

hello and welcome everybody my name is Dan Rodney and I'm here for noble desktop we're going to be presenting a live stream today for html5 animation with green sock and for those of you who are attending live we have the great benefit of having Jack Doyle the original creator and founder of green sock he's the genius behind to this great JavaScript animation platform and we also in the chat have carl shoof who also works at green sock and he's an amazing coder and he he's a great trainer and hangs out in the forums a lot if you ever have questions and you're on the green sock website you'll probably see tutorials by him and him answering questions in the forum and so we have the two great guys from green sock with us live in the chat today so if you're here live definitely take advantage of that if you have any questions feel free to type them in the chat and ask them I'm going to be going over green sock from a beginner standpoint this is meant to be introductory beginner friendly so if you're not a JavaScript expert that is fine even if you've actually never touched JavaScript hopefully you'll still be able to get get through today and I want to basically show you how to get started with green sock and and and get started using it because it's a really awesome tool so I'm gonna be switching over to doing a screen share in in just a moment but just wanted to give a quick little background in case you're not familiar with noble desktop noble desktops been around for 27 years we're based in New York City and we teach a lot of people in person classes in New York City but we also allow people to livestream into those classes as well so if you're ever thinking about taking one of our classes just know that you don't have to come to New York City you can also do them as a live stream as well so keep that in mind if you ever want to take any of our classes it's not just for those living in New York City but of course if you're in New York City we like to see you in person so you can come down to our training center and we'll see you in class so this is the kind of stuff that we've been teaching code design related technologies and we teach a lot of people how to create sites HTML CSS and JavaScript so green sock goes perfectly with the kind of stuff that we teach so let me do a screen share into my computer and I've got a presentation here and this is a web based presentation for those of you who are watching this video you can get this URL in the video description down below the video for those attending live I just pasted it also into the live stream chat so you can get that but just if you're watching the recording of this this link is down in the bottom description below the video and we're gonna keep this up and we're not going to change it so it'll stay up there so you don't to worry about it going down there's some demo files that I've already downloaded to my computer but if you want to follow along within the files that I'm demonstrating you can do that you don't actually have to follow along with those you can just download them later for your reference if you want to play with them afterwards and when you're in this presentation you can just use your arrow keys to go left and right to switch between the presentation and if you're on a touchscreen you could swipe between these slides as well and I just have to refresh this page just so you can see the the cool animation that the guys over green sock created I believe jacket created this the cape flying in the background waving and just had to show you that after a little while it stops but it's a really cool animation that they did so what are we gonna do today we're going to give you an overview of green sock tell you what it's all about show you some examples of animations you can create with green sock things you should know about add banners and gives you some examples of ad banner animations I'm going to do some coding and show you how to get started using green sock and coding it talked about some cool plugins that you can add on that make green sock even better and finally we'll do kind of a wrap-up and synopsis of what we did so that's the the kind of the goal for today and like I said it's going to be very beginner friendly I want to show you the range of capabilities of things you can do with green sock and also give you some basic coding starting concepts so that you can you can go ahead and start using green sock as soon as possible you can always learn more from from today going forward so what exactly is green sock green sock and it's green sock is you know the like the company if you will think of it that way and the green sock animation platform or G SAP for short is a JavaScript library that's focused on animation that's as pure goal is to let you animate on the web so it actually got its start back in flash when people were coding animations in flash and in flash you could do timeline animation but if you really wanted to take power and control of your animation in flash you could do ActionScript and so green sock was an ActionScript library and people were using it back in the days of flash so they of course rewrote the whole thing and did it in JavaScript so that we can use it natively in web browsers now that flash is is dead so green sock is going to enable you to create ultra high performance professional-grade html5 animation for the monitor web basically that means that you're gonna create high quality beautifully playing back animations so they play at high frame rates it's not going to be choppy and it's it's you can do it easily and get a great result the first thing to understand is that gzip is not an app it's not something like flash was where you launch an app and there's a user interface it is JavaScript so you're gonna use HTML and CSS to code up a web page and you're gonna use G SAP and potentially some Java Script to code up the animation since green sock is a JavaScript library you can mix any regular plain vanilla JavaScript with G SAP and and do whatever you want natively in the browser but it is coding it and there's actually a lot of benefits to coding an animation because with just a couple lines of code you can do tremendous amounts of animation and if even if you had an interface sometimes it's easier to code animation than to use the interface like if you want to change fifty fifty characters manually animating fifty individual characters would be very tedious but through a single line of code that just says loop over all those 50 characters you might be able to animate all 50 characters very quickly so so we'll see how this works today but we're gonna be coding some animations things you might not know about gee sap that are good to know it's been around since 2006 as I said it got a start in flash and so people have been using green sock for a long time if you've only recently heard a G SAP or green sock it's it's it's been around for a long time and it's been heavily used by many many animators out there so it's not just a new guy on the block that's a new fad that's gonna come on and blow up and die away they've been around for the long haul and they should hopefully be around for the long haul because it's a great platform that's well established with a lot of people using it in fact over three million websites and major companies have used it Apple just used it on their home pod web page and so you know it's used by little guys too big guys anybody can use it and by talking about the top brands using it we're just saying that you know the people that know they'll use it and it doesn't matter whether you're a little guy or a big guy anybody can use G's app and it works great the majority of award-winning websites use G SAP so this was kind of an interesting report that I hate tomatoes created where they took a look at 31 of the top sites from the a WWE Awards and so they looked at these and they kind of analyzed like what do these websites have in common so all of them used CSS animations in some way 94% of those web sites use JavaScript animations more than CSS animations so the main predominant type of animation was JavaScript and 68% of these award-winning websites that heavily use JavaScript animations use green sock as their animation platform so basically a lot of people are using green sock and people that are winning awards are using green sock so you're in good company if you're using green sock and it's universally accepted on every major ad network that's good because if you're going to animate your ad and submit it to a network you want it to be supported not just any JavaScript animation library is supported what are people saying about it if you know CSS tricks which is one of the most popular - web tutorial websites out there very popular site that most of you should have heard about if you've ever done any sort of coding Chris Koya runs a great website with CSS tricks it's been around for a long time and tons of useful information here and this was a talk about comparing animation technologies and they had a little thing about green sock and in their words green sock is far and away my favorite library to work with please understand this bias comes from working playing around with and bumping my head badly on lot on a lot of different animation tooling so I when I give my strong endorsement it's through blood sweat and tears so this was written by Sarah Dresner of CSS tricks and so this is not g sap people talking about this this was not a paid placement this is somebody who does this and through her experience is saying green sock is is great and and just my own anecdotal experience I remember when Carl first came to us and showed us green sock because Carl has taught with a noble desktop for for many years and he used to teach flash with us in the beginning that's how we got introduced to Carl and it was great flash teacher and a wonderful guide to and he he said after he left noble desktop and started doing some other stuff including working with green sock he came back and said hey I got this cool thing to show you guys and at the time we hadn't heard of green sock so he came in he showed us green sock and I remember just being blown away by the demo and he wanted to work with us to create a class and a workbook and I just thought this this looks amazing like the first demo just it had me right away I'm like this is the way to go so that's how I was first introduced to it and hopefully it'll be as impressive to you today so why use G SAP this is a little animation that the great guys over at green sock created so let me just hit rerun here and you can watch this little animation this was built with G SAP but also saying why to use it performance frame rates the quality of the emission is great it works well across different browsers the control that you have and independent controls where you could do lots of different things at separate times and the control over what you're doing and when you're doing it is far superior in G SAP than other things like CSS animations a sense of timeline control that you can pause play or rewind animations and that you can programmatically do this is is amazing and Guice app lets you do that the probably shouldn't even be saying the new standard for html5 animation it's kind of become the standard for html5 animation not really so new anymore let's take a look at some different examples of websites so the Hunger Games popular movie of course they built their website in part using GCM I'm not sure exactly what all parts they did using gzip and what they might have used other technologies for if what was kind of vanilla JavaScript versus what was GCM but they have some couple couple interesting things here that I want to show you the main thing over here I just want to show was this cool little menu sliding in let's do that a couple times here and just watch how all those things kind of slide in and when you mouse out it goes away so the way that those animate in you can do that in G SAP so easily I'm gonna actually show you how to animate a bunch of things with single line of code and so basically you can write a single line of code that's going to animate all those in one after another it's a really cool feature that G SAP has it lets you animate those all in and then did you cool rollover effects and all sorts of interesting things on this website this was from as you can see down here in the copyright 2013 so this was from awhile ago but it's still still cool thing it's not live on the web anymore this is like an archived version of this one so as we mouse around here they've got this cool bouncy effect it's neat I can just drag around to see different ones and whenever I want to see one I could just click on it and this thing opens up and kind of fruit ninja style just gonna swipe across it to have that play ninja style swipe site so just neat little animations all across the place here and for me that the frame rates of this that I can pan back and forth so quickly and the the frame rates are so smooth everything is just slick and smooth and fast and responsive it's a great great example if you know the movie now you can see me now they have a movie now you can see me too well they've had it for a while it's it's been out so they did their their movie site and if you know anything about movie sites I mean they've it's a big movie so they can spend a lot of money and time on development and this is just a crazy crazy website so first of all if I just Mouse around this is cool kind of perspective and then as I scroll here just using my two finger drag on my touchpad here on my laptop the closer you are the less you see so this is kind of a really cool mirror effect and I can scroll backwards or or scroll forwards it's almost a little dizzying if you go too fast and so they scroll through each person introducing them a little thing over here on the right if you want to learn more about them then the rain starts pouring down and then it reverses and goes back up and then it all goes into a teardrop and then when you're in here you can actually move your mouse around and change the perspective as you're scrolling just kind of crazy and then when you're all done it goes back to the beginning and basically kind of loop through this alright the next Rembrandt's watch the animation of these characters as they come in that was just a slick little text animation I love that and as I scroll down again things animate in kind of one after another so there's a sequence there's a timing there's a thing that happens and then another thing that happens another thing that happens and that's something that when you have a lot of time two things like that in CSS animation CSS animations are kind of fine for short little things but the more things you have involved the harder it is to manage all of that with CSS animations so then we can keep scrolling and they go to different areas kind of talk about different things and there's some interesting little parts of this interface that for example this little eye with the circle when I mouse over that circle becomes a square and so using SVG scalable vector graphics you can more from one shape to another one and that's something that Chiefs app lets you do is actually morph from one shape to another using g7 over here you can learn more this is a video that happens to be playing over here so cool little site there beause I'm sure you've heard of Bose headphones and speakers and so you can mouse over these different areas and then watch all the subtle little animations of things animating in as we switch so they call the different lines come in and out and all these subtle little animations just make a fluid smooth experience that's just nicer then it just boom just pop it in and appearing it's it's more subtle higher end just cooler looking there's a web designers portfolio that's cool kind of particle effect here going on in the background but watch as I click view portfolio here you're drew some more cool SVG animations going on here let's open up this menu over here on the top left though and there's a couple things going on like the lines they rotate but also these four items and I know there's only four items but they they each come in slightly delayed one after the other I know it's kind of quick but there's a big difference between something just appearing and something kind of building in and you don't want to waste people's time you want it to be quick and efficient but having things kind of build in and having a transition just makes for a really interesting effect rather than something just just popping in and appearing one more example here of Firefox loading animation I just love the kind of simple tour kind of storytelling that that does let me hit refresh and just show that one more time here really cool subtle little thing it's not the Firefox web site this is nerd moonship is he made this cool example of taking the Firefox web site and saying hey what if we wanted to animate this now the interesting thing is he actually goes through and explains here that this probably wouldn't be an actual good thing to launch on the Firefox web site because as far as utility goes if you want to download Firefox you really just want to get to the website and click the download button and in this particular case it actually has to build in you have to wait it doesn't show the button right away and so you you have to think about when you want to use animations and you can tell a story in a very interesting way when it makes sense but do keep in mind that if people want just kind of a utility type of thing that maybe that's not the time to use animation in that particular instance so you have to think about when to use it and of course today we're going to be talking about how to use it but with power comes great responsibility so when should you animate things that there's a whole art to that and you can look at more examples here there's a link to nerve bend ships code pins and you can check those out more and green sock has a whole showcase of different websites for example apples home pod site that they just launched that also uses green sock so a bunch of more examples if you want to see some stuff but that kind of gives you an idea of the range of capabilities that GPS app can do a lot of stuff now that was all website stuff what about doing ads basically flash is dead Adobe is not making it for mobile devices and even on the desktop Mac's do not ship with flash pre-installed you'd have to actually go and download flash if you want it so there's a lot of people nowadays that are not having flash installed on their computers and it's Adobe's not going to continue developing the Flash plugin and adding a bunch of new features probably because for the most part since it doesn't work on mobile it's kind of a dead format now plugins of any type and it's not just flash but just basically plugins in general have died off and things that are native to the web is is what one out and Google stopped accepting flash ads back on June 30th if you want to read an article you can click on that for the article but you cannot submit flash ads to Google so you have to switch to something else and you could do something like an animated gif if you want something very very simple but if you want anything that has a lot of animation and high frame rates and high quality appearance that's not limited to 256 colors you can't really use animated gifs for higher and super high quality animation animated gifs are just meant for very simple little animations and they're fine if you just want to create something simple and quick and you know if it's easy you know then then animated gif might be fine but if you want to create anything that's nicer quality high frame rates lots of things animating you want millions of colors you know you want high-res graphics you can create something that can download fast and perform well using green sock so the good news is that green sock is an industry standard within the ad networks and here's a bunch of different ad networks and they actually exclude G SAP from the file size calculation of your ad so when you're submitting an ad of course you have a certain file size limit because your advertisers don't want you to put a 1 megabyte advertisement necessarily or a 5 megabyte advertisement on their website slowing their website down too much so they put file size limits and G's app does not count against that file size limitation so and they actually have G SAP hosted on a content delivery network so they allow G SAP they exclude it from their file size calculation and they actually host it and if you want to read more about that green socks website has a great article about that and that's where I actually grabbed that little chart there is down here where they talked about it and so I can read all about it and if you're loading G SAP from an ad network they'll typically have a link where you can grab it from their CDN instead of grabbing it directly from green sock so let's take a look at a couple ads don't worry about their weight of the page just focus on the ad here the idea is that this ad would be placed into some part of a website so all sorts of things going on in that ad and here's two different ads for the same kind of topic the World of Tanks couldn't do something like you could not do something like this with any animated gif you know it's too many colors the frame rates too high animated gifs just couldn't handle that not to mention that you can do interactive things you're you're using javascript here so you can use green sock with any JavaScript that you want to just plain vanilla JavaScript that works in a browser so here's an interactive thing where I'm actually using my mouse just refresh here I'm using my mouse here and I could just click to shoot and it's an interactive thing I can actually go in there and I can shoot and do things and you could do any kind of interactivity here there's a button when I mouse over it it changes you can use any JavaScript that you want here's a video of some more examples I'm going to go fullscreen in this they do switch right after one's done they switch right to the next example but here's one that Google had there's an ad for Jeep and so if you're just looking for the kinds of things that you can do with G SAP I imagine even though these are ads you could do any of this stuff for websites for ads it doesn't really matter you're just doing it at different sizes here's one for verizon fios daddy hears that there's just so much variety of things you can do you can do things from simple to complex things can have text they can have photos they can have vector graphics with SVG scalable vector graphics anything that you can do in a webpage you can animate with green sock there's another McDonald's thing in Google's rich media gallery they give some examples as well of course Google's huge advertising company so you could submit your ads to Google so they're just showing some examples there we go all right so now we're gonna get to a little bit more than itty Gritty of how do you go about starting to use green sock or G's app the green sock animation platform the first thing to understand is that it's modular in that you can load only what you need and that's specifically designed that way so that you can keep your file size small and that can be important for ad networks where you don't want to load code that you're not using so there's kind of two main components if you want to think of them as the two primary components and then there's other things you can add to those but there's tweening and time lining essentially so when you're tweening between comes from in between so when you're animating something you create basically kind of if you think about it mentally maybe like a key frame at the first part a key frame at the end and you want your animation tool to create the in-between parts so you give it a start you give it an end and you want the animation to figure out what comes in between so tweening is from in-between so the timeline part comes from if you think about a timeline and this could be a literal virtually like kind of a actual timeline in an app if you think about like After Effects or how flash was that there's a timeline but you don't need a visual timeline to have the sense of a timeline a timeline is timing control when you have a timeline whether it's a virtual one that you don't see or whether it's in an app one that you actually see a timeline gives you a sense of when things happen so the timing of it this happens and then this happens and then this happens so it's a sequence it's like a storyboard you want this and then this and then this and then that to happen in this order maybe you want some things to overlap maybe you want some delay between things and so the timing of that all comes from timeline so we're tweeting things and we're using a sense of a timeline so there's light versions of both of those and there's max versions of both of those the light versions load less functionality and the max versions load more functionality so if you just need the basic functionality you can load the light ones and it's going to be a smaller file size if you need more functionality you can load the max ones which will be a bit of a bigger file size and for the detail differences between these you can click on this and the green sock documentation is amazing they have so many examples and so much information on their website it's such a great resource so you could you should definitely be checking it out I have a lot of links to varieties of resources within the green sock website in this presentation but basically this goes through the different things that are here in between lights so you can see what you can do with it and then if you look at tween max just to compare it's everything that is in tween light but additional things so there's extra features here that you can see that are in there and some more and so if you need any of those features then you bump up the tween max if you don't need tween Max's features then you can use between Lite same thing with time on light and timeline max you can click on those to see more information so timeline max includes everything of timeline light plus additional things depending on what you need you load just those files there's also extra plugins and we'll talk more about plugins at the end you can load plugins based on your needs if you don't need to plug-in you don't load that code again to try to keep the file size as small as possible so that your webpage can load as fast as possible another really important thing in animation is doing easing and so green sock has very powerful easing and when you're animating something for example let's say we do a bounce ease as you're moving something if it were just going to go in a linear fashion from start to finish it would just move even-steven just moving along in a linear speed it doesn't go faster or slower it just moves at one rate of speed the power one versus the power two versus the power 3 is just ramping up the amount of easing that's being done the concept of easing comes from hey let's go at a certain part so where do you want to go easy in or out so in is the start of your animation and out is the end of your animation so if you want to ease into the animation it's gonna go slowly as it gets started and then ramp up the speed towards yet so it goes slowly and then speeds up so a power one has just a little bit of slowness at the beginning so there's not as dramatic a change in your speed power for it's more powerful so it's a more powerful effect but you can do things like back where it's gonna go and it's gonna actually pull back before it goes into the animation or if you're doing that on the out you'll actually overshoot the target and then come back so that's the idea of the back cuz it goes a little too far and then comes back or in the beginning it starts comes back a little bit and then shoots through and that kind of anticipation is very natural for a lot of things in a real life like if you're going to end on something for it to overshoot a little bit and then come back like oh wait I couldn't quite slow down fast enough let me go back to where I'm supposed to be in create some cool effects could you bouncing Boing so you could just do one animation that creates that bounce by just doing a bounce ease and it's interesting in CSS you can't actually do a balance ease CSS easing is more limited than something like green socks using so you can do basically just simple eases with CSS animation and a very powerful thing is you can actually do custom easing so you can actually go in there and specifically control exactly so if you want to start out with something like for example a power three and then customize it you can get exactly the easing that you want and so so powerful to be able to do that and that they have the editor and everything for you super super powerful so those things can all be done and basically you start out with something simple and use that if you need it and if you need more powerful things you load those so with that said let me get started showing you how to do some code these are the files that were in the beginning of the presentation and I've already downloaded them here I've already put into here a link to the G SAP library but I do need to show you how to get that so first thing you're going to want to do is head over to green sock and you need to load in their JavaScript library so click download and you have a variety of ways that you can get this you can actually download a zip of the actual files should you want them and I've already actually done that here on my desktop I have the green sock jas folder that I just downloaded today there's some documentation some getting started and then your source files if you actually want to read through the code you can read through the uncompressed versions but on a website that you're going to actually deploy you can use the minified versions which are smaller faster to download and so in here are the different files that you might be linking to depending on your needs so you've got your timeline light your timeline max between light and your tween max so if you want to put these into your website and link to your local asset and then upload it to your web server you can do that or the other thing you can also do is to use the content delivery network link that they give you and there's some advantages to using a content delivery network to deliver this file because if you use that and all the other people on the web are using it users might already have green sock cached in their browser so if somebody goes to two different web sites and both of those websites use this same link from this same web site this CloudFlare content delivery network then it doesn't have to redownload it on the second web site it only has to download on the first so performance is great when you have a content delivery network it helps to deliver content to a lot of people so they're kind of built for delivery and and it can help with caching so you can also just grab this link which that's how I did it in our examples I just grabbed the link there so we're pulling it right from green from the green sock content delivery network now you can choose down here what you want to include right now you can see this is giving me tween max with the robust setting if I click light weights it's giving me between light and a couple other things which we'll talk about in just a moment I'm gonna click customize so you can see here for example if I check on tween lights like let's say let's say I start with robust um actually that doesn't change anything here when I come to customize I'll just go to customize here if you're doing tween light that's much smaller if you check on between max notice all the other things that are grayed out that implies that they're part of tween max so tween Max's including all those other things like the CSS plug-in that's an important plug-in because we often use green sock to animate some CSS attribute the width or height or the position of something things that we normally style with CSS green sock is animating those CSS properties using JavaScript and so there's a CSS plug-in that allows you to do that between max includes all that sort of stuff if you're just getting something like tween lights and you want the CSS plug-in you got to check that on and that was actually part of the lightweight option that was here it gives you a tween light also gives you the easing and it gives you the CSS plug-in as well so if you want to see just exactly what you're going to get you can decide what you want to get there and it'll give you the appropriate links like so all right so that's how you get it and now we can actually go about coding this alright I'm gonna open this up in my code editor it doesn't matter what code editor you work with you can work with any code editor I happen to be using sublime text but you can use atom or Dreamweaver or notepad plus plus or whatever code editor that you want but this is just an HTML file I'm gonna assume that you understand that an HTML file and and CSS is how you create a web page and I'm not going to go into that side of things I'm gonna be focusing on green sock today let's open up this page in my browser I'm gonna open this up in Chrome so here's the web page that I created just a very simple web page with just a few elements specifically this html5 logo and go back to my code here so right here's that image if I delete the image save it come back and hit refresh notice the image disappears so that's the image the h1 is a heading 1 for the fun with animation if I delete that save my file and come back notice that the fun with animation text is gone let me bring that back so that's that text and notice the star in the background that is this div right here it's going to delete that and there was the star is the spirit so those are the three different elements that I have there in this webpage the logo the star and the text and it's just normal HTML elements that you would have in a web page and you can style them to put them together however you want in this case I have it as kind of a scalable flexible page like so alright so how do we get started well the first thing is putting in that link to the content delivery network so that I just grabbed from the green stock website and pasted it into my code here notice where I'm putting this so if we have the body of the web page right and then here's the end of the body I'm putting this all this JavaScript at the end of the page so that I know that everything in the Paige is already loaded and that way everything's ready all my objects are there so that when I start to animate them I know that they're loaded and I won't get any javascript errors saying that that object does not exist yet so do this right before the end of your body tag and if you didn't want to put the link to the content delivery network if you want to link to your local file then you would just be changing this source to the local file instead so this loads in the ability to use green song then you're gonna write your javascript in a script tag and I'm just going to keep it in this document if you want to put it into a separate javascript file and link to it that is perfectly fine and very common but I'm just animating things in this page so we're gonna keep it simple and just put it in this page I've written a lot of the code just so I don't have to type everything out from scratch and what I've done is I've commented out if you're not familiar with JavaScript if you want to comment something so the code does not execute in the browser in JavaScript you put slash slash so if I delete the slash slash that uncomment the code and now that code Y should execute in the web browser depending on the app that you're using you might be able to use a keystroke to do that for example in sublime text I can use toggle comment to toggle comments on and off and since I have a lot of comments here in my code I'm going to be using that keystroke on the Mac its command slash and our windows I believe it's control slash okay so I'm gonna do the command slash to uncomment this out actually let's start right here I'm gonna make this bigger just to make sure everybody can see this well so just to make it easy I've loaded tween Mac's which is gonna basically load all the functionality that we're going to need and later on we'll see if you don't need as much functionality how you can load in something less so you get a smaller file size but for right now I wasn't concerned about file size I just wanted to demonstrate things so I loaded in tween Mac's since I have between Macs and maybe I'm not sure in the beginning what features I might be using you can always start with tween Macs and later if you decide you don't need the full tween max you can always go down to something like between light the basic syntax of green sock is to say hey tween max this calls in the ability to do certain things to animate something to a certain appearance so when you're animating something the first thing you have to tell it is what you want to animate the target element so what do you want animate secondly how long do you want that animation to take do you want it to take a half second a tenth of a second 10 seconds so what do you want to animate how long do you want it to animate and then what do you want to actually animate all the different variables that you might want to change over time and in this case it's going to animate to whatever variables you set okay so let me comment that out and do our first line of G's app code so we're gonna say tween max animate to an opacity of zero so you put all these bears the variables in the curly brackets and in the parentheses you're putting all three of these different things so the first thing is your target the second thing is your time that you're going to take to animate it and the third thing is what you're gonna animate what are you going to change over that one second of time so in here in quotes we're putting in the selector now this is if you're familiar with CSS this should look just like CSS you're putting in a CSS selector like logo now if you're using a hash tag that would sorry hash tag that would be an ID of logo if you're using a period that would be a class of logo in this case I have an image with a class of logo and so that's why we're putting period logo same as we would in CSS much like you do in jQuery now this is not required jQuery I'm not loading jQuery and so it works fine with jQuery but it does not require jQuery to operate so I'm gonna say animate the logo to an opacity of zero over one second I'm gonna save that come back to my browser and hit refresh let's hit refresh again so starting with its initial look it takes one second to animate to an opacity of zero pretty cool now you probably don't things to fade away you probably want things to fade in so instead of going to an opacity you probably want to come from an opacity so that's another thing that you can do using tween Mac's instead of going to something you can come from something we're still gonna take that logo we're gonna tell it to take one second and it's coming from an opacity of zero so the only difference between these two lines of code is the front that's it we're gonna save and hit refresh again so in this case it starts off invisible and then it takes a second to fade in so you can have multiple things fade in if you want we'll get to that in just a moment but let's move on to the next thing and I'm just hitting the keystroke here to toggle the comments I don't even have to highlight the whole line in this case I could just click into it and I was hitting the keystroke and it either comments it or uncomment it and again whatever is commented out that code does not execute only the lines that are uncommented are going to be executed so in here it's just exactly like the this line of code right here except instead of doing opacity we're doing scale now scale goes from zero to one right now I'm doing a scale of point five so this is just like CSS when you're doing scaling zero to one is zero to 100% so if you do point five that's like saying scale 50% you can say zero point five if you prefer you don't need the zero so you can just say point five I'll save that come back and hit refresh so now it's scaling from a scale of 0.5 I can make that's coming from zero save that and hit refresh now it's scaling from nothing I just wanted to come up just a little bit I could say 0.9 and just scaling just a little teeny bit in that case keep in mind that when you're doing from the this is giving it basically a starting point it's gonna start from this appearance and then what is it going to end up with it's however the page would normally look so let me just comment this out for a moment you want to build your page to be how you want it to end up looking when you're doing a from animation and so you build it the way you want it to end and then you're telling it hey let's start from this other appearance and it will start looking that way and end the way you built your web page I'm going to comment that out and move on to doing multiple elements so we want to animate all three elements let's take an animate from a scale of 0 for the logo will take 1 second to do that let's refresh the page so we're scaling up the logo from a scale of 0 now let's do a second element okay we're gonna tell the background notice that's dot background which means that I have an element with a class of backgrounds take one second to animate and then in this case notice I have more than one variable we can change the opacity and the scale and we can tell it to wait for just a moment now if we don't have a delay let me just cut that out for just a second save and reload this notice that the background which is that star is animating at the same exact time as the logo so they're both scaling in exactly the same time well one of the variables you can add and you're just putting commas between the different variables and it doesn't matter the order that you're putting these in either if you want to put scale and then opacity that's fine doesn't matter we can say hey let's delay this animation just this particular one just background let's delay that by one second and since the first one takes one second and then the delay of this one is one second it will complete background after the logo has finished so the logo animates and then the background animates let's uncomment this one then we'll take the heading we're gonna animate from an opacity of zero from a scale to now all so a scale to that would be 200% so now we're gonna start big and we're gonna end the current size it's like the final size so instead of scaling up we're gonna scale down and then we're gonna delay to seconds now this is from the beginning of the animation so if this takes one second and that takes a second that's two seconds so by delaying this one two seconds it will happen after both other things have completed logo background and then heading let's do that again logo background and then heading so you can see that the heading scales down from a scale of 2 which would be 200% down to the current size which would be like a 1 a 100% so in this case if I want there to be maybe some overlap between things maybe I want the background and the heading to come in at the same time I could just have the same delay they'll both be offset one second from the start of the animation so they'll happen at the same time save that and hit reload the background and the heading animate at the same time and they finish at the same time if you're just having a few things this might be fine but as you start to coordinate a lot of different things and change timing trying to figure out when things should happen it can be rather challenging when you have a lot of things so while you can do this there's a great concept in green sock called a timeline where you can use the timeline to create a sequence of things this really isn't an official sequence it's not that one thing happens after another per say like I never said specifically hey do this right after this I just happened to put a delay that makes it happen right after it but they're they're not relative to each other their relative to the start of the animation I can just happen to coordinate it that just happens to start or the previous one but for example if I reorder this code if I cut this and paste it and I put a delay of two seconds all of them are still based on the original time when the animation starts so they're still going to do the logo then the backgrounds and then the heading it doesn't matter that the heading was done second in the code because the delay of 2 seconds is from the start of the animation ok so the other approach that you can take instead of just throwing these all into tween max let's comment all these lines of code out here is instead you can use a timeline now to use a timeline we're gonna use timeline and you can use timeline Max or timeline light depending on your needs we're just going to start with timeline max just so that we have all features available should we need them and we have to create some sort of variable you can name it whatever you want you go up my timeline or sometimes people just say TL for short but this name is a name that you can come up with you can create different timelines and name them differently just a variable that you're giving a name and we're creating a new timeline object in our timeline variable so this creates a timeline that we can add things into by itself it doesn't do anything visually you don't see it you know you come back and refresh the browser you know the timeline isn't a visual thing that you see it's just in code I now have a place that I can put things in in a sequential order so now instead of targeting tween max I'm now gonna be putting things into the timeline whereas before I put it into tween max that's the only difference between something like this line of code and this line of code is instead of putting it between max I'm putting it into the timeline the timeline that I created as a new timeline but otherwise this syntax is all exactly the same they were gonna say hey tell the logo to do in this case we sped it up a half second so 0.5 would be half second scale from zero so we're scaling that up in a half-second now the next line of code that I'm doing is again putting into the time line so I keep putting it to time line instead of tween max let's put the heading let's take a half second to animate that in from a big scale so it shrinks down as it comes in in this case notice I did not have to put a delay but yet it doesn't the logo and then the heading that is because I have a time line whatever you put into the time line first happens first and then whatever you put in second happens second so in this case the order does matter logo and then heading logo and then heading if I rearrange these if I move this up now it's heading and then logo heading and then logo so just by reordering the code you can reorder the sequence of your animation so that's pretty powerful let me just hit a keystroke here to swap those lines of code back and let's add a third thing so because I'm doing this in order in a time line you got the first thing then the second and then the third notice there's no delays on any of this simply by putting them into a time line it'll do the first one when that's done it'll do the second and when that's done it will do the third 1 2 3 so 1 2 3 logo heading background logo heading background it does it in that order because that's the order we did it in the timeline so that is amazingly powerful and we're gonna see some more features that that can do in just a moment but we're about halfway through our session today so we'd like to take a 5 minute stretch break restroom break if you need it I'm gonna put up a timer here so we don't lose track of time so go grab a drink use the restroom whatever you need in 5 minutes we'll continue all right so just based on a question in the chat and if you're watching the video back it you might have wondered why I was getting this URL here there was just a question in the chat can you have things overlap when you're doing a time line so I just introduced the time line but there is a position parameter where you can specify when something happens in relationship to other things so this link right here green sock comm slash position parameter talks all about the another parameter that you can add into here where you control when something happens you can have things play at the same time so if you want two things to play at the same time you can do that if you want them to play relative to the beginning of the timeline you can do that if you want them to have extra time between them or to overlap somehow between them all of those things are very highly controllable and you can do all that and we're just going to scratch the surface of what's possible with green sock today but you can have total control over that but the basic idea of a timeline is unless you do something with the position parameter is that they happen one after the other the position parameter lets you change that behavior all right so now I'm gonna go in and comment that out and switch over here to this example where I've added in some easing so let me go back to the easing visualizer that I went to earlier talk about how to use the easing visualizer so if you want something to do a specific ease that's already pre-made you know you can go here to say you want something to bounce right you do want to choose whether you want something to start bouncing as you go into the animation or at the end of the animation or both you can have it balance at the beginning and bounce at the end let's say I want to balance at the end of the animation so I'm gonna do an ease out so it'll end by bouncing here we go this gives you a little bit of code in this case they're just giving you an example that they're just moving it vertically because why you've got x and y y change would be moving it vertically an X chain should be moving it horizontally so this is right here you could just copy that in and paste it here as another variable so that's exactly the same code I literally just copy that and paste it into here so in this case we're gonna take the logo and let me just comment these things out so we create a timeline we tell the logo to take one second coming from a scale of zero and we're gonna be easing with a bounce on the out so let's see that boom boom boom it's kind of like it's coming and hitting my screen with a bounce pretty cool now if I wanted to do an ease in all that does is switched the out to an end so I could copy and paste that here if I want to or I can just come back here and say ease in come back and refresh the page now it does a balance at the beginning the effect that was going for I like the ease out better also another little thing that you might not notice right away about the ease visualizer here is if you click on the name they have a list of different eases that you can do and actually wanted to mention this to Jack and and Carl because there used to be easing graphs here and probably some update or something you did to the website recently broke those little easing graphs so hopefully by the time you guys watch this video back if you're watching this as a recording this will be fixed but they used to have really nice visual graphs so you can see basically what you're seeing here like you can see the power three you can see the bounce and you could get that if you click on the name down here that you kind of visually see them all and so I think just probably a website update or something accidentally broke that and yep Jack Doyle just said he'll fix it so great so that's a neat little trick because if you're thinking like hey how did how did expo look like you don't have to click through each and every one of these if you click on the name down here you just click on it and then you get an overview of visuals and it's really nice to be able to see those visuals if you're a visual person like myself okay so let's go down so I'm not gonna bother adding and easing to the background but the heading will do a back ease now let's take a look at the back ease for a moment so if you're doing back ease and I'm gonna do this on the out so at the end of the animation it goes a little too far now how far does it go so this is actually something you can configure down here you click on the name of the number and you can switch the number now that's nice here in the visualizer so you can see that a higher number goes further so it kind of overshoots and has to come even further back if you go with a smaller number then it doesn't overshoot it quite as much now I know that they have this little menu right here with just a couple presets you can customize this in code to be whatever you want they just put in a couple things for you to visualize it so you get the basic idea but that is why there's a config option because it's a configurable configurable amount that you can put on so in this case we have a configure 4 but you could do whatever you want if you want to do 3.5 you could do that and so that does the bounce and then watch the heading at the bottom it goes Boing and see how it gets it gets really really small and then it comes back so because we're animating scale from 2 which is 200% and we're going to a hundred percent it ends up going further than that so it actually goes smaller than a hundred percent and then it has to go back to the end size so it has to go back 200 so basically goes from 200 it does hit a hundred but it keeps going and maybe it goes to like 80 and that has to go back to the hundred and the higher this number the smaller it's going to get because it's gonna overshoot that scaling even more if you go with something like 1.4 you're gonna get less of a of a back like less of that bounce on that text and the higher that number if you go with sound like for the more abounds because it's gonna overshoot it by an even greater amount so it's a more exaggerated to defect so there's a lot of power in this easing that you can do all right so that's our first little demo right there and now let's go move on to the second one alright so here a few things are coming through and actually let me open this up in chrome keep coming back to refresh so that slides out that slides out and that slides up actually the background here does fade in really quick so that fades in that comes out that comes out and then that comes out so let's take a quick look and how this is done by opening that up in my code editor so we've got in this case we have IDs instead of classes just so we could show you both examples we have a background we have a logo we have an address and in my page this is the backgrounds this is the logo and this is the address and the final part down here is what we call content so all those are IDs and but they could be classes if you want them to be classes it doesn't really matter now in this case instead of loading between Macs we chose to load only what we needed we didn't need as much so we chose to go with a slightly smaller file size and so we only lead loaded in between light and the ease pack and the CSS plugin and essentially that is like going to the green sock website clicking download and going with the lightweight option they give you those three things okay so this will download faster than tween Macs if you don't need the functionality don't waste people time downloading functionality they don't need we only have four things so in this case we decided hey let's just see how do we create this if we're not using a timeline we're gonna go back to tween lights and of the first example we showed between Macs but now we're using tween lights so we'll do use tween light let's take the background which now is a hashtag instead of dot because it's an ID instead of a class we're gonna come from an opacity of zero to make it fade in will take one second to do that it's just comment these all outs so so we fade that in now the other elements are all still there because we haven't done anything to animate them so we're just fading in the background there then we take the logo and we take 1 seconds to come from an X now if you're doing X that's a left-to-right movement and so if you do a positive number that's coming from over here and if you do a negative number that's coming from over there so it's coming from the opposite direction we're also doing a rotation again if you do a positive rotation it's gonna give a certain twist if you do a negative rotation it's gonna give you the opposite twist we're also doing a scale and we're doing ease back at the end we're waiting one second so that it happens after this is done so the background happens and then the logo happens and then we bring in the address in this case we did an X of 100 that's a positive number so it comes from the right and we faded it in again with a little ease and we wait 2 seconds because each of these takes a second so now we're at a total - that happens then that happens and then that happens because we're not using a time line we have to figure out how much of a delay if we don't want there to be overlap if we want there to be overlap we can do less and then this will start coming out now when this is still finishing animating so now there's gonna be a little bit of an overlap between those and that would be fine and then finally the content comes from an opacity of 0 and a Y which is a vertical position move and it waits 3 seconds so after the other ones are done so that's the final thing that happens that moves up if we did a negative amount on the Y then that would move down instead about there you go now the only thing is if you start want to start moving things around again the timeline is not the timeline is going to give you more control so when you don't have a timeline if you want to start adjusting this and speeding it all up let's say you want to make that 0.5 seconds and that point five seconds well now really this delay would need to be changed and then and then this delay would need to be changed and it just makes it harder to do plus if I just simply want to speed everything up actually have to go to every single one of them to speed it up whereas if I have a timeline I could just say play the timeline faster so we have a lot more control with the timeline if you're just doing a few simple things it might be fine to do it this way but let's show you the power of the timeline with a bit more than we learned the first time alright so here now I am loading in not only tween light but timeline light I didn't need the full timeline ability the basic timeline light is is enough for me I don't need tween max sorry timeline max in this case so the tweening lets me animate and the timeline lets me put it into a timeline just to switch things up notice I'm just using TL for the name of my timeline because again that's a name that I'm just coming up with on my own I'm gonna create a new timeline with it before I call the timeline now I'm just calling it TL for short the other thing that I happened to notice that somebody had mentioned this into the chat is you don't actually have to write in timeline or TL whatever your name is on every single line if you don't want to you could just have it on the first one so you're putting it into that timeline and then you could just leave it off for all the subsequent lines just saves some more code just in case you want to change the name of it you only have to change it twice so that's pretty cool and basically we're doing the same thing we did before except there's no delays that we have to figure out and because we're doing this and then this and then this and then this in a timeline they will happen one after the other so let's open that up in Chrome so happened one after the other with no delays they happen exactly after the previous one finished now here's the really cool part about this because this is a timeline you can change the time scale it's basically the speed of your animation let's make it three times faster it happens a lot faster now if we just want to speed it up twice the speed we can use a time scale too now it'll happen twice as fast it's amazing with one line of code that we could just make everything happen faster so if you create this great animation and the clients like I like it just make it just a little bit faster yeah you could come in here and the time scale of one would be the normal time scale you obviously don't need that line of code if you're doing a time scale one but if you're like I make it a little faster you can just make it a time scale 1.2 and then it's just a little bit faster okay speed up just a little bit more yeah you could go to 1.5 or something actually let's let's try 15 just to just to see oh man that happened so fast we can barely see it yeah let's try that something like six six times faster really fast but but but seriously here to be able to just make something a little bit faster without having to go back in and individually adjust all of your different timings is is super powerful and also if you just want to play something back when you're developing this can be really great for developers to just watch their whole thing back just faster so you don't have to wait through it in real time and you can still kind of get a sense of everything that's going on and then maybe at the end then you just delete that line of code but just as a developer it can be useful for you as well so if we hadn't made a timeline you know we wouldn't have that ability to do the time scale on it all right so so even if you're doing a a simple little thing it's it's possible you might want to use a time line to have more control but you know if you are just animating a couple things you could just get away with time line sorry the between between lights and just if you really just want to keep things simple and fast to download you don't have to use a time line it's just it all depends on how complex your needs are so our final example here that we want to do is stagger animation and this is where I love I love the stagger animation that they're doing here okay so here we've got notice that each line - did you do you did you do each one is coming in one after the other now we just did a very simple fade in we're gonna get more complex and make this look even more interesting but each line is fading in now to keep things simple we made these as different paragraphs here in the code just so you know there's a plugin that's amazing that they made which is called split text where if you just give it Chise at a paragraph or a line or whatever you give it some text you can split it into lines you can split it into characters you can split it into words you can split it however you want and gzip will actually go in and it will wrap tags around each of those items and then you can address the different pieces so you don't have to actually split things up yourself Gee's app can do the splitting and then you can animate based on what it's split up I'll give you some examples I'll show you that later I have that in my presentation so just to keep it simple though so we didn't need to use a plug-in or anything here I just made different paragraphs in our wrapper so those are the only paragraphs so just to keep things simple for this we're just gonna target all paragraphs normally we wouldn't target all of them but that just makes this demo simple so we've loaded in tween max in this case in this case we just went back to loading tween max because it was just easier just to load in all the capabilities and because we're not doing a bunch of different things we're just going to animate one thing in this example we're just gonna put in between max we don't have to create a timeline and we're going to use stagger from so stagger from is really very much like the from animation but it takes an additional parameter we still have the target we still have the length of the animation we still have the variables but there is a fourth thing that we do in the stagger from which is how much to stagger apart the animations so each thing should stagger by a certain amount of time you don't want them all to have this you don't want them all to start at the same time you want them to be offset by like 0.1 second or 0.2 seconds so that they stagger in one after the other so let's take all the paragraphs take one second animate from because it's a stagger from opacity of zero and then this is the new additional option here it's just another comma point one so take point one seconds and it'll do the first paragraph the first time through then it will wait Oh point one seconds and then do the second paragraph and then wait point one seconds and then do the second and we'll just loop over every paragraph in this case and animate them so 0.1 seconds apart the first one fades in and then the second and then the third and so on and so on let me comment that one out and do a different one in this case same concept but instead of waiting a second to do that animation and seconds kind of a long time for an animation to to operate on we'll just have it take 0.2 seconds to fade in and zoom up from a scale of point five we're still offsetting it by 0.1 seconds to do so so that animation itself only takes 0.2 seconds it takes 0.2 seconds to animate from a smaller size and opacity of 0 now if you want these things to take longer of course you could say hey take a second to do that animation so it's taking much longer to animate it's still offsetting it by 0.1 seconds now if you want it to offset it by one second the first one comes in then the second so now there's no overlap because the length of time that my animation takes and my stagger amount are exactly the same so it's literally like I see one thing and then the next and the next but that I can do that in one line of code is amazing one line of code to animate all those things in if I want to overlap then you simply make your stagger amount less than your duration then there's going to be an overlap then you'll see multiple multiple items at the same time if you make your stagger amount longer than your animation then there's actually gonna be some space in between each of those animations so it's gonna wait two seconds before moving on to the next thing it's only taking one second animate so it's gonna see the animation come in then it's gonna wait a second the next thing animates in waits a second then the next thing animates in it waits another second so you can really do a lot of stuff with this stagger animation this was the thing that when Carl showed me stagger I was like oh my goodness that that is that I can do that in one line of code just blew me away you had me at stagger let's do an opacity a scale and a why so we're basically doing the same thing we just did there but we're adding a Y which will be a vertical position move there we go now you could do a negative amount or a positive amount so instead of moving down now it moves up do-do-do-do-do so now now if you start to go back and you think to some of those examples that we saw of things moving in and you know what if I wanted to do an X anything we could do a negative amount on that so now you go back and you think to some of those examples and how I talked about things sliding in that's how they did it one line of code to do that so powerful that you can do that in just one line of code and then the final example here we're coming from on opacity to zero from a 50% scale we're doing a vertical move and we throw a little easing in at the same time you gotta add your own little sound effects there she's just cool animation but you can tweak all this stuff with just tweaking that one line of code you want things to happen a little faster like the total animation here like maybe 0.1 seconds is a little too too long you want it happen even faster so now they're they're gonna be offset by even less baby I'm like rapid-fire super quick it's amazing that you can do that so let's go back here see my presentation so plugins I've mentioned a couple things about plugins they add functionality to the core features of green sock so I mentioned split text may rerun this you can split based on characters so here they're doing a tween on each individual character so let me do it again pretty crazy it's a stagger from being done to the different characters but you could do it two words maybe want to do something in two words instead of characters you could do it two lines so you can have things animate in lines or you can have it do all of them and do separate things based on characters words or lines you can do any of the stuff and so they're going in with the split text plug-in and actually adding the HTML that needs to be done in live in the browser so that you can then go in and manipulate those things so that's an awesome awesome plug-in that you can learn more about here super super powerful great plugin that they make their draw SVG so if you're not familiar with SVG SVG is scalable vector graphics and it basically allows you to do vector graphics in your browser you can create these SVG files in sketch or in Adobe Illustrator or in any kind of vector tool that allows you to export as the SVG format Inkscape is a free one if you don't have illustrator or sketch so any vector any decent vector drawing tool should give you the ability to export as an SVG file and then you take these SVG files into your page and you can use green sock to animate those just like you would other HTML elements because SVG is a native html5 elements so you can put SVG code right into your HTML page and animate it using G's app as well so this specific plugin the draw SVG is so that you can do this cool drawing effect if you just want to animate SVG all the things we've been learning so far with regular G SAP also applies to the vector objects as well as long as that SVG code is in your page but if you want to draw it like this and kind of create these cool animations where it looks like it's being drawn there's a great plugin that they make for that that's just one specific effect with SVG another effect is morphing so here let's just actually rewind and play this all these different shapes are morphing and changing from one to the other and if you remember some of the examples like the the Raphael painting one or no it was REM Rembrandt the Rembrandt painting one they morphed from a square to a circle or I think it was a circle to a square and that was just a simple example of a morph but to be able to morph things it's pretty darn powerful great all sorts of cool little effects so you know here they're just showing that you can more from any shape to any shape but it could be as simple as go from a circle to a square and you can create some really interesting effects and that's another plug-in that you can get for GSM so their core strength is that this stuff just works it's got great great browser support and it just it excels at complex story telling animations the more things you have the more you're gonna need something like green socks timeline ability to compare it to CSS animations you can do CSS animations but the amount of control you have with CSS animations is it's not nearly as powerful as green sock the the whole concept of the time lining that they have and the control that you have within that green sock is far superior compared to CSS animations if you're just doing a quick little thing CSS animation could could do that but the more complex it gets the more you need G's app to do that it also solves a bunch of real-world problems revolving around SVG there can be cross browser issues with animating them prefixing so when you're animating different elements some browsers require certain vendor prefixes for certain CSS attributes they take care of that so you don't have to worry about changing all of those properties over time like if you were doing a CSS animation you'd have to worry about vendor prefix Inge cheese app takes care of that but the workflow stuff and that might be one of the sides from them making sure that it works everywhere the things that they thought about for workflow is really important for example with the timeline you can say to jump to ten seconds into the timeline and you know if you've completed your first 10 seconds of animation and you're focusing on the the next 10 seconds to have to re-watch the first 10 seconds of your animation over and over and over again every single time you waste 10 more seconds that can add up to minutes and minutes upon minutes throughout the day but what you snap you could just put in a line of code that says jump to this point in time and you can skip over that first part and so you don't have to waste about that you can change the speed of your animation very easily so you can slow it down and really get a sense of exactly what's going on so in terms of working which you SAP there's a lot of great things that they've done very smart things that make our workflow easier it's not dependent on anything you can work with jQuery but you do not need to load jQuery so it plays nicely with others but it doesn't need others to work their documentation and support is awesome Karl is often in the forums answering questions they post so many tutorials so many great code examples the documentation is extensive tons of great information there and definitely check that out and they are a funded project and so they have a great amount of information on their website about why funding is important and the short answer is the reason that it's good to be funded is you know that it's going to be maintained and maintained well unfortunately sometimes with open-source projects if there's nobody willing to give their free time unfortunately sometimes open-source projects can be abandoned and it's not to say you know open-source is bad but it's open source is not always a great thing that if you have a funded project that that has steady income coming in you know that the people care about their project are gonna continue to improve it and and they're gonna be there for years to come like I said G's has been around since 2006 so that is eleven years they've been around so they're here to stay and that's great because we know that we can rely on them so licensing so now you might want to you might be thinking hey wait how are they funded where are they making their money so essentially the core tools are free unless you're charging people to access your website your app etc and the charging for access is the key there so if you're making money off of a project that's not necessarily the issue if you're developing a website for somebody you could be making money charging them just to develop and to design the website that's not going to be why you pay green sake the website that you develop for them do they charge people to access that website if they charge people to access that website for example the New York Times The Wall Street Journal if they charge people to access their contents then they would need to get a license but if it's completely free and they don't charge memberships or anything they could still make money on the website they can still have ads running on the site but as long as it's free for people to access then G SAP is free if you were charging for access to your website or your app let's say you make a web app and you put on the store and you're charging people for it in those cases you need a club green sock membership you can watch a video on this if you want to they have a couple different plans depending on what you need but it starts at $50 a year you can compare exactly what you get here as part of it and one of the other benefits of getting the club green sock membership is to get access to some of the plugins so for example the morph SVG the split text you need the shockingly green membership to get access to some of those additional plugins so some plugins are free some are not so split text which is a great plugin the morph SVG which is a great plugin those you have to get the shockingly green which is the $99 per year so if you want the plugins or you're charging for access to your site in those cases you would need to get a membership they have lots of information about licensing information and if you purchase your club green sock membership then you get the bonus plug-in such as the split text the draw SVG the morph SVG that type of stuff cool thing if you take the noble desktop class so we offer a class for people to come to New York City and take it in person or you can also do it online so if you're not in the New York area you can't make it into our class that's fine you could do a live stream online and we we use GoToMeeting for that so people can screen share into the instructors computer watch the demonstrations here the mono microphone if there's any questions or issues you know we can talk about them and you can even do a screen share back to the students monitor so we can take a look and if they're having coding issues or anything we can you can take a look at that so anywhere you are you can take our green sock class the only thing is it's not a it's a live event so you do have to attend during the hours of the class so we're on Eastern Time New York time so if it's a day class from 9:00 to 4:30 9:00 a.m. to 4:30 p.m. that is New York Eastern Time but if you take that class whether it's online or in person you receive a free year of the shockingly shockingly green club membership so that's worth 99 bucks if you take our class and and if you've already paid for it then they give you an extra year they just extend your membership but you get a free year and so if if it's the first time you're getting into green sock then you start off with the free one-year membership and so then you get those plugins as part of that which is awesome and then you can even use that on sites that charge for access so you're covered for that first year so like I said we do have a book oh sorry a class and a book as well so if you take a look at the class this talks about the class give some other examples the next class we have coming up is October 19th and 20th from 9 to 4:30 New York time like I said you could do it live in person or you can do a livestream online and it comes with a workbook if you're doing it as an online person we send you the eBook version of it so you can download the e-book and if you don't want to go through the class if you can't attend the class if you don't wanna wait for the class the book is also another great way to learn these are step-by-step exercises that the amazing Karl here who's on the live stream today in the chat he he worked with us to create this book so we did some of the writing he came up with the projects in the code and we worked together to create this this great book and it step-by-step walks you through the process tells you open up the file type in this code and literally walks you through learning so many features starts out with the basics and goes much further than we've gone in today and so the books 49 bucks you can download that right away and get started if you want a print version of that sixty-five dollars and that's another option to taking the class if you want both you can get the print and ebook for 75 so that those are ways you can continue your learning there's a lot more to green sock than we could cover today I just wanted to kind of get you started and show you the basics but it's capable of so so much more than what I showed you today but hopefully this was an inspiration to kind of get you excited to want to learn more and show you that green sock is a pretty amazing tool I'm gonna open up the chat to some questions I know that they've been some talk in the chat and I think Jack and Carl have already been answering a bunch of those questions but I'll give people another couple minutes to chime in if they have any other additional questions if you're heading out I just want to say thanks again I hope to see you in a future online live stream be sure to like this video if you enjoyed it and subscribe to the YouTube channel we will be sending out links to this video as soon as it's posted also if you subscribe to the channel you get notifications when videos are posted alright it looks like the chat is kind of quiet it looks like a lot of people were already answer asking their questions so I will wrap this up I'll hang out in the chat for a little bit longer but as far as the livestream video sharing goes I just want to say thanks so much thanks for Karl and Jack of green sock for joining us in the chat today it's one of the benefits if you attend live sometimes you get to ask questions and talk to people in the chat but definitely hope you enjoy using green sock I think it's a great tool it has changed the way that I think about animating things on the web and if you want to learn more of the class or the book either one is a great way to learn more and hopefully we'll see you around in the future thanks so much have a great weekend

Channel: Noble Desktop

Views: 35,533

Rating: 4.9133129 out of 5

Keywords: GreenSock, GSAP, GreenSock Animation Platform, Tutorial, Learn, Intro, Noble Desktop, HTML5 Animation, JavaScript, CSS Animation, CSS, HTML5, CSS3, Web Design, Web Development, Coding

Id: v9GK4Rf6w3A

Length: 99min 28sec (5968 seconds)

Published: Mon Jul 24 2017