Horizontal card flip feels off

[Cole Kerr]

Tried to replicate an effect submitted by joeworkman

I tried to switch his effect from a vertical card flip to a horizontal one (similar to the one he is basing his off of, but his markup and styles are closer to mine)

Why does the flip animation seem to not completely follow through in the second half of the animation? It goes from back to forward, but I can't see the second half of the flip go smoothly.

See the Pen vYZrrNL by colekerr (@colekerr) on CodePen

[OSUblake]

Welcome to forums @Cole Kerr

 

I don't think you need that rotationZ.

gsap.set(".qf-back", {
  rotationX: 180, 
  // rotationZ: 180
});

 

[Cole Kerr]

Thanks! Glad to be here.

I tried removing rotationZ, and the animation is how I want it, but now the front image is upside down when the card flips over (I just added some text to the blue side to make this clearer)

[nico fonseca]

2 hours ago, Cole Kerr said:

I tried removing rotationZ, and the animation is how I want it, but now the front image is upside down when the card flips over (I just added some text to the blue side to make this clearer)

Remove the rotationX:180  and set rotationY:180  

 

gsap.set(".qf-back", {
    rotationY: 180
});

See the Pen d545b63056a5335bae9abe60660b0c46?editors=1010 by nicofonseca (@nicofonseca) on CodePen

[Cole Kerr]

Works great, thanks everybody!