Following "infinite horizontal scroll animation" tutorial from Kevin on Youtube; not working (help!)

So, I was following everything in this video: https://www.youtube.com/watch?v=iLmBy-HKIAw&t=530s&ab_channel=KevinPowell
And everything was working right until the javascript part came in, where for some reason the "data-animated" attribute isn't being added. Here's screenshots of my code as I followed it from the tutorial:

YouTubeKevin Powell

Create an infinite horizontal scroll animation

Did you know I have courses? Both free and premium ones: https://kevinpowell.co/courses?utm_campaign=general&utm_source=youtube&utm_medium=infinitescroll

Infinite scroll animations for things like logos are relatively common these days, but there is a lot that we can do incorrectly when making one, so I decided to try and make one that respec...

KivoryOP•10/3/24, 1:55 PM

P.S, for a timestamp: it's around 5:30 that the javascript part starts.

Chris Bolson•10/3/24, 1:57 PM

If it isn't working you will be probably be getting an error message in the console. Have you checked that?

KivoryOP•10/3/24, 1:58 PM

doesn't look like it. Console is empty

Chris Bolson•10/3/24, 2:02 PM

Do you have elements with the "scroller" class in your HTML?

Are you sure that you don't have prefers-reduced-motion turned on?

CChris Bolson Do you have elements with the "scroller" class in your HTML? Are you sure that ...

KivoryOP•10/3/24, 2:06 PM

here's the html as followed from the tutorial (yes I closed the li tags I just cropped it out of the screenshot because some of it is private)

KivoryOP•10/3/24, 2:06 PM

As for prefers-reduced-motion, using Chrome I turned it both on and off and nothing happened for either

Chris Bolson•10/3/24, 2:08 PM

You could add some console logs to check firstly if you are calling the addAnimation() function and then to check that you have any scrollers.

CChris Bolson You could add some console logs to check firstly if you are calling the addAnima...

KivoryOP•10/3/24, 2:10 PM

here's what my code and the console looks like after this

Chris Bolson•10/3/24, 2:10 PM

It looks like the node list is empty

KivoryOP•10/3/24, 2:12 PM

im quite new, so do forgive me

does "length: 0" when i expand the nodelist in the console mean that it's empty?

Chris Bolson•10/3/24, 2:12 PM

you should see something like this

Chris Bolson•10/3/24, 2:13 PM

From your image capture it clearly shows that there is an element with the scroller class so there must be something else going in.
How are you including the JavaScript file?

Chris Bolson•10/3/24, 2:14 PM

If the JavaScript is being loaded before the HTML has finished loading the JS won't be able to find the elements as it has already run

KivoryOP•10/3/24, 2:14 PM

"<script src="main.js"></script>" inside the <body> tag

Chris Bolson•10/3/24, 2:14 PM

right before the closing body tag or at the beginning?

KivoryOP•10/3/24, 2:14 PM

at the beginning

Chris Bolson•10/3/24, 2:15 PM

OK, so that is probably the issue.

KivoryOP•10/3/24, 2:15 PM

Ah, let me try putting it at the end

KivoryOP•10/3/24, 2:15 PM

it worked. Thank you so much!

Chris Bolson•10/3/24, 2:16 PM

Great. You can add the JS file at the beginning within the <head> tags but you need to add the "defer" attribute.
This instructs the browser to not load the file until the html has fully loaded

Chris Bolson•10/3/24, 2:17 PM

Otherwise, as you have seen, the JS parses the DOM before it actually has any content so, in your case, "scrollers" is empty as they didn't exist when the JS checked the DOM.

CChris Bolson Great. You can add the JS file at the beginning within the <head> tags but you n...

Ἔ

ἔρως•10/3/24, 2:24 PM

this is not quite accurate. the html is parsed while the script is downloaded, and the script is executed only after everything has loaded or failed loading

Ἔ

ἔρως•10/3/24, 2:25 PM

it is also important to specify that will execute the scripts in the order that they show in the html

Ἔ

ἔρως•10/3/24, 2:25 PM

doesnt guarantee that order

Ἔ

ἔρως•10/3/24, 2:26 PM

and works closer to what you described

Chris Bolson•10/3/24, 2:26 PM

OK, but the key thing is that the JS is trying to find the elements before that they exist and that is what is was causing the issue.

Ἔ

ἔρως•10/3/24, 2:27 PM

i fully agree with that

Ἔ

ἔρως•10/3/24, 2:28 PM

also, i dont see on the file

Ἔ

ἔρως•10/3/24, 2:28 PM

you should use it, as it prevents dumb mistakes

Chris Bolson•10/3/24, 2:30 PM

An alternative is to use on the script tag as that both defers it and automatically uses strict mode.

Ἔ

ἔρως•10/3/24, 2:31 PM

and dont you have to export stuff for it to work at all?

Chris Bolson•10/3/24, 2:37 PM

I don't think so. I just did a test and the only contents I put in the js file was a simple alert.

Ἔ

ἔρως•10/3/24, 2:45 PM

that is interesting

Ἔ

ἔρως•10/3/24, 2:46 PM

if it works, then it works