Jump to content
Search Community

Rotate text like a3D cube

Devotee007 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, 

 

I'm trying to do a text animation like the one they have don in this YouTube-video in the end:

 

Been trying a lot of different values on rotationX,  transformPerspective and transformOrigin", but I just can't make it work. :-/ Any help to get started in the right direction would be very appreciated.

Link to comment
Share on other sites

Check out this lil' library >
http://mbmedia.cc/stuff/dom3d

Docs >
http://mbmedia.cc/stuff/post-assets/dom3d/docs/index.html

You can probably use the example they have right there on the page. Obviously adjust the width of the cube. Add your text to the appropriate faces. Hide the div content other than the text, make background transparent, etc etc (the faces of the cubes are divs). Then just use GSAP to spin it in 3D using the Dom3D props (rotX, rotY, etc...just read the docs). You can probably use just about everything in the example. Check the docs and read the OrthoFace section.

TweenMax.to(cube, 1, {rotX:200 etc etc etc});

When you're done, it'd be great to post a working example here for others as well. I'm sure there will be others asking this too.

  • Like 1
Link to comment
Share on other sites

Not entirely sure what you mean by "space between the letters". If you mean a gap between the text above and below, try adding the text to a div container within each face, and making each container taller.

As far as your animation goes, you may want to try recreating the cube using PaperElement3D and have one side of the face blank, and the other side with the text. This way you don't see the text on the other side of the 'cube' as it's spinning. So make the sides of the cube using PaperElement3D, adjust positioning of the faces, and then use Group3D to spin as a whole.

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...