Jump to content
GreenSock

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

Timeline overlap and unwanted delay in onComplete function

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 5
Link to comment
Share on other sites

Why not just put the header tween in as part of the Timeline with a negative relative offset?

 

See the Pen ZrZYjK by sgorneau (@sgorneau) on CodePen

 

  • Like 4
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

@PointC Ah I didn't know that about the easing, that solves my problem, thanks!

 

@Shaun Gorneau I did try this method first actually, but wanted the onComplete callback for other reasons in my code. But yes, otherwise this is probably the easiest option. 

  • Like 1
Link to comment
Share on other sites

@Acccent haha thanks anyway! Also good point about the tween. 

  • Like 1
Link to comment
Share on other sites

3 minutes ago, Carrly said:

 

@Shaun Gorneau I did try this method first actually, but wanted the onComplete callback for other reasons in my code. But yes, otherwise this is probably the easiest option. 

 

Ah, OK makes sense is you have other needs for the callback :)

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