Feb 24, 2022 4:01 PM - edited Feb 24, 2022 5:00 PM
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?
Feb 24, 2022 4:47 PM
@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.
Feb 24, 2022 5:01 PM
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
Feb 24, 2022 7:49 PM - edited Feb 24, 2022 7:52 PM
@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.