AsKadir Posted April 30, 2020 Share Posted April 30, 2020 Hi! I have an issue for mouseleave event, I'm using simple timeline with play() and reverse(). When cursor leave div timeline starts working properly, but there is set that has delay and sometimes it's not working. If I remove it from timeline and add gsap.set inside mouseenter and mouseleave everything is fine. What am I doing wrong? See the Pen eYpEavz by ChicagoJostik (@ChicagoJostik) on CodePen Link to comment Share on other sites More sharing options...
ZachSaucier Posted April 30, 2020 Share Posted April 30, 2020 I think this is related to a bug that has been fixed in the most recent version of GSAP where .set() at the beginning of timelines caused some problems. You can use the beta version here: https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/gsap-latest-beta.min.js But I would probably approach the situation differently anyways, applying an animation to the circle that follows the mouse cursor: See the Pen vYNJoZg?editors=0010 by GreenSock (@GreenSock) on CodePen Alternatively, you could actually make the circle that follows the cursor become the size and color of your teal circle kind of like these threads: 2 1 Link to comment Share on other sites More sharing options...
AsKadir Posted April 30, 2020 Author Share Posted April 30, 2020 @ZachSaucier Thanks, Zach! I saw those animations, but it's not related to my design, will be waiting for new official update. Link to comment Share on other sites More sharing options...
AsKadir Posted April 30, 2020 Author Share Posted April 30, 2020 @ZachSaucier Sorry for disturbing you, Zach! You said it's some bug for set(), but I have the same issue if I add animation you made inside timeline with to(). You can see it here Can you explain what's wrong? Link to comment Share on other sites More sharing options...
ZachSaucier Posted April 30, 2020 Share Posted April 30, 2020 1 minute ago, AslanGoi said: I have the same issue if I add animation you made inside timeline with to(). You can see it here I'm not seeing anything wrong. What are you referencing? 1 Link to comment Share on other sites More sharing options...
AsKadir Posted April 30, 2020 Author Share Posted April 30, 2020 5 minutes ago, ZachSaucier said: I'm not seeing anything wrong. What are you referencing? Can you look at your codepen and then to mine, if look closely, you can see the difference, maybe 0.1-0.2s delay in my codepen. I call a wife, she also see this) Link to comment Share on other sites More sharing options...
ZachSaucier Posted April 30, 2020 Share Posted April 30, 2020 1 minute ago, AslanGoi said: if look closely, you can see the difference, maybe 0.1-0.2s delay in my codepen. Are you talking about for the circle disappearing and reappearing? If so, that's likely due to your perception and the ease that you're using. By default tweens have an ease of "power1.out". You might want to use "none" or "power1.in" and see what you prefer. Check out the ease visualizer to see how the curves themselves appear. I'm pretty confident there's no bug going on. 1 Link to comment Share on other sites More sharing options...
AsKadir Posted April 30, 2020 Author Share Posted April 30, 2020 11 minutes ago, ZachSaucier said: Are you talking about for the circle disappearing and reappearing? If so, that's likely due to your perception and the ease that you're using. By default tweens have an ease of "power1.out". You might want to use "none" or "power1.in" and see what you prefer. Check out the ease visualizer to see how the curves themselves appear. I'm pretty confident there's no bug going on. But we have same ease by default, right? Can you mouseenter my div, wait for filling its background, then mouseleave fast maybe for 100px and stop, you will see that cursor is leaving without circle and only then circle is appearing. And check the same movements for your codepen, also wait for background filling, then mouseleave fast for 100px. In your example circle will appear before stopping cursor on 100px. Can you please, check it again? Link to comment Share on other sites More sharing options...
ZachSaucier Posted April 30, 2020 Share Posted April 30, 2020 3 minutes ago, AslanGoi said: Can you mouseenter my div, wait for filling its background, then mouseleave fast maybe for 100px and stop, you will see that cursor is leaving without circle and only then circle is appearing. That's because you put the tween at the beginning of the timeline using 0 as the position parameter. The whole rest of the timeline has to be scrubbed through before the tween is reached. That's why I used a separate tween in my demo above (so there's no delay). 2 Link to comment Share on other sites More sharing options...
AsKadir Posted April 30, 2020 Author Share Posted April 30, 2020 11 minutes ago, ZachSaucier said: That's because you put the tween at the beginning of the timeline using 0 as the position parameter. The whole rest of the timeline has to be scrubbed through before the tween is reached. That's why I used a separate tween in my demo above (so there's no delay). I thought absolute time 0 means to start animation from the start of a timeline. Do you mean that on reverse() absolute time start animation from the end? I can't get the point, sorry. Link to comment Share on other sites More sharing options...
ZachSaucier Posted April 30, 2020 Share Posted April 30, 2020 Here's a basic visualization of the tweens in your timeline: The pink tween represents your cursor tween. The red line represents the playhead of the timeline. When the timeline plays forward, all the tweens start at the same point in time (because you set the start time of each to 0). When the timeline reverses, the timeline goes from the end towards the beginning. So at the very start of the reverse it would be visualized this way: In other words, there's a gap before the cursor tween is reversed because the duration of the other tweens in timeline are longer. This is why it's better to use a separate tween (like I did) instead of adding the cursor tween to the timeline. 1 1 Link to comment Share on other sites More sharing options...
AsKadir Posted April 30, 2020 Author Share Posted April 30, 2020 @ZachSaucier Thanks, Zach!!! Now everything is clear. Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now