Jump to content
Search Community

Card Folding Animation

fingo test
Moderator Tag

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

Hi,

 

We are having issues trying to finesse a card folding animation.

 

Basically we would like to have a square with sides folding out from within the square to create an unfolding effect.

 

If you take a look at the Codepen you should be able to get an idea of the effect.

 

We are currently using scaleX but unsure if this is the best and way to achieve this type of effect?

 

Many Thanks

 

 

See the Pen KWPmqw by Pelucchi (@Pelucchi) on CodePen

Link to comment
Share on other sites

Hi fingo :)

 

Welcome to the GreenSock forum.

 

We've had few discussions about perspective and rotating divs in 3D. Here's one I think can help:

 

https://greensock.com/forums/topic/14658-unfolding-div/

 

Jonathan is the expert with all things involving 3D and perspective in the browser. He's got a bunch of 3D cubes and other great demos in his CodePen collection. Check him out for more ideas:

 

http://codepen.io/jonathan/

 

Happy tweening.

:)

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