jbonlinea

Hi Thank's for theses elements 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... Thank's guys Cheers

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 ?

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 !

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

Hi Well actually I discovered gsap looking for a solution to animate flexbox, and bumped into the playground ! It's pretty amazing, but it do duplicate the item content, why I don't know, but I first belived it was gsap way of implementing animation. Now I know it's not, and I'm glad because I don't want that, it's a pain in the as* if you programmatically populate you div. With this in mind, I'll work on the other questions I have opened elsewhere, which may well pave the way to solve this one too . I'll let you know Cheers

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 !

Hi ok, basically I took this pen, and try to update it in this one. I think I'm good everywhere but on line 21 It would be great if you coud have a look ! Regards

hi there I could read in the documentation on how to migrathe that _gsTransform is depreciated in gsap3, ok. It further suggest to edit our old code like such // old element._gsTransform.x // new gsap.getProperty(element, "x") That's sounds doable, but in some case the code not use this syntax, for instance in some pen referenced by experienced user in this post where the property is not defined, node being an object of the DOM see below : transform: node._gsTransform, x: node.offsetLeft, y: node.offsetTop, node How are we suppose to migrate this ? I did several try without success Thank's

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 ?

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 flex-direction, in a much more lightweight way than the playground playground. 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 https://codepen.io/jbonlinea/pen/XWdBWEY Thank's in advance

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

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

Hi Thank's for your reply I curated the demo to let only the needed material, sorry I was trying something else at the same time. Basically there are two button that enables to switch between flex-direction and order : this if fine The items are animated, pretty neatly, however the item content with the video have a weird behaviour. Basicaly, if I'm right tween duplicate the div, hide the original ones, and make the calculation and resize the duplucateds ones. ok What happends is that, when switching from row to column flex direction, or the orther way round, the original and duplicated div content are not hidden and resized as neatly as I expected. From row to column, the video is displayed in full size behind its duplicate that is indeed nicely resized from column to row the div is resized without animation and we an see its duplicate being resized smoothly over it Hope I'm understandable Thank's for your support

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 https://codepen.io/jbonlinea/pen/BaKVrVQ I hope this anwers, but let me know if you need further details Regards

Hi I did created a nice animated flexbox desing thank's to gsap and your playground ! I'm still facing an issue, as when the item are resized, the item and clone item content are displayed in a weird way ! Is is possible to properly animate flex div containing an embed video ? Thank's

Hi there, I did used this playground 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 https://codepen.io/aPinix/pen/CubGg https://codepen.io/GreenSock/pen/Bzhji https://codepen.io/GreenSock/pen/yXWmPO