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:
Kevin Powell
YouTube
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...
25 Replies
P.S, for a timestamp: it's around 5:30 that the javascript part starts.
If it isn't working you will be probably be getting an error message in the console. Have you checked that?
doesn't look like it. Console is empty
Do you have elements with the "scroller" class in your HTML?
Are you sure that you don't have prefers-reduced-motion turned on?
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)
As for prefers-reduced-motion, using Chrome I turned it both on and off and nothing happened for either
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.
here's what my code and the console looks like after this
It looks like the node list is empty
im quite new, so do forgive me
does "length: 0" when i expand the nodelist in the console mean that it's empty?
you should see something like this
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?
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
"<script src="main.js"></script>" inside the <body> tag
right before the closing body tag or at the beginning?
at the beginning
OK, so that is probably the issue.
Ah, let me try putting it at the end
it worked. Thank you so much!
Great. You can add the JS file at the beginning within the <head> tags but you need to add the "defer" attribute.
<script src="main.js" defer></script> This instructs the browser to not load the file until the html has fully loaded
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.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
it is also important to specify that
defer will execute the scripts in the order that they show in the html
async doesnt guarantee that order
and works closer to what you describedOK, 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.
i fully agree with that
also, i dont see
'use strict'; on the file
you should use it, as it prevents dumb mistakesAn alternative is to use
type="module" on the script tag as that both defers it and automatically uses strict mode.and dont you have to export stuff for it to work at all?
I don't think so. I just did a test and the only contents I put in the js file was a simple alert.
that is interesting
if it works, then it works