Scroll Trigger Tutorial - 2 - Start and End

in this video part two in the series on scroll trigger we're going to go even further with the various options we can use with scroll trigger now previously we saw how the target element can be animated when the trigger element is scrolled into the viewport and that looks something like this notice on the bottom left of the screen when i start scrolling as that fuchsia box comes into the viewport it starts its animation here it is one more time but what if we don't always necessarily want that target element to start its animation when the trigger element enters the viewport like what if we want it to start at a different point let's say when the trigger element gets to the center of the viewport or when the trigger element is 200 pixels from the top of the viewport well that's what this video is going to focus on we're going to look at two properties in particular those are the start and the end properties and we're going to see how those can be used to set different start and end points for the scroll trigger so let's get into it so i'm back here in vs code and here you can basically see the code that we had from the previous video the first thing i'm going to do just to clean things up a little bit is i'm going to get rid of this square 2 here on line 14 in the index.html file now over here back in our app.js file in order to get access to a lot more of the properties of scroll trigger instead of assigning trigger to a string like this we're going to actually set the value of scroll trigger to be an object and then inside of this object we can set up our trigger element like this we'll use the property of trigger and then we'll set that to be the trigger element which like before was the div with the class of square and if we go back to the browser and scroll down we can see it working just like before oh snap now as we said what we're interested in doing is triggering that animation at a different point in the viewport not just when it first enters the viewport which is the default so the way that we can do that is we're going to use the start property on the scroll trigger object and there are a few different ways that we can set the value the first way is as a number so for example let's say i gave the start a value of 400. if we come back into the browser now we should see that animation start only when the viewport has scrolled 400 pixels so let's try it out we'll start scrolling down and here you can see that fuchsia square is not doing anything yet until we get here after 400 pixels of scrolling and we see the animation start the second way that we can apply value to the start property is as the string so let's get rid of the number here and we'll type a string and the string is going to take two different values the first value is going to relate to the part of the trigger which is going to kick off the animation once it meets the second value which we're going to put here which represents a location in the viewport i think this will become a lot clearer once we try it so there are a few different options for the ways that we can type in these properties but the first way is through the use of keywords and we can use top center or bottom so for this let's say top and center and what this means is that when the top of the trigger element which is the square meets the center of the viewport that's when the animation is going to start so let's save it and we'll go back to the browser and try it out so i'm going to start scrolling and look for the point when the top of this fuchsia box meets the center of the viewport should be about here there you go and you see that animation in addition to these keywords we can also use percentage values here and pixel values and we're going to try that out in a second but before we do that i want to show you something really cool we can add a property here which is called markers and if we set that to true let's now go back to the browser and see what we have so notice here on the right side of the screen we now have these nice markers here start end scroller start and here on the top you see scroller end so what do these markers represent here well remember in our code we set start to be top center so since that first value is top that's why we see start here it's aligning with the top of this trigger element and the end marker for now is at the end of that element because that's the default and since the second value of the start property was center you can see the scroller start here is in the center of the viewport and the scroller end here is at the top of the viewport which is the default but as we said before we can also use percentages and pixel values so let's try altering the start values with percentages and pixels and see how that affects the markers so let's go back to vs code and here for the values on the start property instead of top and center let's say top and 30 percent and let's go back to the browser now and now we can see that that scroller start has moved from the center to 30 down from the top of the viewport so when the top of the trigger element here and we see start here when that meets the scroller start that's when the animation is going to start so we'll scroll up and let's try it let's see how when that start of the trigger element meets the scroller start the animation starts so here we go and boom you see that animation start just as a side note instead of a boolean value here for markers instead of this true we can use an object if we want to actually specify the look of the markers so i have an object i created already i'm just going to paste it in and here you can see some of the properties that i've altered the start color the end color the font size and the indent value we also have access to the font weight property as well if we want but let's just save this and take a look at the difference now in the markers and here you can see they're much bigger their color is different the indentation is different so altering the look of these markers can be helpful in development or when you're experimenting with your animations now the other way of defining a value for the start property is by using a function and i think actually before i show you how that works i'm going to talk a little bit about the end property so the first thing i'm going to do here is actually do a little bit of cleanup so rather than setting the markers property to an object like we have here i'm going to set it back to a boolean value of true so in order to illustrate how n works i'm going to actually introduce another property here called toggle class and we're going to set the value of toggle class to be a class which we're going to create in our css we'll call it red so of course we need to open up our css file and as you remember we're not using square 2 anymore so let's just get rid of that and let's create that red class so dot red and we're just going to give this a background color of red so now let's close our styles.css file and in app.js for now let's just get rid of this x property and i'm using this toggle class property here for this example just because i think it's going to make showing the start and end properties and what they do a little bit easier to understand so toggle class what that's going to do is once the start trigger starts this class is going to be toggled on the target element on that square so we're going to see its background color turn red and then what we're going to do is we're going to add an end property and this end property is going to set the point at which the scroll trigger has finished or ended in which case that square element in this example is going to toggle back to its background color of fuchsia so the end property works basically the same way as the start property we can give it keyword values top center or bottom we could give it percentages we could give it pixel values it could also simply be a number or it can be a function as well but for now let's give it some keyword values so let's try center and let's try twenty percent so what this is saying is when the center of the trigger element meets twenty percent down from the top of the viewport the scroll trigger will then be ended so we have our markers set to true so if we go back to the browser now we should be able to see these start and end points so here we are in the browser and here you can see the first value of start we said was top so that's aligning with the top of this trigger element and the end point we said we wanted that to align with the center of this trigger element now the second value we gave to start was 30 so you can see the scroller start here is 30 down from the top of the viewport and we gave the second value to the end property we set that as 20 so you can see the scroller end here is 20 down from the top of the viewport so what we should see here is when this start hits the scroller start our square here should turn red when the end point meets the scroller end here that's when this square should toggle back to fuchsia so let's try it out let's start scrolling down you see the start is almost meeting the scroller start and then here we go it turns red and here comes the end it's almost meeting the scroller end and there we go it turns back to fuchsia now let's go and take a look at how we can set the values of either the start or the end properties as a function in this case we'll look at setting the end as a function so instead of this string of center and 20 percent we'll get rid of that and let's create an arrow function here and what i want to return from this arrow function is a template string what i'd like to do is i'd like to set the end trigger to be the height of the square in pixels so for example r square is 150 pixels in height so i'd like the end trigger to be 150 pixels from this starting point so this is how i can do it first of all we're going to need our comma there but what we can do is we can write plus equals and then because we're using a template string we can do dollar curly brackets and in here we're going to first select that element the div with the class of so square say document.queryselector and then we'll get our square and then we're going to use the offset height property to get the pixel value of that square so now if i save and i go back to the browser i should see the end trigger point be 150 pixels down from the starting point so let's go check that out so if i measure that out here i can see yeah it's 150 pixels just to confirm that that works let's go back into our css and let's change the height of that square let's change it to be 350 pixels and now let's go back to the browser and there we can see that that end trigger point moves down to be 350 pixels from the start so let's just confirm that yep 350 pixels there what's cool though now is that we can actually give this height a dynamic responsive value so for example instead of 350 pixels let's say 20 vh so it'll be 20 viewport height units so now when we change the height of the viewport the endpoint of our scroll trigger should follow along and should update itself to be whatever the height of the square is currently let's go try that out okay and check out where our start and end points are here and check out our square and so what we should see is if we reduce the height of the viewport we should see these start and end points coming closer together so let's go ahead and do that keep your eye on those start and end points and here you can see they've become a lot narrower let's just see it's about it's about 100 pixels in height here and now let's go ahead and increase the size of the viewport and now let's go ahead and check the distance between the start and end and we can see it's about 270 pixels maybe so it's clearly increased since we increased the height of the viewport so thanks for checking out this video in this series on scroll trigger in this video we learned about the start and end properties we saw how we can turn scroll trigger's value from a simple string into an object so we can access all these other properties we also saw how we could use markers so we can get a visual representation of where our start and end points are and in the next video we're going to go even further with some more of these cool properties of skull trigger so if you enjoyed the video if you feel like you got some value out of it please give the video a like and consider subscribing to the channel so you can get notified when new content is released see you next time

Channel: The Code Creative

Views: 5,806

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, start, end, markers, the code creative, gregg fine, web development, web development tutorial, coding tutorial, javascript tutorial, css3

Id: ZCtXfJMdgE0

Length: 13min 29sec (809 seconds)

Published: Wed Oct 14 2020