Javascript Scroll Animation Tutorial | GSAP and ScrollMagic Tutorial

hello there my beautiful friends on the Internet's how you doing today in this video we're gonna take scrolling and animation and we're gonna put them together to make a small little baby and we're gonna create the school paper plane animation that you can see here and it's only affected by scrolling so even if we scroll backwards it's just gonna animate in Reverse so I hope you're ready for this one if you want to become more creative you know what to do I have my friend here to show you there we go let's get going so what I have here in BS code is just an empty HTML as we usually have a style dot CSS and an AB KS that are both empty now before we get going we need a few libraries of the internet so I go to cdnas the first thing we need is scroll magic so let's get Scroll magic we're gonna go all the way down here and we're gonna take the scroll magic diminish a yes copy d we can actually copy the script tag and just import that in here and hit enter there we go we got that going the second thing we need which is gonna help us visualize our scrolling is something called debug indicators let's get the minified version so if we hit here copy script tag and I'm gonna paste this right below it alright the next one is gonna be animation ji SAP this is just a plugin that's gonna help us combine basically combine scroll magic and G SAP to gether so let's take this copy script tag and paste it in here all right let's get the G SAP libraries now and we can search for it I have no idea where let's just go to Google gzip CDN there we go and in here we can get the twin lights so we're gonna get the twin twin light mintage is copy script tag let's paste this below we can get the timeline lights as well copy script tag and remember if we just take the tween light we will also need the CSS plug-in and this is the last thing we need so copy the script tag on that paste that sucker in here and we get to go and actually if we need one more because what we want to do is we animate on a certain path so to animate on a certain path jiseop has this cool plugin called bezier plugin which is just basically allows you to create the path and place an image or anything you want on it and it's just gonna animate through that path copy this and paste it below and we are ready look at that that's quite crazy but you have to make good efforts to create something cool alright and our body I'm just gonna throw up literally five lines of HTML in here so don't worry too much about it so I'm just gonna create a header here h1 scroll animation just so we have some space after the header I'm just gonna add a section here and I'm gonna add a class of animation to this like so and then here we're just gonna grab an image and I I have an image which I'm gonna link in the description and I'm just gonna drag it in here it's just a paper plane all right so let's paste this sucker in here and we're gonna name this paper plane like so great let's also give it the class of paper plane class with two S's and what are you doing I have no idea there we go paper plane perfect and that's that's all we need let's also add a footer here it's just gonna she's gonna say woo or something so we know we arrived at the end whoo okay that's that's all we need close this let's open this up let's see what we got open with live server and amazing great let's also get remove some basic styling here we're gonna say margin:0 padding:0 box-sizing the boulder box perfect let's also get the header and the footer and just add a height of 100 VH to this we're gonna add a background color is gonna be white I just add display flex justify contents enter a line item Center just so we centered these texts and here then we're gonna make these a bit bigger header h1 on sighs let's go sixty pixels and let's also add a font family in here hunt family we're gonna say monster rod like so is that correct let me let me check I always miss Belmont Seurat months rot Monserrat how do you say months right let me know I am actually not sure okay so we have this we have this section and we have the last section okay let's get the animation section which we are gonna focus on animation we're gonna give it a height of 100 VH as well and I found this cool website web gradience calm and you can just copy the CSS here whichever you like you can paste it in here and Bambara boom boom boom look at that that looks good that look good to me I like it so this is 100 VH doesn't look under BH to me yeah it is yeah perfect good we have that going we are also going to add position relative to this animation because we're gonna move the image somewhere else position not in here outside here position:relative there we go and I'm also gonna add overflow:hidden just so if the paper plane leaves our screen it's not gonna scroll more so if it leaves at least we don't care about it good we have the animation let's just make the paper plane a bit smaller paper plane we're gonna say height 100 pixels let's see how that looks yeah quite small and I kind of want to Center it in here like around here you can put it off screen if you want I'm not gonna do it but top 50 left zero percent yeah that's fine that's that's all I want it's not how can we need to position absolute to so this is relative and this is gonna be absolute and save there it is right there perfect that's all we need so we can get started to actually animate this thing so the way P we cover G SAP and scroll magic a bit but I haven't covered this this Bezier plugin so let's cover it so what we can do is we can create a flight path so I'm gonna say flight path a constant in here and this is gonna be an object and it takes multiple values the first thing it's gonna take a curviness and what's a curviness well curviness is exactly how it sounds is the amount of curve that the the image or whatever you want to animate is gonna take so our if our curviness and this is how we write it is gonna be 0 then imagine it's gonna go something like this like tick tick tick like super straight it's not gonna have any curviness it's gonna go from 0 to up to down but if we had the curviness of 1 then it's gonna kind of have a bit of motion to it okay if we put it - it's just gonna go around the round rounder now I'm gonna show you this after for now I'm just gonna put 1.25 but I'm gonna change this so you can see more obviously what I'm doing now another thing is outer rotate and I'm gonna put this to true and I'm gonna show you what it is after we so we can visualize it because I can explain it to you but it makes more sense if you see it and another thing is values and this one is an array and these are basically the points that we want to animate to you so it takes an x and a y and x is gonna be the horizontal and the y is gonna be the vertical and the easiest way i can explain this to you is x imagine X as being left like in position absolute and you put left 0 well that's gonna be here at the end right here this is going to be X 0 X 100 is gonna be around here y 0 is gonna be up here y 100 is gonna be now here so it's kind of like left on top but before we move on just so I can explain everything in here let's just add a random value in here and then we will create a tween and we're gonna animate along this path so we're gonna create an object in here and here we can define an X let's go 104 now and a Y of minus 20 okay we're gonna add more in here and just a bit so here we can just create a timeline like we usually do so conce tween new timeline lights like so here we can just add tween dot add and you know it takes we need to add a tween light actually that's it enter here so we have more space so we just add an animation to our timeline tween light dot two so here the first thing is gonna be the object that we want to animate we want to animate the paper plane the second parameter is going to define the duration we're gonna put it to one second and the third one is gonna define the properties that we want to animate so what do we want to animate well what we can do is we just want to animate with this Bezier plug-in that we use so we can just say Bessie air and here and we can just give it the flight path so this path up here and that's it we can also add an ease let's do power one dot is in and out like so alright alright so let's see how this works and if we refresh we are it's not kind of work great alright let's fix up things because we sometimes we have problems and we have to debug so the first one is let's see tween light is not defined well okay it's not.we light with small it's big so I messed up so tween light here is gonna be with the big L and that's what I took as Welli it took a big L tween light all right let's do the trick and still doesn't work invalid Bezier okay I wrote base here and not with E so it's not be a Z it's be e so with an e make sure it's with an E and if we hit save now as you can see we have some movement going on here so it's just basically animating two hundred and minus twenty from its initial position good let's add more so to add more all you have to do is add the comma and just make a new object that's it you can move it to X let's move it across a bit more like three hundred and we can do Y let's say 10 hit save let's see as you can see it curves down now because we add the 10 here and was from - - being going up and positive is going down and we have this more movement here now watch if we take the auto rotate - follows then it's just gonna stay static it's not gonna rotate so even when we flip it if we have the auto rotate to false then it's just not gonna look at that good so true put this back to true let's add more why not we're gonna create a new object again let's move it more now 500 and we're gonna add the Y let's go 100 let's go crazy of it and what this is just like experimenting different things and see see what you get basically there we go let's do a flip here so to do a flip we're gonna increase this to 750 and what I'm that's making you an object actually so I'm gonna move it more across to 750 like this but now what I want to do is I'm gonna take this Y and I'm gonna put minus 100 so that's gonna basically go up like this let's see how that looks - 100 and I need to say why here - 100 there we go so as you can see whoop it just flips up like that because we put - 100 from 100 now if we go back let's do X whoo let's go 350 so we're going all the way back now and why let's do minus 50 whoo there we go so we're kind of going from 750 to 300 it's gonna it's gonna go a bit crazy like so all right - 50 let's also do X now we're gonna want to go forward again so let's do 600 and why let's do 100 again well there we go we did a full flip nice now how do I get this let's let's add another one and then I kind of want to get it off screen so let's do X 800 Y let's go back to 0 like that good but now I want to get it off screen so hey we're in JavaScript we can do whatever we want we can do X we can just do window dot inner width if we want like so so that's gonna be however big the screen is and why what should we deal with this should we make it go up or down 150 let's try 150 there we go but I can't want it to fly up actually so let's do 50 we've all right let's do minus 150 so that's gonna make it go up like that even more I 1 250 whoo there we go perfect there we go so we have our animation going last 1 second the problem is now well it's not really with the scrolling so how do we add the scrolling well down here we can just define a controller so this is all scroll magic in here cause controller we can set this equal to new scroll magic and so let me make sure I type this correctly controller so it's : I took that controller all right close this up and here we can just create a seam Const see is gonna equal to new scroll magic not seen and this takes a parameter of an object okay and here we can define trigger trigger element which is basically the element that's going to trigger the animation so for that I want to say trigger element like so with small and here with big so camel kicks and then what we need to do is just add the animation and what's the animation well it's this section here okay so this big section so when it hits here I kind of want the animation to start good so we have the trigger now we can add a duration I'm gonna add it's at three thousand four now we're gonna change this so that's three seconds and here I'm gonna delete this and I'm just gonna add indicators this is gonna help us visualize what's going on and I'm gonna add to controller like so okay now nothing's gonna work right but right now the animation is still going on by itself well now we have the start and the trigger here and as you can see the trigger element is gonna be this one and the trigger one is set in the middle right now which we can change but first let's add the animation to the scroll so here we can add another dot and we can just set tween like so so this is d scroll magic G set plug-in that's gonna help us do this we can set tween this timeline that we created up here so we can just say tween and that's it let's see we scroll and it's gonna animate as you can see while we scroll and it's gonna end somewhere down here oh it ends all the way down here okay so it kind of works but we need to fix certain amount of things well the first thing is watch if we change the duration to one second this is going to be shorter now like so also I want to trigger this when it hits up here okay so to change this trigger position we have something called and here in the scene we have a comma trigger hook like this don't be confused with Captain Hook one is gonna be all the way down here if we add one if we add 0.5 it's gonna be in the middle and zero it's gonna be all the way up here and it's not working for some reason let me make sure why not trigger hook and it's with two G's by the way trigger hook like so so if it's zero it's all the way my typing is horrendous today I'm not sure why so zero is up here 0.5 which is the default is in the center here and 1 is gonna be trigger trigger here so it's triggering already but I kind of want this to be at zero so triggers only up here but one thing I wanted to do is I wanna stick this here so we cannot scroll through it until the animation finishes because this kind of looks weird right now I'm not a big fan of it so to do that all we have to do is down here we can just set pin which is gonna stick the section in the same position so we cannot scroll through it and we can just add the animation section so the trigger element and now if we scroll this is gonna be stuck here until our animation ends there we go if we want the animation to last longer then we can just add more time here so if I had something like five thousand like five seconds if I scroll more now it's gonna be everything that's gonna be slower and you know you can just play around with this see see what you like how much yeah it's just pretty much free experimentation here but yeah that's it hope you enjoyed this tutorial I have a super exciting video coming on Saturday so make sure to drop a sub to stay up to date with what's going on alright everybody hope you have fun have a wonderful wonderful day bye-bye [Music]

Channel: Dev Ed

Views: 180,936

Keywords: javascript scroll effect, javascript scroll animation, scroll animation tutorial, gsap and scrollmagic tutorial, gsap tutorial, scrollmagic tutorial, javascript tutorial, scrollmagic, gsap, tweenlite tutorial, animation, web design tutorial, web development tutorial, js animation, css animation, animation on the web, animation tutorial, javascript project, javascript tutorial for beginners

Id: fR0tHI0nFYk

Length: 19min 51sec (1191 seconds)

Published: Wed Mar 06 2019

Reddit Comments

[u/storyofedd]

A little tutorial I made for those who are interested in making some animations with javascript. Let me know what libraries you use personally or if you want me to cover something.

[u/c-student]

Great job! I just started watching, and I like the way you present yourself. The project looks very useful. I'll come back and watch the rest later.