Parent height animation (auto

[jbonlinea]

Hi there,

 

I did used

See the Pen dMLQJr by osublake (@osublake) on CodePen

to animate flex-direction, and so far so good !

 

The item, or the div animated renders very well !

 

 

 

But the parent div, thus the flex container, isn't animated while its height change depending on it's flex-direction.  The result is pretty frustrating at it seems to be the easy part !

 

I thus would like the parent div height to be animated. I dug into few codepen on the forum but couldn't make it work. There are two function tied to extra button to trigged and test.

The  idea would be to resize the parent div when switching from flex-column to flex-row and the other way round, so the animation to resize the parent div would be trigged with the same "switch column order" "switch row order" button

 

 

Note that to reorder the item I user order and not column-reverse or row-reverse as I want the order to be kept when changing from column to row

 

 

 

Any help would be greatly apreciated !

Thank's

 

 

ps : some inspiration pen to resize the parent div 

See the Pen CubGg by aPinix (@aPinix) on CodePen

See the Pen Bzhji by GreenSock (@GreenSock) on CodePen

See the Pen yXWmPO by GreenSock (@GreenSock) on CodePen

See the Pen BaKVrVQ by jbonlinea (@jbonlinea) on CodePen

[ZachSaucier]

Hey jbonlinea and welcome to the GreenSock forums.

 

To do this sort of thing you need to use the FLIP animation technique where you record the initial height, change the contents inside, then animate from the initial height that you recorded to the height of auto. 

 

If you'd like our help debugging what's going wrong please include a minimal demo of your situation and issue  

 

 

[jbonlinea]

Hi,

 

Thank's for your reply.

 

I actually included a penof my own in my previous post but I guess it was mixed up with the one I reference to build mine

 

I hope this anwers, but let me know if you need further details

 

Regards

[ZachSaucier]

I posted in your other thread asking for you to please make a demo that clearly shows the one issue that you're focused on and remove all else. That'd be really helpful for us to help you properly! You should be able to do that by clicking the "fork" button on CodePen and then removing irrelevant stuff.

[jbonlinea]

Yes

 

these are two diferent pens, this one only address one matter, the fact that the parent div is is resized but not animated, so its size "jump" while its content is animated.

 

(on the other i have the same issue, but I'm not addressing it, I just addess the behaviour of the embed content)

 

Hope I did things right

 

Thank's again

[Visual-Q]

Maybe like this

 

See the Pen LYNrggm by Visual-Q (@Visual-Q) on CodePen

 

 

[jbonlinea]

Hi

 

thank's @Visual-Q exactly like this !

 

By the way I'm new to gsap, first use, and your input made me understand the way it need to be used to implement FLIP animation technique

[jbonlinea]

Hi again !

 

Ok I've been doing my math, watching the Gsap doc video, and read quite a bit. I got some basic, but and I'm still stuck with something.

 

I dug the forum and found two post on top of the one on  manipulating flex-values, namely the one on non animatable css properties non animamatable css properties, and the one on smoothing out flexbox.

 

Both posts have pens, among which one deals with flex direction

See the Pen eJGrPN by osublake (@osublake) on CodePen

, in a much more lightweight way than the playground

See the Pen dMLQJr by osublake (@osublake) on CodePen

.

That's awesome !

 

 

The one with flex direction is super great, but the flex div ".group" has a fixed height, while one may want it be have an auto height based on its content.

 

I thus edited the pen, first by changing the CSS and commenting out the height parameter for the class .group. Now the flex div is indeed resized accordingly, great, but without animation, not so great !

I thus tried to animate it, by getting it initial height and final height. It works well when the flex-direction is going from column to row, but when it goes the other way round, the height of the .group div isn't changed, and the  height of the boxes is schrinked ?!

 

A similar issue also rise if we change the css so that the initial flex-direction is column and the reordered one row

 

And again the issue depending on where we place the .group animation

 

Could you please have a look, and provide me some explanation on why my code is wrong and why the one you suggest is right, so I may get an understanding and progress with gsap

 

Here is the pen

See the Pen XWdBWEY by jbonlinea (@jbonlinea) on CodePen

 

Thank's in advance

 

 

 

[jbonlinea]

Hooo,

 

I foud out !!!

 

however I'm not 100% sure I understood gsap behaviour !

 

When changing the .group height, gsap changed its height value from auto to XXXpx, but when the flex-direction is changed for the group its height isnt, si I had to reset its height value TweenLite.set(group, { height: "auto" }); and then  do the animation between the recorded initial height in h1 to its final height in h2. This reset to auto was missing ! 

     var h1 = $(".group").height();
     TweenLite.set(group, { height: "auto" });
     group.classList.toggle("reorder");  
     var h2 = $(".group").height();
     TweenLite.fromTo(".group", 0.5, { height: h1  },{ height: h2, ease  });

 

Awesome !

 

 

There is still a weird behaviour, as the box heigh is first schrinked, before being restored ? why so ?
 

[ZachSaucier]

3 hours ago, jbonlinea said:

There is still a weird behaviour, as the box heigh is first schrinked, before being restored ? why so ?

That's how flex sizing works. The content tries to fix into the height of the container.

 

If you don't want that to happen I recommend setting an explicit height for the content during the transition. You can remove it afterwards.

[jbonlinea]

29 minutes ago, ZachSaucier said:

That's how flex sizing works. The content tries to fix into the height of the container.

 

If you don't want that to happen I recommend setting an explicit height for the content during the transition. You can remove it afterwards.

Ok allright,

 

Basically I would like it to stat the animation with its actual size (just before the animation start), and end with its final size.

 

I added some content to make it more palatable.

 

I think the main issue stem from the fact the boxes dimensions (width and height) are jumping, instead of being animated, which is normal since the pen do not address that at the moment.

I've spend the day trying to animate the box resizing on an other pen without success (I did manage to have an animated width resize with CSS, and with gsap but not properly)

 

Idealy I would like the width to be the leading/animated side, and the height being sized with auto

I also considered flex-basis, but it wouldn't work as it change from width to height depending on the flex direction !

 

 

Hope you may help !

 

 

ps : sorry for my very week gsap knowledge, I'm totally new to it and not a CSS animation guru neither. I do manage to create one animation, but haven't fully understood how to combine many of them,  when they are not applied on the same object, yet are interdependent !

[ZachSaucier]

Again, I recommend using the FLIP helper function for this sort of transition. It would work with both of your questions that you're asking about in different threads.

[jbonlinea]

Yop,

 

I had a loong look at the flip demo today already.

I'm most certainly still narrow minded in my gsap approach, but I don't see how I could apply it here ?

 

I actually tried to edit the function swapPosition of your FLIP example, so that it simply add a class to the box.

The class change the box color, but it is not animated. Same if the class has a rotate transform in it.

Ok this is a bit of a stupid example, but i show that it is not enough to define a change in the function for it to be animated.

 

So for me the problem persist !

 

I may ask, how do I animate a flex-direction change with the flip helper ?

 

With some work and assistance, I could find how to animate the flex container when the flex item are animated. but If the item are animated and change size, then I want their size change to be animated, and I can't find how.

 

 

Now I don't even know if I shoud use the sniplet above as a basis to animate a flexbox change or a flip helper, so I'm back to square one ! 

 

I would greatly appreciate if you could help, not necessaraly with a working pen (event if it's always cool), but with some comprehensive tutorial. The doc details the bricks, but not so much the matrix that stick them togather !

 

Thank's again for your attention

 

Cheers

[ZachSaucier]

1 hour ago, jbonlinea said:

how do I animate a flex-direction change with the flip helper ?

Testing it myself it does animate it some but doesn't do a great job  We're making some updates to the FLIP function anyway so stay tuned for some updates related to it.

[GreenSock]

We address this here: 

👍