Jump to content
GreenSock

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

Counter flip animation with Gsap, Alpine

Recommended Posts

6 hours ago, GreenSock said:

There were some logic problems in your code. I assume this is what you want?: 

 

 

Thank you so much for optimizing my code.
I want to flip animate the card like a flip clock.

Link to comment
Share on other sites

2 hours ago, Dan00x said:

I want to flip animate the card like a flip clock.

I'm not quite sure what you mean, but feel free to give it a try in a CodePen and then explain what exactly you're struggling with. In terms of a flipping, you may just need to animate the rotationX property of the <div> elements and put a perspective on them.

 

Good luck!

  • Like 1
Link to comment
Share on other sites

We don't have the resources to help you build that out for free, but you just a posted a good example that you should be able to modify to adapt to your situation. In the onUpdate, you would call the code that is currently inside the setInterval.

  • Like 2
Link to comment
Share on other sites

Yep, @OSUblake is exactly right. Also, that demo you provided doesn't render correctly in Safari, probably because Safari handles 3D stacking order differently than any other browser, so you'll likely need to tweak the z value slightly. Just a tip. Good luck! If you still need help, you're welcome to post in the "Jobs & Freelance" forum to see if you can hire someone.  

  • Like 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.
×