MitchellG

Thanks a bunch for taking the time to create this demo. I will study it to better understand how flip works. Very much appreciate your support. Mitch

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.

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.

I dare ask why using a grid inside of the .demo element cause a problem?

Thanks so much both of you for your help. This has really helped me to get a handle on how to think about these problems.

I seem to be missing some key concepts about moving elements. I would like to move the text in this codepen from the center to the top left corner of the parent ".container" div but the only way I know how is to use the x and y values. But since this text is in the middle of the page to start (there are a bunch of animations that take place before which is why it ends up in the center) I would have to use some type of calculation to determine their values. I have literally no clue about how that or what to use for that calculation other than guessing. Any help appreciated.

I can't thank you enough. The information about the "slow" ease is exactly what I was looking for. I took some time to look over the code so I really understand how it works. The visualizer really helps to see what is going on. A fantastic too. Thanks very much for showing me a different way of solving this problem and one that I will be using in my current and future projects.

I'm trying to have texts scroll up one by one, then pause at a certain point and then continue to scroll up while fading out. I have almost achieved this using ease functions for both the first stagger where the text fades in and moves up and the second stagger where the text continues up and fades out. However I want the text to pause briefly in the middle after the first animation. Since I'm using a power function for the ease I don't know how I can set the delay between the two animations to also be a power function so the timing works out. I'm just starting out with GSAP so I may be going at this animation in the wrong way. Any help much appreciated.