A little help with FLIP

[FNT]

Hi guys, maybe it's a beginner question. But I can't get this to work or haven't quite grasped the concept yet. I am trying to smoothly morph the ".projects-state-n" classes one by one. I take the current state, replace the old class with the new one and do FLIP. What did I miss?

See the Pen yLGdOwE by tomaszter (@tomaszter) on CodePen.

[Rodrigo]

Hi @FNT and welcome to the GSAP forums!

 

First thanks for being a Premium user and supporting GSAP! ?

 

I think the biggest issue is in the calc() function you have on your CSS. There must be an space in order to work properly:

/* Wrong */
.projects-state-1 {
  position: absolute;
  height: 100%;
  top: 160px;
  left: 24px;
  right: 24px;
  width: calc(100%-48px);
  background: #bdb4a6;
}

/* Right */
.projects-state-1 {
  position: absolute;
  height: 100%;
  top: 160px;
  left: 24px;
  right: 24px;
  width: calc(100% - 48px); /* <- SPACE BETWEEN THE SIGN AND VALUES */
  background: #bdb4a6;
}

Also there is no need to tell Flip to check for the transform and inset properties in the getState method, since neither of those are changing when you add/remove the classes.

 

Here is a fork of your codepen:

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

 

Finally here is what I believe is a less convoluted approach:

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

 

Hopefully this helps.

Happy Tweening!

[FNT]

Yes, that helped! Sorry for the confusion with the props, the styling is more complex in reality than in this demo. I thought the props were an addition rather than a rule. Anyway, leaving them out fixed the problem.

 

By the way, the wrong CSS Calc prompt was not the problem. I'm using Tailwind CSS and just converted it too quickly.

 

Many thanks to you guys! FLIP is really fun!