Jump to content
Search Community

Tweens in timeline being skipped when calling .progress(1)

avancamp test
Moderator Tag

Go to solution Solved by avancamp,

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 there,

 

I have a fairly complex entrance anim for a graphic that I'm working on. Sometimes, this graphic needs to immediately seek to the end (via tl.progress(1)) so that the person using it can quickly see what the final product looks like.

 

However, it seems that some of the tweens in this timeline aren't playing when I call tl.progress(1). If I add onStart or onComplete callbacks to these tweens, they never get called. If I let the anim play at a normal speed without manually advancing its progress, the playback is as expected and all tweens play.

 

If it helps, this same issue also starts to arise when I use tl.timeScale(10). At this speed, it starts intermittently skipping tweens.

 

I unfortunately cannot share a codepen, as this particular project is private. I feel bad asking for help on a forum on a private project like this, but I've been unable to successfully troubleshoot this issue myself.

 

Thanks,

Alex

Link to comment
Share on other sites

HI avancamp :)

 

My first thought was that you needed to set the suppressEvents boolean to false, but that should be the default setting for progress(). You aren't setting it to true by chance are you? If you were using seek(), the default setting is true so you'd have to set it to false.

 

That's all that comes to mind at the moment. It'd be easier to help with a CodePen. Instead of your private project, can you make a simple demo with a few divs to replicate the issue? 

Link to comment
Share on other sites

Yep, it sounds like expected behavior - autoRemoveChildren is false by default in TimelineLite and TimelineMax instances. If you set it to true, then whenever the playhead moves past the end of a child animation, that child gets removed from the timeline. So, for example, if you set timeline.progress(1), it'll basically remove all the child animations because you're forcing the playhead to the end. That can be desirable in some rare situations (like if the playhead will only move forward and you want to make completed tweens eligible for GC because you'll never use them again). Very rare (hence the default "false" setting). 

 

Does that clear things up? 

Link to comment
Share on other sites

Thanks for the reply Jack.

 

Yes, that does make sense, but I'd still think that these tweens would get played when setting timeline.progress(1). Here's the exact order of events:

  1. I create a long-living timeline that will have new animations added on to it many times throughout the life of the page.
  2. At some point, an event is fired that causes my code to add an animation to this master timeline.
  3. But, some parameter of this event tells my code that it should immediately set timeline.progress(1) after adding this animation to the timeline, so it does that.
  4. If autoRemoveChidren is true, none of those tweens that I just added get played. It's as if they're being prematurely GC'd. I would still expect them to complete in this scenario.

I was able to easily refactor this particular graphic to not need autoRemoveChildren, just want to give a heads up in case this indicates a possible bug.

 

Thanks!

Alex

Link to comment
Share on other sites

Hmmm...any chance you could provide a reduced test case? I just tried this and it worked perfectly...

var tl = new TimelineLite({autoRemoveChildren:true}),
    obj = {val:0};

tl.to(obj, 0.2, {val:100});

TweenLite.delayedCall(1, function() {
    tl.to(obj, 1, {val:200});
    tl.progress(1);
    console.log(obj.val); //200 (correct)
});

A simple codepen would be awesome. I definitely want to make sure any bugs are squashed.

  • 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.
×
×
  • Create New...