Load Images for Scroll Animation

[00:00:00]
>> Matias Gonzalez: So we got one image in place. Now we actually need to go and load all of the images and also update what image we are showing based on the scroll. So let's first get the scroll part solved, so we will need a number that goes from 0 to 1. Let's just create a progress constant, so const progress is equal to 0.

[00:00:38]
This number is going to go from 0 to 1, and as we progress we're going to draw a different image. And now what we are going to do is just create a for loop to load all of the images inside of a loop and store them in an object. So const images, it's going to be an object.

[00:01:00]
And let's just create a simple for loop. I already know how many images do I have, so let's check, that's 300. So I have 300 images. And then for every image, I'm just going to go ahead and create this image object. And let's actually transform this into a template literal because since I have all of these zeros, I actually need to transform this index and add all of the zeros, so this would be, this can be achieved using padStart.

[00:01:52]
So I can do index.toString, padStart. So I'm going to store this into a variable to debug what's happening. So const imageNumber equal to this. What padStart is going to do is, let's put just 2, for example, or like 4. And let's log it. And I need to tell what it will fill.

[00:02:30]
Basically this is a utility to like add numbers before or any string before another string, so I can get like a fixed string value. Let's add a 0 here. So what this is going to do is like it will add the necessary amount of zeros so that our string contains exactly 4 characters, so it's a useful utility to create this type of strings.

[00:03:04]
So now that we have our image number string, let's actually compose this image source. And let's just do an early return so that we don't have all of the errors. So I should see on the network tab all of the images being loaded, so if I filter my image here, let's close this, I can see all of the images being fetched at once.

[00:03:44]
So of course the first image is, it starts at one, so I'm going to go ahead and add one to this index, so it's going to be index plus one. So now I'm just loading all of the images at once. What we can do is when the image is loaded, let's store it into this object. So this object is going to have like a frame number and then it's going to have like the image here and like for every frame we're going to have like one key and one image loaded.

[00:04:25]
So then we can reference that when we draw the image into the canvas. So we can say image.onload and we can grab this images object, we can grab also the frame number so it will be index plus one and let's set that to the image. And let's make TypeScript happy by typing this, so this will be a record of numbers and images, so it's literally HTML images that we're creating with this.

[00:05:25]
So if I log this, just one second. If I log this, I'm going to first don't see anything, probably because I'm logging before like having the image. So as I can see, I have every single frame and I have one image per frame. Yes, would you want to use the useRef for this or not?

[00:05:48]
I mean, all of this is happening inside of useEffect, so it's going to run just once, so yeah, if I need to reference these images outside of this useEffect, then yes, I would just use a ref. Sometimes also, one useful thing to do is just create the object outside of the, let's say I want to access this thing globally, I can just const images and just have it there or maybe export it and reference it in like another place that's also okay.

[00:06:27]
But in this case we are just going to access these images inside of this useEffect so we are only going to create this once. So we already have all of the images loaded in place, let's actually draw on the corresponding image into the canvas. So we need to select our image, maybe we can use this progress that we saw.

[00:07:04]
So this progress is going to go from 0 to 1, we are going to animate that later, and we want to remap this progress, we want to remap this value from 0 to 1 to 1 and 300. So when the progress is zero, we want to grab the first frame and when the progress is 1, we want to grab the frame 300.

[00:07:44]
So how can I do that is basically I can do a remap. So const frame number, it's going to be a remap utility. Again, this is a math utility that we can use to remap values from one range to another. So we can grab a value that goes from 0 to 1 and make it go from whatever to whatever and just grab a point in the middle of that.

[00:08:23]
So the first value of the remap is going to be the progress. Then we put the minimum input, so where it goes first, so 0. The maximum of the input and then the minimum of the output. So since our frame starts from 1, let's put 1 and then 300 for the maximum. And we can maybe round this because we just want to get like one integer, so transform this into a let and let's just do a Math.round for this.

[00:09:12]
And let's just log it. So if I put 0.5 in here, I should get a number that's on the middle. Let's just delete the other console logs. Okay, and I get 151.