Jump to content
Search Community

Timeline overlap and unwanted delay in onComplete function

Carrly test
Moderator Tag

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

I have a timeline animation with an onComplete function. 

 

In the timeline I have several overlap tweens, ie.

 

load.to('#preloadLogo', 3,{autoAlpha: 1},"-=2")

 

The "-=2" overlaps are causing the onComplete function to fire with a delay. In the codepen example, it takes several seconds for the heading to load.

 

When the overlaps are removed, my onComplete function fires immediately (which is what I want). How can I make the onComplete fire right away, and still keep my timeline overlaps in tact?

 

 

 

 

See the Pen EQJxRK by Carrly (@Carrly) on CodePen

Link to comment
Share on other sites

Hi @Carrly :)

 

You're not seeing a delay in the onComplete, but it may seem that way. The reason is the ease you're using on your opacity animation. Using a Power4.easeOut will make it appear that the animation is finished, but the fade is just going really slowly at the end. To see what I mean please try this small change:

 

//switch this
load.to("#preloader", 4, {ease:Power4.easeOut,autoAlpha:0},"-=0.8")

//to this
load.to("#preloader", 4, {ease:Linear.easeNone,autoAlpha:0},"-=0.8")

 

See the difference? Hopefully that helps. Happy tweening.

:)

 

  • Like 6
Link to comment
Share on other sites

In addition to what was said above, do note how Shaun chained the .to() methods; also, the second tween has a relative delay of "-=2" but the first tween has a duration of only 1, so the 2nd tween will actually play first. Might be a bit counter-intuitive and lead to mistakes later on!

 

(This post brought to you by someone who was making a codepen and finished it only to come back to the thread to find all the answers posted already)

  • Like 3
Link to comment
Share on other sites

56 minutes ago, Acccent said:

(This post brought to you by someone who was making a codepen and finished it only to come back to the thread to find all the answers posted already)

 

@Acccent I started posting a few years ago before we had the 'Claimed Topic' feature. I'd make a demo, carefully craft a reply, hit submit and then the page would refresh and all the other answers would be ahead of mine. It was the Wild West of answer battles. Professor @Carl gave me many a smack-down back in those days. :D

  • Like 1
  • Haha 3
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...