GSAP Flip "forgets" some class toggles

[stoesselleon]

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

[Rodrigo]

Hi @stoesselleon and welcome to the GreenSock forums!

 

Is really hard for us to troubleshoot an issue without a live minimal demo.

 

What I could suggest is to try to create a flex column grid and use Flip for that, as shown in this example:

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

 

Hopefully this helps. If you keep having problems, please remember to include a minimal demo.

Happy Tweening!

[stoesselleon]

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  

[Rodrigo]

Hi,

 

Indeed without a minimal demo that we can tinker with is really hard. Is not that we refuse to debug live sites, it's just far easier to play with something that we can edit and change, which makes it easier and faster, which is a benefit not just for our Moderators and ourselves, but allows us to offer faster support to our users.

 

The only advice I can give you is to check your conditional logic block, there is a lot of if and else if conditions there and you don't have a final else (which acts as a default case). If I was you I'd completely remove GSAP and Flip from the equation and just tinker with classes in order to show and hide stuff, once that is working put Flip back in the mix. Also try to keep the Flip state as simple as possible, right now you're getting the state from a lot of elements, just get the single wrapper for the column and animate just that, not a lot of elements. I know that animating a cool staggered sequence for each element looks super nice, but just start simple. Remove the whole column and then start adding more elements to the animation.

 

Happy Tweening!