Scroll Trigger Tutorial - 3 - Toggle Actions

[Music] oh hey you're back in the last video we talked about scroll trigger's start and end properties and we're basically going to pick up here where we left off but before we do so i just want to point out a few little changes that i made as you can see i made the markers a little bit bigger and if i show you the code you can see that i changed the positions of the start and the end markers also i brought back this x property so that when the animation is triggered that box with the class of square will move 700 pixels to the right let's take a look at how that works in the browser right now so when i move down now we should see that box moves 700 pixels to the right once it hits the scroller start there we go now i wonder what would happen if i scrolled back up and tried that one more time hmm it's just kind of sitting there where it was when we left off and that makes me feel a little bit sad doesn't it make you feel sad i mean i want that animation to happen again what's going on that's it all right well we can fix that that's where the topic of this video comes into play and that's called toggle actions let's find out how they work so i'm back here in vs code and if you haven't checked out the previous videos you might want to take a look at the index.html file here on the left notice that we basically have two divs going on we have the first one here here the second one here and actually we have an inner div inside of that second div and that one is one that has the class of square and that's that box that we saw moving from the left side of the screen 700 pixels to the right but i'm going to close out of this index.html file to make some more room on the screen and there we go we just have our app.js file let me make it a little bit larger now in order to use toggle actions we need to add a toggle actions property to the scroll trigger object so i'm going to come in here and i'm going to write toggle actions like that and the value of toggle actions is going to be a string so i'll put my quotation marks don't want to forget my comma at the end and the way the toggle actions work is that it takes four different keywords which are going to be four different actions that will be triggered by four different events so let's look at those keywords and i think you'll see what i mean we can start with the defaults the default is play none none and none let's just save and go to the browser and make sure that we still have the default action going on so when i scroll now we should see the same thing happen there we go and then if i try to scroll again it should just be sitting there which it does okay cool so what i want to do with the toggle actions is i want to make this animation actually restart every time that on enter event is triggered so let's look at toggle actions and see how we can do that first of all let me drop down to a new line and on this line i'm just going to make a comment and i'm going to write the events that each of these keywords or actions correspond to so the first one is called on enter and that would correspond to play let's just make some more space here okay the second one is going to be on leave the third one is on enter back and the fourth one is called on leave back so i'm just spacing it out like this right now just so we can see which action corresponds to which event so the first one right now on enter is corresponding to play what that means is when we scroll up when the top of the trigger which is the top of this box once it hits the scroller start that's going to trigger the on enter event and the animation is going to play so what we can do instead of saying play on enter we can say restart okay and now let's go back and let's see what happens so we scroll down and once the trigger start hits the scroller start okay plays the animation plays but then let's try it again and see what happens so now we come back up and there we go it goes back to the beginning and restarts you see one more time there we go before we take a look at some of the other cool things you can do with toggle actions i'm actually going to make a slight modification to my css because i want to get rid of this annoying salmon color for the second div i'm getting kind of tired of salmon let's close that let's see how things look now there i think that'll be better now why don't we look at the on leave event here so another option that we can do for toggle actions is we can do reverse so we've got restart on enter and we've got reverse on leave now in order for this to work i can only have one space between these keywords so i'm going to go ahead and nudge this over alright so now restart and reverse should work so let's take a look at what happens start scrolling down okay and here's on enter and then here's on leave and it goes back so what you can see is that this range here from scroller start to scroller end this is defining where on enter and on leave are so let's try it one more time so when we hit scroller start on enter should trigger that restart and then when we hit scroller end that should trigger the reverse and it does nice let's try a different keyword for on leave another one we can do is pause let's give it a whirl so i'll save and go back to the browser and here we go scroller start restarts it and then we hit scroller end it just pauses let's try it one more time i'll go a little faster this time so restart there we go i scrolled a little bit faster because i wanted to show you that it does indeed pause so now we can try something for on enter back for on enter back let's try another keyword let's try resume and again i'm going to have to nudge this back alright so you know resume is for on enter back here so let's save and let's try it one more time alright so we start scrolling down we hit scroller start it restarts scroll around it pauses and now watch what happens as i scroll back up and we come back into that scroller zone notice it resumes so that's at on enter back event let's try it one more time so you can see it restart pause all right now when we come back down and resume and now last but not least is the final event which is called on leave back so let's try a different action for this one let's try reset and again let's get rid of all this space and let's go back to the browser so restart pause and then as we come back in resume and reset so what you can see is that as the trigger element came out of this zone here as it dropped past the scroller start that triggered that on leave back event and reset the square back to the left side of the screen and then another action we can try for that on leave back is we can try complete and by the way you can try any of these actions for any of these events oh snap so like i could have had restart for on enter and then i could have had maybe reverse for on leave and then on enter back maybe i could have had pause and on the back i could have had reset so you can kind of mix and match here and actually what i want to do is i'm going to make the duration a little bit longer so i have a little bit more time to show you all four of these actions here i'm also going to make the value for the x property i'm going to make that 1000. i just want to make the settings a little bit more extreme so that it's obvious to you what's going on here alright so let's give it a try scroll down restart pause then we come back in we resume and then complete so you saw when we came down past the scroller start again this box kind of jumped because we told it to complete at that point let's try it one more time restart pause resume and complete so i tried to go a little faster so you can see more of a jump to complete so what i'll do is i'll make another comment and i'll put in all the different toggle actions that you can use so we have play pause resume reverse restart reset complete and then none so you can use none when you just don't want any action to be triggered on an event so thanks for checking out this video on scroll trigger toggle actions if you enjoyed the video please give it a like and consider subscribing to the channel so you can be notified of new videos see you next time

Channel: The Code Creative

Views: 3,850

Rating: 5 out of 5

Keywords: javascript

Id: If_Yp4TCt9c

Length: 10min 7sec (607 seconds)

Published: Fri Oct 30 2020