Jump to content


TimelineMax loopped by seek in addCallback stops working after GSAP update 1.11.0

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 GreenSock!


After update of GSAP from 1.10.3 to 1.11.0 my animation stopped working properly.


I lost a lot of time identifying why manually looped timeline loops only once, and second loop is not working. While I was developing animation I was thinking, it was my fault, but when I checked my website which worked yesterday and today I see the same issues, I realised, that it was 1.11.0 update change causing problems (I used latest cdn sources).


So where lies the problem?


I have main TimelineMax instance tl which is not looped. After initial animation I add label "slide-01-loop" and at the end of loop sequence I call callback function which seeks timeline to that loop label.

tl = new TimelineMax();
// some initial transitions
// main loop for slide 01 (for now it's the only one slide
// animations for slide 01
// at the end of slide 01 I add callback function which loops to label "slide-01-loop"

// --------------------------------
// callback function is defined below
function tlSeek(whichTL,where2go) {

In GSAP 1.11.0 tlSeek function is played only once, after the first loop, but when animation plays timeline second time, then this callback is not invoked any more, so my animation stops, or if it was some more animation sequences after that callback, then this part of timeline is invoked.


I see in release notes: http://www.greensock.com/update-2013-10/  some notes which may be responsible for this change:



  • Fixed several issues that could cause zero-duration tweens inside timelines to render incorrectly in very particular (and rare) scenarios
  • Adjusted behavior of callbacks (and zero-duration tweens) in timelines so that if the playhead moves directly on top of the callback/tween when suppressEvents is true, it will execute callbacks on the following render (when the playhead leaves that spot). So callbacks will get triggered EITHER when the playhead arrives OR when it leaves that spot (not both). This seemed like the most intuitive behavior.


I report this issue. Is it my misunderstanding of callbacks, or it is a bug?


The minimised animation is visible on http://www.madmultimedia.pl #top-a banner - I changed back to 1.10.3 version of TimelineMax.min.js - so it is working now, but if you change script to 1.11.0 then problem start to occur.


Another change, which I observed is different transform3d behaviour, something, which was rotated in 3d has different slightly rotation angles in updated GSAP.


Best regards for my beloved AS/JS tween engine creators!












Link to comment
Share on other sites

Let me address the first issue first (callback):


You're exactly correct - that is a regression introduced in 1.11.0 that would only occur if you call seek() from inside a callback that's placed at the very end of the same timeline that you're calling seek() on. I apologize for that. It's one of those edge cases it's tough to know to test for, but it should be resolved in the attached preview of 1.11.1. Would you mind testing that and letting us know if it resolves things for you? 


As for the 3D rotations, I can't seem to find any differences - would you mind putting together a simple codepen or jsfiddle that demonstrates the problem? I'd love to make sure it's working correctly and that any bugs are squashed. 


Link to comment
Share on other sites

Hi, Jack!


As usual GS is as fas, as GSAP! Attached GSAP preview 1.11.1 resolves described earlier problem! 1.10.3 and 1.11.1 preview - it's ok, 1.11.0 - doesn't work.


Please note, this error occurred not only in callback which invokes timeline seek at the end of the animation / timeline. The same behaviour was when after callback was some more animation sequence at timeline.


As for 3D. It's strange, but I don't see differences any more - all versions rotate in the same way - probably it was some of the debug code which interrupted timeline sequence when I was isolating problem.


Site I'm working on is in developing state and it's rather one page / one animation preview than site. I'll keep an eye on 3D, we have on schedule port from Flash AS GSAP to JS some more advanced animations examples from our portfolio as a proof of concept.


Thanks for help,


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