Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
Cole Kerr

Horizontal card flip feels off

Go to solution Solved by nico fonseca,

Recommended Posts

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

Link to comment
Share on other sites

Welcome to forums @Cole Kerr

 

I don't think you need that rotationZ.

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

 

Link to comment
Share on other sites

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)

Link to comment
Share on other sites

  • Solution
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

  • Like 2
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×