Jump to content
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

Share this post


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

Share this post


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

Share this post


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

Share this post


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

Share this post


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

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.