Simple Scaling Animation but not getting the desired result?

[Jim Nayzium]

Thanks ahead of time for any help, everyone.

What I want to have happen is for the two blue buttons, upon clicking the "go away" to animate their scale up to fill the container as the red one is animating itself out.

 

Using a display:flex container is part of the necessary design elements around it as this is only a small "zoomed in" area of code to utilize this in my project. Meaning, if FlexBox is part of the restraints to it working that's not great news. As prior to this I used a FLIP animation to get us to this point now... where I break a div off from the static position and fix it to the top on a scroll trigger action -- prior to that there were the three items shown here STACKED in a "display:flex; wrap-direction: column;" DIV, and I used FLIP.to in order to change their orientation to "wrap-direction: ROW" so a tall thin DIV animates out to a WIDE LONG div.

 

Below pretend like the xxxx represents the normal body background image and the pipes " | " represent the width of the <main> container tag in the HTML page. The tall DIV animates to become a FULL WIDTH : 100vw DIV element so I need the "display:flex" when that happens to change from column to row direction, and you've already helped me make that happen using FLIP and SCROLLTRIGGER!

 

xxxxx|           \\  1  //          |xxxxx

xxxxx|           \\  2  //          |xxxxx

xxxxx|           \\  3  //          |xxxxx

 

FLIPPED TO --> 

 

\\ 1 //  xxxxx |      \\ 2 //     | xxxxx   \\ 3 //

 

 THEN, when they are horizontal -- that's where this animation in this thread will come in. So I need the display:Flex CSS to remain in place and also accomplish the scale animation of the 2 blue buttons and red banner shown in this codepen.

 

NOTE: The only way I figured out how to the above PIPE-xxxx animation was to use FLIP.to and change the CSS applied to the div. If there is another way to accomplish all this, I am up for hearing it. But I am VERY CLOSE to home doing it all this way, and I can live with the animation on this question staying as is, but I just thought it would be easy for someone to figure out! (Any use of GRID and "flipping" back and forth from Grid / Flex displays just instantly changed and didn't "truly animate" the movements of the divs. Even the flex/row/column switch doesn't technically "animate" but I can live with the results of it.

 

I am trying to get a smooth movement of the blue buttons growing as the red banner shrinks. In both directions. I am CERTAIN this is doable, just not certain with the flex boxes and other constraints I have on the page if it's possible.

 

THANKS!

 

 

See the Pen LYWmLja by JimNayzium (@JimNayzium) on CodePen

[GreenSock]

A few things:

• Don't animate the literal "transform" property, like transform: "scale(0)" - it's much better/faster and more accurate to do scale: 0. 
• Don't use jQuery.show() or .hide() - GSAP is up to 20x faster than jQuery and FAR more capable. Just use a gsap.to() tween. 
• You mentioned using Flip but I didn't see it anywhere in your demo. 

There was a lot of text to read through in your description and I had a hard time visualizing exactly what you mean, plus I don't have a lot of time right now but here's how I'd use Flip:

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

 

Does that help?

[Jim Nayzium]

This is potentially EXACTLY what I need! I will work on my side and post back when I can get it simplified to show you. Thanks so much!