Grid-rows property of overlapping div affecting animation during Flip

[TheNomadicAspie]

I'm animating a "logo" div from the corner to the center of the screen using Flip, but when it passes my "question" div the animation becomes distorted. This doesn't happen if I remove the grid-rows property of my question div (I commented it out on my CSS, if you uncomment it you'll see what I mean).

 

I don't mind using Flexbox or an alternative if there's no way to animate it properly while passing over an object with grid-rows, but I wanted to ask if there's a way around this? I've already tried adding gridRows to the props, but that doesn't help I'm assuming since the property belongs to an overlapping element and not the element I'm animating.

 

I AM fading out my question div during the animation so it is a part of the Flip animation, so if needed I can remove and fade it out before the animation happens, but if possible I would like to find a way to do it asynchronously. Is there a way to do this without removing my grid entirely?

See the Pen gOWzQwW by TheNomadicAspie (@TheNomadicAspie) on CodePen

[GreenSock]

I'm a bit lost. If I completely remove GSAP and any animation, your end state in the "showLogoAnimation()" makes the logo totally invisible because logo_animation's height is 0 based on your CSS. This is unrelated to Flip. Also, for the record, Flip and GSAP don't care what elements are "passed over" while animating - those would have no effect.  

 

I think you've gotta figure out your CSS/layout first, then animate. I really don't know how logo_animation is supposed to be laid out, so that's something for you to determine. We really try to keep these forums focused on GSAP-specific questions. 👍

 

Like I said in the other thread, it really helps to just get the toggling of state to function first (don't involve any animation, no Flip, no GSAP). Once you're happy with the states, THEN move on to animating between them. 

[TheNomadicAspie]

On 7/31/2021 at 10:57 PM, GreenSock said:

I'm a bit lost. If I completely remove GSAP and any animation, your end state in the "showLogoAnimation()" makes the logo totally invisible because logo_animation's height is 0 based on your CSS. This is unrelated to Flip. Also, for the record, Flip and GSAP don't care what elements are "passed over" while animating - those would have no effect.  

 

I think you've gotta figure out your CSS/layout first, then animate. I really don't know how logo_animation is supposed to be laid out, so that's something for you to determine. We really try to keep these forums focused on GSAP-specific questions. 👍

 

Like I said in the other thread, it really helps to just get the toggling of state to function first (don't involve any animation, no Flip, no GSAP). Once you're happy with the states, THEN move on to animating between them. 

Understood, thank you and I won't ask CSS related questions anymore. I'll figure out a way around it.