animate flex-intem resize on flex-direction change

[jbonlinea]

Hi there,

 

After a crasy first day (and night) with gsap I'm super close to animate flex item resized caused by their parent flex direction change !

Almost, as the destination width when switching from column to row isn't right. I've done several attempt, more or less buggy or not working at all.

 

You may find the most advanced try in the pen linked.

It is curated, with few comments and console log for debuging

 

I've spend the day digging into the documentation, @ZachSaucier advices as well as in @OSUblake pens that I used to start from. For continuity and convenience here is the link to my first questions.

 

At this stage I managed to animate flex item position when changing its parent flex-direction, and to animate the flex-direction element when it is resized.

Thus the only thing left for a great user experience is to properly animate the resize of the flex item, caused by the change of their parent flex direction !

 

 

I hope one of you may have a look and provide a some few explanation on why it should be done a way rather than an other !

 

Thank's in advance !

 

Cheers

 

 

PS : I also tried the FLIP helper, without better results, and I feel it's better to keep the whole animation coded in on way, and not mixing the approach

PS2: i also got decent result with CSS transition, but in was only working one way, from row to column, and that's pretty mysterious to me ! 

See the Pen BaKPdaW?editors=0011 by jbonlinea (@jbonlinea) on CodePen

[Visual-Q]

RE:

@Visual-Q that looks closer, but not exactly right because things still jump sizes.

 

Updated, I accidentally posted the wrong pen originally; DOH! Looking at the previous pen I assume the goal was to end up with 50% wide elements in row view. You can do that with Blakes original solution and flex-basis:50%.

 

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

Though the new flip (next post) probably makes this moot. Flex basis will still allow you to make the items have an even width there as well.

[GreenSock]

@Visual-Q that looks closer, but not exactly right because things still jump sizes. 

 

Flexbox makes flip animations much more complicated because it's impossible to fully control the width/height of the elements. You can set width: 574px, for example, and the browser actually renders the width nowhere near that. If you're trying to animate to flex-direction: row from flex-direction: column you literally cannot make any of the elements fill the whole width of the containing element which would be essential for a smooth transition. 

 

The only solution I can think of is to toggle to position: absolute during the animation. 

 

I've been working on a brand new [experimental] Flip plugin that'll make this crazy simple. Here's a demo: 

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

 

Is that the effect you're looking for? 

 

Again, this is not an official plugin yet and the API may change, but I'm curious to hear what folks think of it. 

[jbonlinea]

Hi there

 

Whaaaat ! This flip plug-in looks magical ! It's indeed crazy simple, and that's exactly what I tried to achieve !

 

Thank's for your inputs  guys ! @Visual-Q I also tried to used flex-basis, it works to get the layout I'm after, but without animating the flex item width change, that jumps as noted by @GreenSock.

 

As I said elsewhere, I discovered gsap yesterday, in a attempt to animate flex-direction change AND the subsequent dimension (width/height) change on the flexbox itself, as well as the contained flex item. I now realize it wasn't the easiest thing to do, not to mention getting started with gsap. I'm a bit frustrated to have spend so much energy on something not doable, but glad to see the result with your plug-in !

 

To be honest, I was expecting gsap to handle this at once, exactly like your plug-in does, as flex-direction change do not only involve flex item position change, handled by gsap core, but also flex item and flexbox dimension (width/height), otherwise the layout jumps as we all see. It's great to see that coming in your plug-in !

 

Now the question is may I use it ?

I did edited you pen so it also handle flex item order ! it's insanely easy ! you set the css properties, the trigger, and the animation is building itself !

But it seems I can't fork your pen

 

 

Cheers

 

 

EDIT : is it possible to use timeline within FLIP animation ? for instance I add two different class to two different div, and I want the animation on the first div to start one second earlier than on the second div ?

[GreenSock]

14 hours ago, jbonlinea said:

I did edited you pen so it also handle flex item order ! it's insanely easy ! you set the css properties, the trigger, and the animation is building itself !

Indeed, we try to handle all the complex stuff so that it's super easy for you. Glad to hear it's working well for you. 

 

14 hours ago, jbonlinea said:

Now the question is may I use it ?

Sure, go for it. There's a chance the API may change before we "officially" release it, but there aren't any changes I know of right now. 

 

14 hours ago, jbonlinea said:

But it seems I can't fork your pen

That's just because it's a "private" pen. Didn't want Twitter going crazy with news of a new FLIP plugin from GreenSock

 

14 hours ago, jbonlinea said:

is it possible to use timeline within FLIP animation ? for instance I add two different class to two different div, and I want the animation on the first div to start one second earlier than on the second div ?

If I understand your question correctly, sure - the gsap.flip() method returns a timeline. You can do any of the following: 

• Set a delay directly in the flip (you can literally pass in any tween-related properties like delay, ease, onComplete, etc.). So use a different delay for a few different flip() calls. 
• Snag the result of the gsap.flip() and nest it in a timeline and use the position parameter to have total control of the timing. Like:

  let master = gsap.timeline(),
      flip1 = gsap.flip(...),
      flip2 = gsap.flip(...);
  master.add(flip1);
  master.add(flip2, 0.2); //offset by 0.2 seconds

Lots of options.

 

Does that answer your question adequately? 

[jbonlinea]

Hi

 

Thank's for theses elements

 

15 hours ago, GreenSock said:

 

If I understand your question correctly, sure - the gsap.flip() method returns a timeline. You can do any of the following: 

 

• Set a delay directly in the flip (you can literally pass in any tween-related properties like delay, ease, onComplete, etc.). So use a different delay for a few different flip() calls. 
• Snag the result of the gsap.flip() and nest it in a timeline and use the position parameter to have total control of the timing. Like:

  
  let master = gsap.timeline(),
      flip1 = gsap.flip(...),
      flip2 = gsap.flip(...);
  master.add(flip1);
  master.add(flip2, 0.2); //offset by 0.2 seconds

Lots of options.

 

Does that answer your question adequately? 

 

Yes it does, I did already use the first option you suggest but the example of the second approach is good to know !

 

 

And thank's as well, this is indeed what I tried to do.

But between my first and second post I complity changed the template from which I create my animation, the first one user the flexbox playground, that clone the div, while the second do not clone the div and seems much more resilient.

I guess I'll be able to port your input to the new one. At least I understand why my tries weren't working, simply because I was animatig the original div and not the cloned one, the only to be visible...

 

On 9/16/2020 at 4:06 AM, Visual-Q said:

RE:

@Visual-Q that looks closer, but not exactly right because things still jump sizes.

 

Updated, I accidentally posted the wrong pen originally; DOH! Looking at the previous pen I assume the goal was to end up with 50% wide elements in row view. You can do that with Blakes original solution and flex-basis:50%.

 

 

 

Though the new flip (next post) probably makes this moot. Flex basis will still allow you to make the items have an even width there as well.

 

Thank's guys

 

Cheers

[GreenSock]

Just circling back on this because I've made a bunch of enhancements to the Flip plugin which renders some of my earlier comments incorrect. gsap.flip() won't return a timeline anymore - it'll return a Flip instance which has various properties/methods, one of which is "animation" (which is the timeline). So you can get it like gsap.flip(...).animation. I'll be documenting things for the official release, of course. I did update the demo I put in the earlier post. 

[jbonlinea]

ok thank's for the update !