Scroll Trigger Tutorial - 6 - Timeline

hey and welcome back to another video on gsap's scroll trigger plugin in this one we're going to be taking a look at gsap's timeline feature we're going to learn about why it's useful and how to use scroll trigger in a timeline so if you're coming from the last video in this series you can see that i've really stripped down my html and my css as well because i kind of wanted to start from scratch with this example so in my index.html file all i have is a simple div with a class of box in my css in the body element i've simply reset all margins to zero just to get rid of any default margin stylings that the browser might provide and for that class of box i've set a width and a height of 100 pixels in a background color of blue and so if we come here in the browser now we can see that simple blue box now coming back here into my code editor i'm going to go ahead and i'm going to open up the app.js file and here as well since the last video i've really stripped this down i've just left the first line where we register the scroll trigger plugin so even before we talk about the usage of scroll trigger in a timeline let's look at what a timeline does and why it's useful let's say that we want to create an animation for this blue box and what we want to do is we want to have a little bit more of a complex animation not just a simple tween where the box let's say just does one thing like moves across the screen but we want to connect rather a series of tweens so we might think to do it like this we'd say gsap.2 and then we'd pass in our animation target which is going to be that div with the class of box and then as the second argument we'd pass in an object with the various properties that we want animated so let's say first we'd want to do a transform x we'll say 500 pixels and we want to have that last for a duration of two seconds and then after that we could do another gsap.2 again we'll target that box and then let's say at that point we'd want the box to move down 200 pixels should we do a transform y we'll say we want that to last for a duration of 3 seconds and the thing is since we're doing it this way we're also going to have to use the delay property in order to get all these animations to run consecutively so since the first animation lasted for two seconds we'd want to set the delay of the second animation to be two so this one would start two seconds after the first one and then let's say we'd add a third animation so again gsap.2 again we'd target our box and we'll say for this one we'll set x to zero so the box could move back to the left side of the screen we can make this iteration of two seconds let's say and now again we're going to have to use a delay property so that this animation starts at the proper time in the sequence and because the first one lasted for a duration of two the second one lasted for duration of three well we'd have to set this third animation to be delayed by five seconds now if we jump back to the browser we can see how that series of animations works out let's refresh the page you see the box move across 500 pixels down 200 pixels and then back to the left side of the screen at zero pixels so you can see how each of those animations played consecutively one after the other with their proper timings because we set up the durations and the delays to match but now here's the thing here's why this can become a big problem let's say that at a later time we come back to this animation and we decide that the first one we want to increase the duration so let's say instead of two seconds we wanted that first animation to last for five seconds well now you can see what the problem is in order for this series of animations to play properly at their correct timings i would now have to come into each of these following animations and adjust their delay times accordingly you see because the second one for example is only being delayed by two seconds so it's going to start while this one is still in motion let's actually take a look at that in the browser and see how this messes things up so now i'm going to go ahead and refresh the page and notice how that blue square before it finishes moving across the x-axis it already starts moving down the y-axis which causes a kind of diagonal movement so i'm going to refresh and here you can see it moving diagonally so in other words the timing is off so now that you see what the problem is let's go ahead and try the timeline approach so what we're going to do is we're going to comment this stuff out and instead we're going to create a timeline so i'll do gsap dot timeline with a pair of parentheses and i'm going to store this to a variable i'll call it tl cons tl equals gsap.timeline and by the way we're not incorporating scroll trigger just yet but we are going to do so in a moment but first we're just looking at a basic timeline so now that we have this timeline we can use it to attach our various animations to and we can do it like this instead of saying gcep.2 now that we have this timeline we can say tl.2 and here i'll pass the target that we want to animate which again is the box and then my object again with the various properties that i want to be animated so like before we'll do some of the same things we'll say x is going to be 500 and we'll give it a duration we'll say two seconds and now because of method chaining we can simply say dot two again again it's the box that we're animating and here we'll do our y property translate y 200 pixels and we'll give this one a duration of three seconds now the thing is that since we're on a timeline we no longer have to deal with setting delay times ourselves each consecutive tween is going to play in the proper place automatically so we'll do our third one again we can say dot two target the box here we'll do our x at 0 pixels and we'll give this a duration of 2 seconds now back in the browser now that we have this timeline let's make sure that it works so i'm going to refresh the page goes x down y 200 and back to zero on the x axis cool so it's working now here's the beautiful thing i can come back into my first animation and i'm free to change the duration so like before i can change this to a duration of 5 seconds and now because we're on a timeline i don't have to deal with adjusting the delay times of any of these following animations they'll all play at the proper time and just for fun let's change the second one as well let's actually shorten the duration we'll set it to two seconds and again we'll give it the old browser test we'll refresh the page you see that square moving for a duration now five seconds it drops down smoothly across the y-axis and then back to zero on the x-axis and everything just plays properly in order with the correct durations and delay times so now that we understand what a timeline does and why it's useful let's see how we can use scroll trigger in a timeline just to clean things up i'm going to delete this commented out code in my javascript file and because we want to see how this works on scroll i'm going to add a couple elements in my index.html so before the box i'm going to add a div i'm going to give it a class of panel i'm also going to copy and paste that div after the box and i'm just using these divs to create some background panels with a height of 100 vh and this will give us some scroll height in the browser of course we're going to have to make some style rules for those panel divs in our css file so we'll make a rule for the div with the classic panel we'll give it a height of 100 vh and we'll give it a background color of pink okay in our javascript file just for now let's comment out the timeline and let's take a look at those new html elements and the styling we did in the browser so this is what we have in the browser we now have that first background panel with this pink collar taking up 100 vh and i did that so that we could have some scrolling going on there's our blue box followed by another panel with a height of 100 vh right so now let's put our scroll trigger in our timeline so coming back now into our javascript file i'll go ahead and uncomment out this code and what we can do is in our timeline we're going to pass in an object and then in this object we're going to create that scroll trigger property like that and because we want to set various properties for the scroll trigger we're going to make its value an object and we're going to say that the trigger is going to be that div with the class of box we'll set up some markers we'll assign that to true so that we can see our scroll trigger region and then let's set some start and end properties so let's say that we want the start to be the top of the box and 80 percent down in the viewport and for the end we can also make that the top of the box and let's make that 30 down from the top of the viewport so now we can come into the browser and we can test that out we see our markers here on the right we have the scroller start which starts 80 down from the top of the viewport our scroller end which is 30 down from the top of the viewport and now watch as i scroll that sequence of tweens is only going to start when the top of that blue box hits the scroller start so i'm going to start scrolling there's our blue box timeline animation hasn't started yet but here we go it starts and i can let go this scroll bar and you'll see that timeline play out now another cool thing that we can do since we have our scroll trigger in the timeline right we can apply that scrub property and set that to true and actually if we remember from a previous video we can actually give that a little bit of a lag so we'll set it to scrub but we'll say we want to lag it by one second so that'll give the scrub a little bit more of a relaxed feel now i'm going to save and we'll go back to the browser and what we should see is that the events in this timeline should work in lockstep with our scroller position so now back in the browser i'm going to start scrolling down again and here now when the top of the box hits the scroller start that timeline is going to start but since it's locked to the scroll bar now if i move my scroll bar back up it's going to reverse itself in the timeline and i can play around with that like this see so that's a pretty cool effect in this video we learned all about gsap's timeline we learned about the problem that it solves and why it's useful and we also saw how to integrate scroll trigger into a timeline of course there's much more to timelines and i'll probably do a whole other video all about the different things that you can do with the timeline but if you enjoyed this video if you feel like you got some value out of it please subscribe to the channel give the video a like and hit that bell notification icon so you can be notified of new videos when they're released see you next time

Channel: The Code Creative

Views: 4,895

Rating: 5 out of 5

Keywords: gsap scrolltrigger, gap scroll trigger, scrolltrigger, scroll trigger, greensock scrolltrigger, greensock scroll trigger, animate on scroll, scroll animation, scrollmagic, scroll magic, scrollmagic tutorial, scroll magic tutorial, greensock, scroll trigger tutorial, scrolltrigger tutorial, timeline, timeline animation, scroll timeline, scroll trigger timeline, gsap timeline, gsap timelines, the code creative, gregg fine, web development, web development tutorial

Id: -qQhTxTtpeQ

Length: 12min 11sec (731 seconds)

Published: Sun Nov 22 2020