[How to get the changing offset position of an element during tweenMax]

I have a horizontal gallery that is positioned centered on the page. I have a left and right button which slide the gallery left and right using TweenMax timeline on mouse hover. The right button is hidden on page load and I want to show the right button once the gallery reaches a certain offset position. If I use Jquery scroll I can detect the changing offset position of the gallery but if the user hovers on the button I can't get the changing offset position of the gallery while the gallery is tweening. How can I get the moving offset position of the gallery during mouse hover?

 

See the Pen aNLEZL by anon (@anon) on CodePen

[How to run timeline continuously on mouse hover]

Oh, OK. Instead of moving -=200px, you should move the entire width of the strip minus the window width. When it reaches the end of the strip (or, more precisely, when it reaches the end of the tween which happens to be the length of the strip - the window width), it will just naturally stop. With the right button you can just call reverse().

 

See the Pen JXrYoX?editors=0010 by sgorneau (@sgorneau) on CodePen

Oh, thanks and really sorry! I just had a rubber ducking moment. I just realised that's what I needed to do right before you commented. Thank you. 

[How to run timeline continuously on mouse hover]

Hi,

 

Thank for the reply. Apologies for being unclear. What I should've said is this long div is actually a gallery containing a set of list items which are thumbnails. On left button hover the horizontal gallery will slide left non-stop until you reach the end of the ul. I also have a right button to scroll right but I didn't put it in my codepen example. My problem is when you hover on the left button the gallery ul will only slide '-=200px' once.

 

Here is a new codepen. - 

See the Pen zqEGeg by anon (@anon) on CodePen

 

The setInterval codepen example from my first comment is super close to what I want to achieve. But the gallery ul doesn't stop animating instantly when you stop hovering on the button.

 

Oh wait a moment.. a duh.. maybe I just need to move the gallery as the total length.

[How to run timeline continuously on mouse hover]

I'm not sure I fully understand what your goal is here ... but if you'd like it to look like it's infinitely scrolling on hover, you'll want to clone the red-box element and attach it to itself and move the width of one red-box on repeat.

 

See the Pen oxervY?editors=0010 by sgorneau (@sgorneau) on CodePen

Hi,

 

Thank for the reply. Apologies for being unclear. What I should've said is this long div is actually a gallery containing a set of list items which are thumbnails. On left button hover the horizontal gallery will slide left non-stop until you reach the end of the ul. I also have a right button to scroll right but I didn't put it in my codepen example. My problem is when you hover on the left button the gallery ul will only slide '-=200px' once.

 

Here is a new codepen. - 

See the Pen zqEGeg by anon (@anon) on CodePen

 

The setInterval codepen example from my first comment is super close to what I want to achieve. But the gallery ul doesn't stop animating instantly when you stop hovering on the button.

 

[How to run timeline continuously on mouse hover]

I'm not sure I fully understand what your goal is here ... but if you'd like it to look like it's infinitely scrolling on hover, you'll want to clone the red-box element and attach it to itself and move the width of one red-box on repeat.

 

See the Pen oxervY?editors=0010 by sgorneau (@sgorneau) on CodePen

 

I have a timeline which moves the x position of a really long div to the left. When you hover over a button it will trigger the timeline. 

However, I can't seem to get the timeline to move continuously. I've tried setting a repeat and an onComplete function to loop the timeline but neither of them worked.

 

I did manage to move the long div using setInterval but when you mouse leave the button the tween animation doesn't stop instantly.

 

Here is a codepen of the setInterval example - 

See the Pen GZvLVp by anon (@anon) on CodePen

and here is a codepen of the timeline example - 

 

I guess ideally I would want to use a timeline so I can pause the animation on button mouseleave right? 

 

See the Pen BKdeBQ by anon (@anon) on CodePen