Flip plugin - animation between classes / css variables / states only happens during certain times

[existensual]

https://chimetrendspro.wpenginepowered.com

 

Tough to describe this problem, but if you go to that url, scroll down to elemental table looking section, click the bottom row (makes them bigger and upper panels smaller) and vice versa when clicking the top row after that. It doesn't animate between the 2 states - unless you click top or bottom rows quickly during the time they're supposed to animate - then they animate.

 

Here's the initial CSS + code that happens on click:

 

--view-size: clamp(0px,50rem,1920px);

--item-size: calc(var(--view-size)* .18);

 --item-size-clamp: clamp(191px, var(--item-size), 16vw);

 --item-spacing: calc(var(--item-size-clamp)* .05);

 

/* Big State */

 

#trend-dfg .dp-dfg-item.big-state {

  width: var(--item-size-clamp);

  height: var(--item-size-clamp);

}

 

/* Small State */

#trend-dfg .dp-dfg-item.small-state {

  width: calc(var(--item-size-clamp)* .475);

  height: calc(var(--item-size-clamp)* .475);

}

 

$('#trend-dfg .dp-dfg-item:nth-child(-n+10)').addClass('big-state'); // makes first 10 items big

 

$('#swap-click').on('click',function() {

 

                    $('#trend-dfg .dp-dfg-item').toggleClass('small-state big-state'); // toggles big to small, small to big

 

                    console.log('swap click');

 

                    let state = Flip.getState(".dp-dfg-item");

                   

                    Flip.from(state, {

                        duration: .5,

                        stagger: 0.07,

                        absolute:true,

                        nested: true,

                        ease: "power4.out"

                    });

});

 

[Rodrigo]

Hi @existensual and welcome to the GSAP Forums!

 

Is really hard for us to get a clear idea of what could be the issue without a minimal demo. If possible please fork this starter codepen that loads all the GSAP Plugins in order to create a demo that clearly illustrates the problem you're having:

See the Pen aYYOdN by GreenSock (@GreenSock) on CodePen.

 

Also by checking the code snippet you posted, you're ignoring the way Flip actually works, especially with the from() method. This is the normal flow:

1. Get the state of the element using Flip.getState()
2. Make changes on the DOM by changing the DOM, applying classes, etc.
3. Animate using Flip.from()

You are doing 2-1-3 in your code, so maybe try doing this:

$('#swap-click').on('click',function() {
  // 1 Get the element's state
  let state = Flip.getState(".dp-dfg-item");

  // 2 Update the DOM or make changes with classes
  $('#trend-dfg .dp-dfg-item').toggleClass('small-state big-state'); // toggles big to small, small to big
  
  // 3 Animate using Flip.from()
  Flip.from(state, {
    duration: .5,
    stagger: 0.07,
    absolute:true,
    nested: true,
    ease: "power4.out"
  });
});

 

Finally thanks for being a GSAP Club member and supporting GSAP! 💚

 

Hopefully this helps

Happy Tweening!

[existensual]

lol, that fixed - I was doing getState()  too late - changing the order corrected it. And sorry about the codepen, I included a link to the live page, would be too much to create a pen for.