JS not working in Module

[Airknighty]

Hey, I've been working on putting together a module for a new landing page and I want it to animate / change frames on mouse wheel scroll - I've got it working in codepen: https://codepen.io/Airknighty/pen/yLPjPqX

but when I transfer it over to a Hubspot Module the scrolling doesn't work at all - am I missing something? 

http://2768975.hs-sites.com/test

[stefen]

@Airknighty I copied your codepen to a new module and it works for me. Are you sure you don't have some other JS error on your page or in your script that's causing your script to not work? I'm not able to see that preview link, try sharing a public link.

[Airknighty]

Thank you stefen - I think it will be something in the page to make it not work, I have updated my post with the live link to the page: http://2768975.hs-sites.com/test

[stefen]

@Airknighty it looks like the issue is the  element <div id="scroll-image"> has a height of 0px since everything inside of it is absolute positioned. If you give it a specific height with CSS  then the mouseenter event will trigger correctly. e.g:

<div id="scroll-image" style="height: 300px;">

 Also, it's probably a great place to use the new'ish "aspect-ratio" css rule if you want it to be responsive and scale properly instead of using a fixed height but either way should fix your issue.

Additionally, you may want to use a library such as imagesLoaded to run the function after all the images have loaded instead of waiting for the entire page to finish loading.