Jump to content
Search Community

onComplete callback fires at start of animation

MitchellG test
Moderator Tag

Recommended Posts

I have created an intro animation.  Everything works great.  However, at the end of the animation I want to move a container div that has some text and logo inside of it to another div using the FLIP function.  This is noted in the CODEPEN by the fact that the animation runs in the red area instead of being in the yellow area.

 

I have added the following  code at the bottom of my code to accomplish this:


 

// This should not fire until all of the animations have completed
animation.eventCallback("onComplete", swapPosition);


function swapPosition() {
  final.appendChild(containerGrid);
}

 

This does not seem to work. It moves the div at the start of the animation.

 

I'm just getting my feet wet so to speak with how GSAP works. Any help appreciated.

 

See the Pen xxVoYpd by chellgouda (@chellgouda) on CodePen

Link to comment
Share on other sites

Hey Mitchell. 

 

Your function does fire when the animation is completed. What makes you think that it is firing at the start?

 

Also you include the flip helper function but never use it... When are you wanting things to be flipped? I assume at the end of the animation that you have currently to move the whole logo from containerGrid to final?

 

Additionally I don't quite understand what your end goal is. For the most part of your total animation the final section has a height of 0. Then later you're adding the logo to it which makes it 400px tall. How are you wanting the height of the final section to transition? Should it always have a height of 400? Should the height animate? If so, when? 

 

I also don't really understand why you're doing all of these calculations yourself. I think that if you set things up using containers and percentage offsets (i.e. xPercent and yPercent in GSAP) you could simplify your calculations a great deal if not just let GSAP do all of them.

 

Sorry if I'm being a bit dense here. I'm trying to understand what you're trying to do and how I can help :) 

Link to comment
Share on other sites

Hi Zach,

 

My bad, I edited my code just before posting and forgot to call the function.

 

Here is my corrected edit:

 

animation.eventCallback("onComplete", flip,[[containerGrid], swapPosition]);

function swapPosition() {
  final.appendChild(containerGrid);
}

The callback is still firing at the start of my animation.

 

 

I appreciate that my code seems overly complex.  As I mentioned I'm just learning how to work with GSAP and I'm sure you can reflect back when you started out that your might have had some bloated code. 

 

My overall goal is to have some intro animation start in the center of the screen.  Once finished I would like the logo elements to scale down and to move to a position on the top left corner of the page.

 

Then I will fade out the background and reveal the website with the logo placed exactly where it would be for the website layout.

I would really like to learn how to make things less complex and appreciate the advice.

 

 

 

 

Link to comment
Share on other sites

We're actually in the process of creating a whole new FLIP plugin which can help in this situation. Here's how I'd do what you're trying to do with the new FLIP plugin (I created the demo from scratch, hopefully you can see how to adapt it to your project):

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

We don't have documentation for it as it's still quite under development. But hopefully the comments I added are enough for your needs right now :) 

  • Thanks 1
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...