GSAP Scroll Trigger

[00:00:00]
>> Matias Gonzalez: So what is scroll trigger? Here I have a simple animation, it's just a fade in. And I want my animation to happen when the element is on view. So sometimes you have websites where as you scroll things will animate in, so they will be triggered by your scroll. So that's what scroll trigger is for, because right now this animation just plays whether or not it's on view.

[00:00:29]
So if I wait and scroll, it will already be there. Let's go into the next exercise and play with that trigger. Going to go into the index. OK, so here is the description section. If I go ahead, this is the section, so I want to trigger this animation when it's on view. The way to do this is that on the timeline, we can actually pass a property called scroll trigger.

[00:01:18]
And this will allow me to actually add a bunch of options on how I want the animation to be triggered. So this is actually a plug-in that we need to import. So let's import scroll trigger from GSAP and let's say GSAP.registerPlugin scrollTrigger. So now I can use this plug-in to trigger my animations when they are on view.

[00:01:53]
So how does the trigger work? Well, I need to tell the trigger which element I am waiting for it to be on view. So in this case is this title here, so I'm going to grab the H2, so I'm going to say the trigger for this animation is the H2. And I'm going to tell it where the animation does it start. We're going to see what this property is about soon, but I'm going to say top and top.

[00:02:31]
And also, since I am starting to add this animation, I want to be able to debug it, so I want to add some markers to help me debug what's happening here. So the way it works is when this marker reaches our element, it will animate our element in. It will play the timeline whenever we pass this line right here.

[00:03:09]
So probably this is like too late, so I want to be able to move this thing around and the way to do it is actually with this start property. So this first word refers to the element that we're using as triggered, and the second word refers to a breakpoint on the screen. So let's play with it to see what's going on.

[00:03:35]
If I go and change the second one from top to center, it would actually put my marker on the center of the screen, so this animation will trigger when the center of the screen passes the start of the element. So that way I can exactly control when animations are being played. Let's say that now what I want to do is for it to fade out whenever I get out of the container.

[00:04:11]
So the way I can do that is by editing this scroller end property and let's edit it by saying the end is at the bottom of the element, so here, and at the also the center of the screen. So it will move my square end into the center of the screen. And whenever I go over this final line, the end animation will play.

[00:04:43]
In this case, nothing is really happening because we need to actually tell GSAP what we want to do. Do we want to revert the animation? Do we want to play it again? Do we want to completely reset the state? So how to do that is actually with the toggle actions. So let's put play, play, play, play. So we have four keywords here.

[00:05:17]
And how they work is the first one will tell us what happens when I first enter the container. We'll play the animation. The second one will tell us what happens when I leave the container. So in this case, since the animation is already played, nothing will happen, but maybe I can revert. So if I go again, I would enter and it will play.

[00:05:54]
I would get out, it will break. Oh, reverse. So the first word is when we first enter, it will play. The second word is what happens when we leave the first time, it will reverse the animation. The third word is what happens if we enter again but going back, so it will play again and maybe we can reverse again when we leave again.

[00:06:23]
So play, reverse, play, and reverse again. We have different options. There is like pause so we can leave the animation as is, so it will fade in and then it will pause, so it will just stay like that. And then also we can reset, so you know when you go through a page and then you scroll back up and then you go again and you will see all of the animations playing again.

[00:06:51]
So we can actually reset the animations whenever we are not in there, so it will completely reset the animation and it will just play again and then it will reset the animation. Of course we need to move these markers maybe again to the top of the screen or somewhere where I don't actually see that. So maybe this is a nice configuration where I can play the animation.

[00:07:45]
What's happening here, so I can play the animation and then I can reverse it and then play again and then maybe reset, but we can play with the breakpoints in order for that reset to not be visible to the user, of course. So I want to add one last thing to this, is that I added some little decorations here using SVG, and I want to be able to draw these things also on the animation.

[00:08:25]
So GSAP has another plug-in that's really, really cool, which is DrawSVG. And it will allow us to actually do what it says, draw SVG. So we can just, as we can see, I have some elements here that are just like SVG paths, so I can grab all of these paths and actually tell you of, hey, draw the path on the screen.

[00:08:56]
So similarly to how here I'm targeting an H2, I can say timeline.from, I can target every path on every SVG element that I find, and I can sell DrawSVG. And what this hotel is, start with every element being 0% drawn and then go ahead and complete the path. And let's also add a stagger because we have multiple paths.

[00:09:34]
So I go ahead and play the animation, it will draw my elements in. Any questions so far with timelines, scroll triggers, and raw species? Yes. With the start and end for the scroll trigger, could you do an offset? Could you tell it like center, but then -10 pixels or something? Yeah, you can. Let me remember how it was because you have percentages, for example, so you can tell, hey, I want it to be at 40% of the screen, so you can do that.

[00:10:14]
I don't remember if there's a way to sell center plus 10 pixels. Let me try it. No, I think it doesn't. But I usually, it for me it's usually good enough to use percentage values to edit that and point to the right section of the screen. One thing we haven't talked about is using ems. So let's actually go back into the timeline.

[00:10:50]
This design here scales with the screen, not very well apparently, but as I can see like this dot here is scaling with the font, so there are different ways to achieve scaling in general, but what I like to do is using ems. So ems is a unit that is relative to the font size of the container that you're in.

[00:11:24]
So let's go into the timeline starter again and let's go into the little dots and see how I'm using ems. So if I were to use like pixels, for example, for the height I would use, I don't know, 10 pixels or 15, it would just not scale with our design. Like you will, it will stick to the same exact size.

[00:11:51]
We might, for example, say, OK, let's use viewport width, but then if we have a breakpoint that changes our font size, then we need to also manually add that width breakpoint to our height. So it's going to be like we're always going to be chasing what feels more or less relative. So if I want to make some value relative to the font, just using ems is usually the easiest way.

[00:00:00]
So no matter what we do, every time we change the font size of this element, this dot is going to scale correctly.