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

Share this post


Link to post
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

Share this post


Link to post
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 :)

Share this post


Link to post
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

Share this post


Link to post
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 :)

 

Share this post


Link to post
Share on other sites

@unvs This is live now, in 3.0.2. 🎉

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

  • Recently Browsing   0 members

    No registered users viewing this page.

×