GSAP3 Timeline changes? isActive?

[unvs 4 Likes (Newbie)]

Hi,

 

and first of all, congrats on GSAP 3!

 

I have some code running in GSAP 2 to calculate where to add in my tweens in a timeline:

 

    const startingPoint = tweenDuration - tweenOverlap

 

    if (section.timeline.isActive() && section.timeline.recent()) {

      console.log('timeline is active')

      if (section.timeline.recent().time() > startingPoint) {

        /* We're late for this tween if it was supposed to be sequential,

        so insert at current time in timeline instead */

        console.log('late')

        tweenPosition = () => section.timeline.time()

        alphaPosition = () => section.timeline.time()

      } else {

        console.log('still time')

        /* Still time, add as normal overlap at the end */

        tweenPosition = () => `-=${tweenOverlap}`

        alphaPosition = () => `-=${tweenDuration}`

      }

    } else {

      console.log('inactive -- add to end of timeline')

      tweenPosition = () => '+=0'

      alphaPosition = () => `-=${tweenDuration}`

    }

 

```

 

In GSAP 2 this works just as I want, but when I upgraded to GSAP 3 it acts differently.

 

`isActive` is never true for the timeline, even if I add a bunch of tweens initially.

 

This is probably impossible to debug for you guys, but it's hard to create an example of what I mean.

 

So basically my question is:

 

Are there any changes to the timeline defaults or how it operates that I might look into?

 

All the best,

 

T

[ZachSaucier 7,162 Likes (Superhero)]

Hey unvs,

 

9 minutes ago, unvs said:

first of all, congrats on GSAP 3!

Thanks!

 

9 minutes ago, unvs said:

`isActive` is never true for the timeline, even if I add a bunch of tweens initially.

I'm guessing you're running these if checks immediately after the timeline is being created and plays? I was able to get it to work with a very short delayedCall. I'm guessing it's because the timeline doesn't become active until the next animation frame? @GreenSock can check me on that. Not sure if it's meant to be that way given it wasn't that way in v2.

 

v3:

See the Pen wvvxYoZ?editors=0010 by GreenSock (@GreenSock) on CodePen

v2:

See the Pen MWWBPpy?editors=0010 by GreenSock (@GreenSock) on CodePen

 

Thanks for bringing this to our attention!

[unvs 4 Likes (Newbie)]

Yes, the timeline is being checked and updated through an IntersectionObserver observing elements entering the viewport, so checks are right before adding a new tween to the timeline (and right after, depending on the scrolling and elements).

 

Thanks for the demo and investigative work, I really appreciate it . 

[GreenSock 18,876 Likes (Superhero)]

Sorry about that - yes, this edge case was handled differently in v3 on purpose but upon reflection, I think it's best to revert back to the old behavior. That'll happen in the next release which you can preview at: https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/gsap-latest-beta.min.js

 

Thanks for reporting this!

[unvs 4 Likes (Newbie)]

Thank you so much!

 

I'm not sure how to test this (this is the new world of Webpack I guess, not sure how I'd drop in that file to my library), so I'll wait with bated breath for the .0.2 release

 

Thanks again

 

[GreenSock 18,876 Likes (Superhero)]

@unvs This is live now, in 3.0.2. ?

[unvs 4 Likes (Newbie)]

On 12/6/2019 at 6:09 AM, GreenSock said:

@unvs This is live now, in 3.0.2. ?

First of all, thanks so much for this fix @GreenSock!

 

I updated to 3.0.2 and everything worked as previous

 

However, when I upgraded to 3.0.5 the problem started appearing again. Has there been a regression perhaps?

 

A video of 3.0.4 (correct) -- the three horizontal boxes animate after eachother

 

https://www.dropbox.com/s/tv1b5st5ji8ul3m/lett_3.0.4.mp4?dl=0

 

A video of 3.0.5 (incorrect) -- the three horizontal boxes just flash appear at the same time

 

https://www.dropbox.com/s/tu32dqorb28ctc6/lett_3.0.5.mp4?dl=0

[GreenSock 18,876 Likes (Superhero)]

I don't see any regressions from the test Zach posted earlier, and it's virtually impossible to diagnose anything based on just watching a video - can you please provide a reduced test case that clearly shows the issue? I definitely want to fix anything that needs fixing, but at this point I'm not aware of any regressions at all and nobody else has reported anything so I'm not sure what to say. Once I see a codepen demo I'm sure I'll be able to diagnose things. 

[unvs 4 Likes (Newbie)]

Yes, sorry about the rushed post - had to get some stuff ready before the weekend and just wondered if something similar has been reported or if something came to mind :) 

 

I will try to put together a proper code pen! 

 

Thanks for your time

[unvs 4 Likes (Newbie)]

I tried recreating the problem with as little of my code as possible. Here it is running like expected with gsap 3.0.4. Each item fades in, one by one.

 

See the Pen eYYogpb by unvs (@unvs) on CodePen

 

And with gsap 3.0.5. The first 4 snap in, while the rest enter nicely.

 

See the Pen zYxjPeE by unvs (@unvs) on CodePen

 

Thanks for any advice that might come to mind, I really appreciate it

[ZachSaucier 7,162 Likes (Superhero)]

That's quite a bit of code for a simple effect. Why not use GSAP's staggers instead of trying to predict the timing yourself?

 

See the Pen abzGqgZ?editors=0010 by GreenSock (@GreenSock) on CodePen

[unvs 4 Likes (Newbie)]

9 minutes ago, ZachSaucier said:

That's quite a bit of code for a simple effect. Why not use GSAP's staggers instead of trying to predict the timing yourself?

 

 

 

Yes, it seems like a lot when isolated like that, but it is a part of a much bigger system where I need a lot of flexibility. Staggers like those you proposed didn't quite cut it for my usecase unfortunately!

 

 

[GreenSock 18,876 Likes (Superhero)]

Ah, a very interesting edge case. I think I figured out the issue and here's an updated beta file - better?: https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/gsap-latest-beta.min.js

[unvs 4 Likes (Newbie)]

Yes!! That seems to have done the trick!

 

👏 

 

Thank you so much for the fast response, you're the best!

 

 

[neodigm 1 Likes (Newbie)]

Wow, GSAP 3 is freaky cool. Just looking at the simple samples in this thread makes me want to animate.