Change direction of timeline based on mouse position

[BalkanBrothers]

Hello everyone, I would like to change the timeline direction from left to right and right to left based on the position of the mouse but I can't seem to get how to do it. I saw this Codepen: 

See the Pen OKNadm by GreenSock (@GreenSock) on CodePen

 and it works but mine doesn't.

 

Any help would be great. thank you in advance

See the Pen ZEQyaJY by dongepulango (@dongepulango) on CodePen

[ZachSaucier]

Hey BalkanBrothers and welcome. 

 

How are you expecting the hover effect to work? The slides are animating to start. What happens when it gets hovered? Does the original animation stop? Are you wanting to hover the left side and have it go left and the right side go right? Some sort of scale where it's always moving in one directly or another unless the mouse is perfectly in the center? More details would be appreciated.

[akapowl]

@BalkanBrothers

 

Is this the sort of effect you wanna achieve?

 

See the Pen 86230786f141d29e61b37aeabf17433b by akapowl (@akapowl) on CodePen

 

Note that it is not clean at all - especially, when moving from one side to the other, there is a huge jump. 

Made this just for clarification of some sort for the effect you might want.

 

There probably is a way better way to to this with stronger use of GSAP's Utility Methods, I guess.

[OSUblake]

That wrap function isn't needed anymore. gsap has one now.

https://greensock.com/docs/v3/GSAP/UtilityMethods/wrap()

 

[rodrek]

Hi all,

 

Sorry to bump this old post up. @akapowl's answer is exactly what I'm looking for a slider I need to build. There's this jump between sides that I can't seem to fix. Anyone willing to have a go at it?

 

Thanks in advance

[GreenSock]

Hi @rodrek. Thanks for being a Club GreenSock member! 

 

Are you asking how to fix the CodePen that @akapowl posted? Or did you have a different minimal demo you could share? 

[rodrek]

That's right, I'd like to fix the jump that happens when hovering the middle of the wrapper. You can see this on the CodePen that @akapowl posted.

 

[GreenSock]

I'd probably take a very different approach:

1. Create an infinitely repeating timeline. There's a helper function in the docs for this, but you can do it however you want. 
2. Hook that up to a simple mousemove/pointermove event handler that alters its timeScale based on the position in the viewport. Negative timeScale goes in the reverse direction. 

See the Pen poeppvM?editors=0010 by GreenSock (@GreenSock) on CodePen

 

Is that what you're looking for? 

[rodrek]

Awesome! That's exactly what I needed.

 

Thank you so much for your help

[akapowl]

Hey @rodrek

 

I actually fixed (and made some slight changes - like getting rid of jQuery -  to) that example myself just the other day @rodrek

 

Although I would suggest going with @GreenSock's version since it is much sleeker codewise, here is my working version

 

See the Pen 56a209d1e67e6e2fd56fe10d0b5fdafe by akapowl (@akapowl) on CodePen

[Aday]

Hello to all.
I have an issue and I can't resolve, it's basically to do interactive with "text"class under of .left and .right. Somebody have any cool idea for fix this stuff?

Thanks in advance. ☺️

[akapowl]

Hey @Aday

 

With Jack's approach there is no more need for the overlaying left and right divs, so you can just remove those and access the "text" divs however you like (here with a simple hover).

 

One more reason, I recommend using his approach.

Welcome to the forums  

 

See the Pen ee0f82179345755d26dd7c4b09fe3997 by akapowl (@akapowl) on CodePen

 

[Aday]

many thanks! 😁

[dplgngr]

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>

[akapowl]

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.

 

See the Pen NWaqRmG by akapowl (@akapowl) on CodePen

[dplgngr]

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?

[akapowl]

 

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();
  });

 

 

[dplgngr]

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

 

 

[akapowl]

Maybe try adding the eventListener to the body instead

 

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

 

[dplgngr]

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