GSAP3 Card Flip

[joeworkman]

I am trying to setup a card flip animation using GSAP3. I have the basics working great. However, I am trying to also animate the `z` property of the wrapper in order to make it look like it lifts off the page. Buts its not working. Here is my CodePen... 

 

 

I was trying to replicate the example done here...

 

See the Pen vjGxH?editors=0110 by rhernando (@rhernando) on CodePen

See the Pen bGpZqEO by joeworkman (@joeworkman) on CodePen

[PointC]

Hi @joeworkman

 

I think you'll achieve the desired results by moving your perspective to the parent container.

 

gsap.set(".quickflip", {
  transformStyle: "preserve-3d",
  transformPerspective: 1000
});

Happy tweening.

 

[joeworkman]

Oh I feel so stupid now! How obvious...