Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
unvs

GSAP3 Timeline changes? isActive?

Recommended Posts

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
  • Thanks 1
Link to comment
Share on other sites

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!

  • Thanks 1
Link to comment
Share on other sites

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 :)

Link to comment
Share on other sites

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!

  • Like 2
  • Thanks 1
Link to comment
Share on other sites

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 :D

 

Thanks again :)

 

Link to comment
Share on other sites

  • 2 weeks later...
  • 1 month later...
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

Link to comment
Share on other sites

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. 

  • Like 1
Link to comment
Share on other sites

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

Link to comment
Share on other sites

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 :)

Link to comment
Share on other sites

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! :)

 

 

Link to comment
Share on other sites

Yes!! That seems to have done the trick!

 

👏 

 

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

 

 

  • Like 1
Link to comment
Share on other sites

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

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