Timeline overlap and unwanted delay in onComplete function

[Carrly 2 Likes (Newbie)]

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

[PointC 14,466 Likes (Superhero)]

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.

 

[Shaun Gorneau 2,037 Likes (Superhero)]

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

 

[Acccent 364 Likes (Leader)]

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)

[Carrly 2 Likes (Newbie)]

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

[Carrly 2 Likes (Newbie)]

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

[Shaun Gorneau 2,037 Likes (Superhero)]

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

[PointC 14,466 Likes (Superhero)]

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.