Jump to content
Search Community

How to run timeline continuously on mouse hover

kayee test
Moderator Tag

Go to solution Solved by Shaun Gorneau,

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

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

  • Like 1
Link to comment
Share on other sites

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 think he wants it to keep scrolling, even after he stops hovering.

Link to comment
Share on other sites

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.

 

Link to comment
Share on other sites

  • Solution

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

  • Like 3
Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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. 

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...