stoesselleon

Thank you @Sahil! This was exactly what i was going for.

Hello, I've searched this forum and have not yet found a real solution to what I am trying to do. It seems to be quit easy, but i always end up tangeled in the details. What I am trying to do: I have a flexbox layout with 3 items (first, second, third) I want to Animate their flex order with a Transition -> Decision for GSAP Flip First Step would be to move the second item to third place Second Step (after a delay) would be to move first item to second place This would end up with the third item in the first position (that is the goal) It's important, that this happens in these 2 Phases I have attached a minimal Demo. Unfortunately i'm a GSAP beginner so i have trouble figuring out my mistake. The end result of the animation is correct, but the starting points for the boxes does not look like what it should. Help here would be greatly appreciated. I think i might mess up the correct state collection or that this is not possible at all with GSAP Flip. In this thread I've read that it's not possible to animate flip with multiple phases. That's why i ended up choosing to move the other boxes (2 different elements down) instead of moving 1 element up twice. But I guess there might be the error, because both FLIP Timelines seem to be interpolating with each other... Best regards!

Hi @Rodrigo Thank you very much for your input! Changing the Layout to a flex column did not help unfortunately. And I also tried diffrent approaches to this. The point it gets stuck is always that the.grid-view comboclass "survives" on these 2 elements also when it should not do that. i can include my jQuery and GSAP code for that, but a minimal demo isn't realizable that easy because of the way the project is set up. Setting it up fresh & clean results in working fine, so i assume there is something wrong in the setup. <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.4/gsap.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.4/Flip.min.js"></script> <script> function indexFlip() { const change = Flip.getState( '.index_header-row, .index_item, .index_item-list, .index_list, .index_item-name, .index_item-logo, .index_item-abteilung' ) $('.index_header-row').toggleClass('grid-view') $('.index_item').toggleClass('grid-view') $('.index_item-list').toggleClass('grid-view') $('.index_list').toggleClass('grid-view') $('.index_item-name').toggleClass('grid-view') $('.index_item-logo').toggleClass('grid-view') $('.index_item-abteilung').toggleClass('grid-view') Flip.from(change, { duration: 0.5, ease: 'power1.inOut', fade: true, absoluteOnLeave: true, nested: true, prune: true, }) } //set Previous Radio Value one time on site load var prev = $("input[name='index-radio']:checked").val(); $('input[type="radio"][name="index-radio"]').on('change', function() { //Current Radio Value var curr = $(this).val(); //Cases in which GSAP Flip should happen if (curr == 'marke' && prev == 'wohnen') { indexFlip(); } else if (curr == 'wohnen' && prev == 'marke') { indexFlip(); } else if (curr == 'marke' && prev == undefined) { indexFlip(); } else if (curr == 'marke' && prev == 'marke') { indexFlip(); } //Set Previous Radio Value prev = $("input[name='index-radio']:checked").val(); }); </script> It's difficult to include much more here than this code. The link to the site is in the initial post. Furthermore I completely understand that you don't have the time to take a look at every single website that gets posted here. And I know there is a reason for excluding the problem to the minimal possible area. Thank you for the answer again, we might need to come up with another solution to this though

Hello, I wondered if somebody can help you with a issue that possibly caused by gsap flip. I am trying to implement the following on this site: https://schreiner-regensburg.webflow.io/sortiment Here I have a set of radio filters and a List of Items. Only when the Radio Filter "Marken" is active, the List should flip to a grid. This works wells in some occasions and looks great. The performance of the Filter should not be a problem, because the work close to instant. But a lot of the times the two classes .index_item-name and .index_item-abteilung won't get toggled the grid-view combo class correctly and thats when everything gets messed up. I've already tried to delay the layout flip after the filtering but that did not change anything. I have also tried to leave out all GSAP Flip arguments and it also happens if the grid-view combo class doens't triggerdisplay:none on these elements. I would really appreciate your help on why those two classes won't get toggled sometimes. Best regards, Leon