Animate an Image Sequence

[00:00:00]
>> Matias Gonzalez: All right, now that we have a frame number, we can go ahead and look for that frame into our images. Again, here, we'll install like every frame as a key value. So we can check like const image, it's going to be images.frameNumber. Now this might not be defined because maybe we're asking for a frame that's not being loaded yet, so we want to check that this exists, so if the image doesn't exist, just do an early return.

[00:00:39]
And then we can just draw whatever image we just selected. So in this case it's one image on the middle of the animation. Okay, so now I want to animate this progress value from 0 to 1 as I scroll. So as we saw before, GSAP has utilities to achieve this using the ScrollTrigger. So as we scroll, we are going to just animate a value.

[00:01:09]
So let's go into the page inside of the useGSAP hook and do create a timeline, so const timeline is equal to gsap.timeline. We're going to actually put a ScrollTrigger in here, so scrollTrigger. Let's check that we're actually importing the ScrollTrigger plugin, so ScrollTrigger.

[00:01:59]
And then the trigger for this sequence is going to be this div right here that already has like 400 viewport height and we're going to use that as the trigger so trigger reference.current. And then I'm going to start this sequence when the top of my viewport is at the top of the container, so the start is going to be top, top, and then I'm going to end the sequence when the bottom of my screen is at the bottom of the container, so end is going to be bottom, bottom.

[00:02:44]
Then I want this animation to run attached to my scroll, so let's just put a scrub: true. And I will have a timeline that will run as I scroll. We do need to animate a value that we're going to pass down into a component. So this time we're not animating any CSS property or variable we're just animating some object that we need to pass down.

[00:03:26]
So the way to go about that is that you can create a reference, for example, so const progressRef is equal to useRef and start that as 0. So GSAP can actually animate like anything that we want so we can actually animate this reference. So let's do timeline.to and let's target our reference.

[00:03:58]
And let's instead of like animating like opacity, we can animate the current value. So let's actually leave at this to understand what's happening, I'm going to say onUpdate and I'm going to do console.log progressRef.current. So every time I scroll, this reference is going to be animated and GSAP is going to animate the current property, so it's actually going to animate the value inside of that reference.

[00:04:43]
So if I save and I scroll, I should see that as I scroll up it's getting to 0 and then I scroll down and it gets closer and closer to 1. So now we can use this value on a different component to actually trigger the animation. It's actually grab the progressRef and say progress is equal to this reference.

[00:05:16]
Let's now go into the scroll sequence and type the property of progress. Instead of being a number, it's going to be React.RefObject with the number inside. So right now, instead of directly referencing the progress, I can just reference the progress.current value. So if I refresh and I scroll, I can see how it progressed.

[00:05:55]
We do have a little issue, and is that the previous frame is not being cleared because by default every time we render into a canvas it already has something drawn and it's not going to clear that by default. So I need to tell the canvas on every frame, hey, delete every pixel that you draw before and just render new pixels into the screen.

[00:06:29]
So the way we do that is we grab the context of our canvas so context and we said, clear rect. And this tells the canvas, hey, grab this coordinates and just delete whatever you have on them so it's I'm going to clear from the corner of the canvas all the way to the complete width of it and then from also the top of the canvas to the complete height so it's going to clear the canvas completely.

[00:07:09]
I just need to contrast here. Okay. So now if I refresh and I scroll, I can see how the sequence progress as I scroll. Delete that console log so that we can continue working. Let's animate these sections in. I'm going to hide them by putting opacity 0 in them. Well let's delete this opacity 100.

[00:07:51]
So let's start the sections hidden, and then I want to reveal them at some point in this timeline. So let's actually create a more interesting timeline instead of animating directly this value into one. I want to first animate into, I don't know, 0.3 maybe. So I want to get into like a first shot that I like.

[00:08:29]
Like this. And then what I'm going to do is I'm going to hide this title section and I'm going to reveal this cameras section, so. Now I said timeline.to I'm going to target my title section and I'm going to hide that section autoAlpha: 0. So autoAlpha is similar to saying opacity.

[00:08:56]
The difference is that when it reaches opacity zero, it will add display: none to the object. So you, it will fade it out and then we'll just remove it so that we don't have like weird selectors out there. And then we also want to animate the cameras section in so autoAlpha: 1. So let's see how that looks like.

[00:09:29]
So we first do our first movement, then it will fade out and then it will fade in. So let's time this a little bit better, I want this to happen like much earlier, for example. By the way, something we didn't cover, if we put a number in here, this number is going to be like an absolute position on the timeline.

[00:09:53]
It's not going to, it doesn't going to care about like if you have like other animations before it's just going to grab the timeline and put this animation at 0.2 seconds. And for the cameras one maybe I want to reveal the camera section as I'm getting closer to this camera. So let's actually connect these two at the end by shifting it a little bit.

[00:10:44]
So we will first fade out and then it will fade in as it's moving. And then we can add another step into the timeline that will animate our reference into one. So we'll just finally animate our progress to complete the progress. So we'll first go into the first checkpoint and then you will continue the animation until the end.

[00:11:27]
It's actually adjust this number since probably 3.5. Okay. Now there's some concept that's sometimes weird to understand is that let's say that I want this first part to be faster and then this one to be a little bit slower. Usually, when we edit animations we talk about seconds, but here we are scrolling, so it's kind of weird to talk about seconds because it's tied to the scroll, it's not tied to any timing.

[00:12:01]
So the way that GSAP works is that it will just take the entire duration of our timeline and it's going to just attach that to the scroll. So if our entire animation is like 10 seconds long, like 1 second is actually going to be like 1/10 of a scroll, so as we add steps to our animation like, the other steps are going to get compressed.

[00:12:29]
But we can just use, instead of thinking on seconds, let's just think of relative units that will get add up and then it will get divided on the entire scroll, so that is like the hardest part to like get your head around at the beginning, but let's actually make this duration, I don't know, 0.3.

[00:13:14]
And then maybe this one, since it's a little bit larger, 0.4. So by adding numbers we're actually controlling how much like every step takes. Let's make this one, for example, way faster. And I want this to happen like way earlier, so there. Cool, let's actually also fade out the cameras.

[00:13:54]
So right after we animated this, we animated in the camera, let's animate it out again, let's just put some delays so that we have some space where the section's going to be visible. So the camera section's going to animate in and then wait there for a couple of scroll units and then fade out and then it will continue with the animation.

[00:14:34]
And let's finally add the last section with information, the wheels section. Then again, let's just reveal that. And let's actually tie it up. Let's move it a little bit before, so that it starts before the scrolls end. So 0.1, maybe. So hero fades out, then we reveal the section as we end up scrolling we waste some time and then we continue the progress of the animation and we reveal the final section so that way we can not only animate one value that like we can reference in a different component to progress something like a scroll sequence and we can like reveal information as we go.