Jump to content
GreenSock

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

Position Parameter Added to onComplete function?

Recommended Posts

I am running a few cycles of an animation for an HTML5 Creative banner. However, the finishing position I need for the banner is not what is happening at the end of the tween / timeline. Therefore, I have set an onComplete function to change the "END" position of my animation but the problem is the delay. Can I add a position parameter to the onComplete function so that it is called half a second or so earlier?? I need the 'finish' function to be called a split second earlier in order to make the animation ending smooth. Example below:

var tl = gsap.timeline({

    repeat: 1,

    repeatDelay: 1,

    onComplete: finish,

    onCompleteParams: ["-=1"]

});

Link to post
Share on other sites

This is not very representative. I cannot recreate the whole Ad. This is a poor example and I would like to upload a screengrab showing the actual video but file size will not allow it. This is very frustrating when you cannot actual get any help because sharing examples and code becomes as complex and trying to create the animations in the first place!!

 

See the Pen ExyKZvO by hermeticpoet (@hermeticpoet) on CodePen

Link to post
Share on other sites

Hey Kevy. 

 

First off I see that you're using some of the old syntax. We highly recommend using the GSAP 3 syntax (no more Max/Lite stuff especially).

 

Second, I think it's way more convenient to use GSAP's .set() method instead of document.querySelector("#img-1").style.opacity etc.

 

As for your question, no, there's no way to make the onComplete before a tween or timeline has completed. That wouldn't make much sense :) However you can fire a function at that time, just not an onComplete.

 

I don't really understand your code setup. For example why have an .add() with a .delayedCall() inside of it? Why not just position a .call() or .add() where you want the function to be called? 

 

Additionally why are you wanting to set the styles of elements that you're still animating mid-animation? Are you just wanting to end the animation early? What's the goal here? Perhaps if you showed what you're trying to really fix we can help you with the actual issue, not what you think the issue is.

Link to post
Share on other sites

@ZachSaucier Firstly, The use of TweenMax.delayedCall was because I am reusing older code (copy paste). However, that particular piece of code creates a pulsing effect on the CTA button. The delayedCall placed upon it was to stop it from firing immediately when called. It was too quick in the animation, therefore it works (looks) better when there is a slight delay before the pulsing effect.

 

As for your second point about GSAP's .set() method being easier, more convenient to use, I am not sure HOW to use it here so it was never more convenient!! Sorry...

 

Finally, I am not trying to reset the style of elements while they are still animating at all...

 

-> I have an image, let's say a colourful overlay. It fades away and reveals the image beneath it that also has a company logo, some text and a CTA

-> The Ad runs for 3 cycles. Overlay fades, image with other elements come to the foreground and then repeat. However, in order to not make the transition back to the original overlay not too quick and keep it consistent with the rest of the animation, I had to add final line:

`.to("#overlay-img", {duration: 1, autoAlpha:1},'-=1');`

-> Therefore, the final piece of the animation finishes with the Overlay Image showing and this is not what I want. The final frame the Ad finishes with should be the image with logo, text and CTA. So ideally, I would like the animation NOT to play that last line when its the final cycle of the animation.....

 

Link to post
Share on other sites

Ok @ZachSaucier, I have rewritten the TweenMax.delayedCall() to :

.call(pulse, {duration: 0.3}, '+=0.2),  and that now works.

 

I have changed the finish() function from document.querySelector("#img-1").style.opacity;
gsap.set("#img-1, #logo, #cta, { autoAlpha: 1});

  • Like 1
Link to post
Share on other sites
17 minutes ago, kevywalton said:

The Ad runs for 3 cycles. Overlay fades, image with other elements come to the foreground and then repeat. However, in order to not make the transition back to the original overlay not too quick and keep it consistent with the rest of the animation, I had to add final line:

`.to("#overlay-img", {duration: 1, autoAlpha:1},'-=1');`

-> Therefore, the final piece of the animation finishes with the Overlay Image showing and this is not what I want. The final frame the Ad finishes with should be the image with logo, text and CTA. So ideally, I would like the animation NOT to play that last line when its the final cycle of the animation

That makes a lot of sense :) I would use a .call() before that final tween that pauses the timeline after a your iterations. Something like this:

See the Pen zYBqwGo?editors=0010 by GreenSock (@GreenSock) on CodePen

 

  • Like 2
Link to post
Share on other sites

@ZachSaucier Thanks so much... Sorry for the confusion and inability to create a proper codepen. As a newbie, it can be more than a little frustrating trying to get through some of this stuff without having the problem of being unable to properly share your code!! So again, really appreciate it.. that's great ;-)😇

  • Like 1
Link to post
Share on other sites

Happy to help! We're here to help you through the process :) 

  • Like 1
Link to post
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.

×