flip.getstate not taking the the parent div transform values in account

[roshit121]

i am trying to use flip animation to animate a child div whose parent has some transform property to it. when i initiate the animation, these transform values dont seem to get stored in the getstate, so the animation jumps and only starts to animate.

See the Pen XJjjRKY by RoshitShrestha (@RoshitShrestha) on CodePen.

[Rodrigo]

Hi,

 

There are two things that are causing the issue here:

1. The card (red element) is the only one being changed here so there is no need to get the state of the parent as well, since the parent is not being flipped, just the card.
2. One of the parent elements has a scale applied to it:

   .card-parent {
     transform: scale(0.8);
   }

   So you need to tell Flip that a scale is being applied otherwise things will look super weird. For that you can use the scale config option:
   https://gsap.com/docs/v3/Plugins/Flip/#scale

Here is a fork of your demo with those fixes:

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

 

Is that what you're trying to achieve?

 

Hopefully this helps

Happy Tweening!

[roshit121]

@Rodrigo Thanks! this is exactly what i was looking for.