Follow Scroll

[00:00:00]
>> Matias Gonzalez: We saw how to trigger animations when they are on view, but sometimes on some websites I want my animation to actually follow the progress of the scroll so as I scroll, the animation will play and if I scroll back I want it to play back and I want it to be like exactly tied to my scroll. So let's go into the next exercise called follow scroll.

[00:00:28]
I have added this little animation here that just automatically plays for now, and I have like a little ruler to indicate like the scroll program for us. Let's go ahead and open the exercise, let's go into the starter. So as you can see we have our animation that plays automatically. And what I want is when this element is on view I want this element to like stick on the view and place this animation as a scroll and if I scroll back I want this animation to play in reverse so first let's actually add a scroll trigger.

[00:01:23]
So scroll trigger. And we want this animation to be triggered by this container, so since we already have a reference, we can just use the reference directly. The current. Also, let's have the markers. True and then let's say that it will start at the top. And then it will end when the bottom of the screen reaches the end of this container, so, and.

[00:02:11]
But um. Awesome. And also what I'm going to do is, right now this is like one screen, uh, height, so I will make it like 300 viewport heights for example. So that I have some actual space to scroll. So right now this is very similar to the previous example. As soon as this is on view, it will just play the animation. So what I want to do is actually it's to follow my scroll.

[00:02:49]
So there is a property on the scroll trigger, um. Actually, I messed this up. Um, this should be the trigger property inside of scroll trigger and then these are all properties inside of scroll trigger. Here you go. OK, so we are playing our animation as soon as we enter. So I want my animation to follow my scroll and there is a proper tool called scrub for that.

[00:03:28]
What this will do is, my animation will exactly follow my scroll progress. And as I can see like it is playing, it is working, but like it's getting away from the screen. I just want it to be like pinned on the screen, so. We could use something like CSS like sticky. Um, sometimes, like, if we, if you have more elements on the same div, you might have problems with sticky, so GSAP already has a solution to stick a div to the screen.

[00:04:13]
And it's a pin, so if I said like pin to true. Um, sorry, what, what, how pin works is, we need to tell GSAP like what element do we want to pin into the screen. So in this case it's this div that I have right here. I'm going to add an outline to debug like what this element is actually, so, border on the side of the border red. Classic debug border red.

[00:04:41]
So I have this element, this is what I want to get pinned into the screen, and then this larger container is like the scroller. So let's actually add the class name to it called uh Pin. And let's target this element. On the pin property. So if I refresh as soon as the animation start this element is going to stay on the screen, it's going to play our animation and as soon as it ends it's going to like unpin it from the screen so this way we can like tie animations to the scroll and then when it ends release it from our viewport.

[00:05:38]
Also notice how my animation is following exactly my scroll. Maybe I want to add like some easing to it to I'll be like one to one. So what I can do here is instead of saying true I can like add a number and what this will do is actually ease a little bit more the progress. So even if I'm like moving too fast it eases in and out the movement of the animation.

[00:06:08]
So this is useful to like move things into the screen or as we like, scroll on the website. When you are building all these marketing websites, are they typically backed by a CMS for the more dynamic content? Um, usually, yes, especially, if I'm working with like some 3D stuff, I want to be able for, to give the opportunities for the artist to iterate their models and assets until the last minute and usually the flow was like, Slack message with the files and then connect and then hey it's not working and then like over and over and just you lose a lot of time.

[00:06:52]
So usually what you want to do is find a way for whatever artist or designer you're working with to just give them control and you're just adding the tools in there, um, it can be a CMS or it can be like another type of configuration tool. Um, actually there's one on the resources here, it's called Leva. This one is really, really useful, especially for when you are creating like sandboxes.

[00:07:23]
Is basically let us create this little panel with different settings and configuration so we can play with values um let's go and see an example of how can that work. So let's go back into this scroll trigger experiment and here we have like this animation that I have at the start. Let's say I'm not really happy with the timing of it and I do have someone in my team that actually knows a little bit more about motion.

[00:07:55]
And I want to give that person the opportunity of like tweaking this animation but without having to learn how to use GSAP. So what Leva will allow me is to actually import like different controls that I can add to the UI so I'm going to import use controls. From Leva and here I'm going to use this hook. And I'm going to let's say we want to tweak the stagger timing.

[00:08:39]
So I'm going to create a property called a stagger. And I'm going to set its default value to 0.1. And then I can see that on my screen I have this new pop up here with like a value that I can like change as I whatever I like. Uh, maybe I don't want things like negative values for some reason or I just want to limit the range, so we can do that also, we can set like a min value of 0 and a max value of 1, for example, uh, we can also set a step.

[00:09:22]
If we don't like to have like infinite precision, so we can say, hey, the step is 0.01. So it will add a slider since we have a minimum and maximum and now we will have actually also a step so it will move every 0.1 values. So now I can grab this value and connect it to the animation. So I can just do const, stagger and as I can see this value is just a number and this is going to react whenever we change that panel on the UI um to this latest change so I can just grab this stagger value and connect it to our animation.

[00:10:12]
And as I can see, nothing is really happening and the reason for that is that when I'm using the use GSAP hook, GSAP is going to first create our animation and then it's not really going to do that every time the component re-renders, it's just going to stay as is, so we need a way to tell GSAP, hey, whenever this dependency changes actually rerun this, these animations.

[00:10:43]
So I can have dependencies and it this works similar to how useEffect works, so I can add the stagger dependency. In here and every time this value changes it's going to rerun these animations, um. We have a problem here is that if we rerun these animations like over and over, we are like splitting text and then we are adding different things so it will completely break our experience as we can see, because we need to tell it, hey, if a dependency changes actually revert all of the animations that you already added so that's what this third property is for which is revert on update.

[00:11:29]
So I'm going to say to GSAP, hey, if a dependency changes, actually revert all of the animations and do whatever you did in here. So if I go again, I can like change the values and I can see like the new animation being run, so I can just send this link to someone and tweak like whatever parameters or color timings or whatever we want and then that person can get back and like give me the right values for it, yes.

[00:12:03]
Will all markers, debug players and controls be removed automatically on build? Uh, on build, no, you actually have to remove all of those on build by yourself, um. So yeah, you, that's something that you will need to do is actually like someone will send you the final value and then you will just delete all of the hooks and then go and pull like the final value in here um you can also hide the Leva panel but I would prefer to just delete the hook just to not add the library to the bundle size.

[00:12:42]
Um, yes, with a use case, so this is kind of like a simplified dev tools for your designer, let's say, right? That's kind of what you're using in this use case. Would it make sense to like write this back to a CMS or like only show these controls when you're logged in and use it as a CMS type like changing values or is this just kind of a debugging tool more or less?

[00:13:07]
Yeah, this is more like a debugging tool and just to like play with some things and usually that person will need to like send you whatever values it has configured, um. But it is really, really useful also like to actually debug like for you it's also really useful when I was like doing all of these fluid simulations I need a way to like debug different views of the rendering so Leva was like super useful because you can like add not only controls for numbers but you can have like toggles so it's like I can like view different things and maybe I can also enable the markers using the toggle with GSAP, for example.

[00:13:51]
Um, so this is like something you can like use for yourself on development. I guess if you're like writing some sort of framework or something that is like you're writing documentation or like functioning demos or something, I guess you could, yeah, it's really, really useful for all of those things, um. And then again, if it's something more like an asset or something, then I would like just use a CMS to like just give complete control to other artists to edit the final version of it.