Jump to content

La Colonia

Triggering play/reverse quickly brakes timeline

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

Hi, I'm having a issue with TimelineMax.


I've created a timeline that opens and closes the drawer in my navigation. It works, but eventually if the first time I move the mouse above the navigation elements (that triggers the animation), one of the timelines doesn't work anymore.


I'm executing the timeline on mouseenter triggered by the main navigation items. Then I'm playing the timeline reversed when it's triggered a mouseleave by the container of the entire navigation.


You can see the working example in the following video (password: codepen).




The problem happens when I move quickly the mouse over the navigation items. I managed to film it in this video (password: codepen)



And here the video that shows the error (password: codepen)



See the Pen GagedL?editors=0010 by a-barbieri (@a-barbieri) on CodePen

Link to comment
Share on other sites

I've slowed up the animation and I found out that moving the mouse on the elements doesn't restart the first tween of the timeline. 


In other words, the first tween of the three timelines is executed on the same HTML element. If I start playing timeline A and before the first tween ends I play timeline B, the first tween of B doesn't start from the beginning (even though is a fromTo), but it keeps from where timeline A left.


Once the tween on the first element is complete, the timeline is broken and the fromTo doesn't work anymore.


Here is the structure for all the three timelines:


.fromTo(container, 0.3, { x: "0%" }, { x: "100%" })
.staggerTo(items, 0.1, { opacity: 1 }, 0.1);


See the video (password: codepen)



See the codepen below.


See the Pen bydpYj?editors=0010 by a-barbieri (@a-barbieri) on CodePen

Link to comment
Share on other sites

Ok, I guess I've found out why. The first tween gets killed because is animated by another timeline. After that, the tween doesn't exist anymore breaking the timeline.



Link to comment
Share on other sites

Ok. I guess now it's solved. I detached the first tween from each timeline and managed alone in order to avoid killing the tween.


Here below the result


See the Pen wbaWXw by a-barbieri (@a-barbieri) on CodePen

  • Like 1
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.