Streaming live at 10am (PST)

Need help with custom animation, appreciate any help

I’m having trouble with this custom animation, I would greatly appreciate any help. I am basically trying to cycle through images upon scroll. 4 images (labeled hide1-4) are placed in a div with absolute position so theyre on top of one another. My idea was to change the z index after a specified scroll value using -
document.getElementByClassName(‘hide1’).style.zIndex = “1”;
document.getElementByClassName(‘hide2’).style.zIndex = “0”;
document.getElementByClassName(‘hide3’).style.zIndex = “0”;
document.getElementByClassName(‘hide4’).style.zIndex = “0”;

(so only the first image would show and z index values would change upon diff scroll values)

That, however, does not work, and I’m not quite sure why.

I then thought of trying -
document.getElementByClassName(‘hide1’).style.display = “block”;
document.getElementByClassName(‘hide2’).style.display = “none”;
document.getElementByClassName(‘hide3’).style.display = “none”;
document.getElementByClassName(‘hide4’).style.display = “none”;

(basicaly get rid of them after each specified scroll but that doesnt work either)

For extra reference, I cloned this and am making some edits to it.

I’m not sure if I’m even selecting the elements right at this point.

I’d highly appreciate any help.

Here’s how the site looks so you can see the scroll functionality

Here is my site Read-Only:
(how to share your site Read-Only link)

@rando welcome to the Webflow community.

Change all of your:




You’re missing the “s” in “Elements” which is throwing this error:

You can see the scrolling console log above, so that is working.

Give that a shot and republish.