Jump to content
Search Community

Greensock JS RotateX Tab experiment

bobby kc 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 and welcome to the Greensock forums.

 

Any particular reason to rotate the parent and not the child element?. If you check this codepen you'll see that rotating the child element has the desired effect in IE10:

 

See the Pen vjGxH by rhernando (@rhernando) on CodePen

 

Also keep in mind that preserve 3D is not supported in IE10 and it won't be supported in IE11 either. Perhaps in IE12 or maybe in IE199 ;), but definitely not in the short term. That's why in the link's sample every child is rotated, so it can work on IE10-11.

 

Rodrigo.

  • Like 1
Link to comment
Share on other sites

Hi,

 

I set up a very simple codepen. It was made with buttons and not the li elements, but is the concept of the child elements being rotated what matters. The CSS  for using li instead of buttons is pretty standard stuff and you've already got that working.

 

See the Pen qjIEn by rhernando (@rhernando) on CodePen

 

Of course it still needs some tweaking regarding specific events, for example if the user clicks on another tab while the previous is animating, you get a pretty ugly behaviour, but that can be sorted out easily.

 

Best,

Rodrigo.

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