Hi,
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 Webflow Sticky Sections - Webflow 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
https://rahats-spectacular-project.webflow.io/
Here is my site Read-Only: https://preview.webflow.com/preview/rahats-spectacular-project?utm_medium=preview_link&utm_source=designer&utm_content=rahats-spectacular-project&preview=68030dcb73992d39d83fbcd59385a7e0&mode=preview
(how to share your site Read-Only link)
