Jump to content

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

Flip card with perspective

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

Hello !


I'm new using TweenMax. I try to make a slider that flip the image instead of just "sliding". The animation works great, but in order to have some realism, I add perspective on my cards, but the animation is totally broken with it. You can try my CodePen example, and remove/add the perspective to see what I mean.


Does someone have an idea ? Thanks !


See the Pen eGveZP by Treast (@Treast) on CodePen

Link to comment
Share on other sites

Hi and welcome to the GreenSock forums,


Thanks for the demo.


I think with perspective you just have to make sure your elements are centered in their container so that it appears you are looking straight at them.

I edited the css a little and I think this is what you are trying to do.


.image {
 backface-visibility: hidden;
  perspective: 1000px;


See the Pen pWPoaZ by GreenSock (@GreenSock) on CodePen

I didn't change any JavaScript as it seems things were working they you wanted without the perspective being set.

  • Like 2
  • Thanks 1
Link to comment
Share on other sites

Hello !


I try your solution on my page, which is a bit more complex than the pen, and it works great ! Thank you 

  • Thanks 1
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.