[ScrollTrigger snap on each section (vertical) & snap on each carousel item (horizontal)]

I'm using ScrollTrigger with smooth-scroll.js here.

 

Here's the site im working on: https://bit.ly/3uPs1P8
Entire js animation: 
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

 

See the Pen wvpPwaP by dplgngr (@dplgngr) on CodePen

[Change direction of timeline based on mouse position]

16 minutes ago, akapowl said:

Maybe try adding the eventListener to the body instead

 

  document.body.addEventListener("mouseleave", (event) => {
    loop.pause();
  });

 

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

[Change direction of timeline based on mouse position]

2 hours ago, akapowl said:

 

You shouldn't need to worry about the changing of tabs, because by default browsers will throttle things anyways.

If you want to pause the animation when your cursor leaves  the window, you can add an eventListener of your own. Something like this maybe:

 

  document.addEventListener("mouseleave", (event) => {
    loop.pause();
  });

 

 

Perfect! That worked, however it seems to be not working on Firefox.

See the Pen YzrXQQN by dplgngr (@dplgngr) on CodePen

 

 

[Change direction of timeline based on mouse position]

1 hour ago, akapowl said:

Hello @dplgngr

 

Event then it still appears to work just fine for me.

 

Maybe you just need to wait for the images to be loaded into your page properly before you run the code for the loop.

 

If it doesn't help, a minimal demo of yours would be really helpful for helping you.

 

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?

[Change direction of timeline based on mouse position]

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>

[Animations don't start again when page is refreshed]

On 9/26/2021 at 11:07 PM, Cassie said:

Hi there!

 

I've taken a look but I can't recreate this -  Could you create a minimal demo, including the least possible amount of code necessary to show the issue.

I'm afraid we don't have the resources available to debug staging sites or look through code in demos that aren't properly set up.

Thanks.

 

 

Thank you for your time.

[Animations don't start again when page is refreshed]

Nevermind

See the Pen PojxZqR by dplgngr (@dplgngr) on CodePen