dplgngr

I'm using ScrollTrigger with smooth-scroll.js here. Here's the site im working on: https://bit.ly/3uPs1P8 Entire js animation: https://codepen.io/dplgngr/pen/wvpPwaP Please view on browser dev tools mobile mode at (375x812), responsiveness not yet completely done. What I'm trying to achieve is that when the user scrolls they get snapped to the adjacent section (for vertically oriented sections) and then when the user reaches the bottom "Where Next?" section (horizontally oriented) the user gets snapped to each of the adjacent carousel item. Notice that the carousel item does not cover the entire width of the viewport (https://live.staticflickr.com/65535/51975827749_5af96f401a_o.png). I managed to get the horizontal scrolling but when i try to scroll down it does not snap to its adjacent carousel item most of the time. I also want to add a draggable functionality so the users can also drag through the horizontal carousel (with snapping). Here's a video of what I'm trying to achieve: https://drive.google.com/file/d/1An5IZs2PqcTKP2x_iBn86mWgwMnlimYc/view?usp=sharing

What I tried and worked is to target the a specific parent element #page. const mouseTarget = document.getElementById( 'page' ); mouseTarget.addEventListener( 'mouseleave', e => { loop.pause(); } ); I tried your suggestion above and it also worked. Thanks a lot @akapowl

Perfect! That worked, however it seems to be not working on Firefox. https://codepen.io/dplgngr/pen/YzrXQQN

This worked! Thanks! Last one, how do I pause the animation when the mouse is not on the page or user shifts to another window/tab?

What if each of the .text (in my case .map) width is set to auto with an image child element for each? How do we trigger the animation to move the panels left or right? If I set the width of .map to 100%, the animation works but if I set the width to auto, the animation is not triggered. Each of the image maps span more than the device's width. <div id="maps-wrapper" class="h-screen overflow-hidden"> <div id="maps" class="relative flex items-start"> <div class="map relative h-screen w-auto flex-shrink-0 box-border"> <img class="object-cover h-screen w-full" src="<?php echo esc_url( get_stylesheet_directory_uri() ); ?>/images/map-1.jpg" alt=""/> </div> <div class="map relative h-screen w-auto flex-shrink-0 box-border"> <img class="object-cover h-screen w-auto " src="<?php echo esc_url( get_stylesheet_directory_uri() ); ?>/images/map-2.jpg" alt=""/> </div> <div class="map relative h-screen w-auto flex-shrink-0 box-border"> <img class="object-cover h-screen w-full" src="<?php echo esc_url( get_stylesheet_directory_uri() ); ?>/images/map-3.jpg" alt=""/> </div> <div class="map relative h-screen w-auto flex-shrink-0 box-border"> <img class="object-cover h-screen w-full" src="<?php echo esc_url( get_stylesheet_directory_uri() ); ?>/images/map-4.jpg" alt=""/> </div> </div> </div>

Thank you for your time.

Nevermind