Jump to content
GreenSock

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

How can I smoothen rotateY tranform in Safari?

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

I first tried using CSS, but when I was informed that it looks buggy on Safari, I tried with Greensock to see if it fixes it. It still has the same issues, but ONLY on Safari. After a bit of research I saw it discussed on StackOverflow as a Safari bug. 

 

The bug is: while doing the transition, half of the element seems to transition differently than the other half. It shows a line in the middle, like if the element was made of paper and was bending in half.

 

Is there any way around it? I presented a few animations to the client, but this animation (rotateY) was the unanimous selection.

 

Note: I am somewhat new to Javascript and Greensock. You may notice better ways to do what I did. I wouldn't mind suggestions on improving it, but what I am really after is a solution to the bug/glitch.

 

Thank you for your time.

See the Pen jbQvBy by ricardoh (@ricardoh) on CodePen

Link to comment
Share on other sites

Hello rhormazar,

 

Try adding transformStyle:"preserve-3d" and backfaceVisibility:"hidden" using the GSAP set() method on for your .iconBG elements.

 

See the Pen XmyyGR by jonathan (@jonathan) on CodePen

TweenMax.set('.iconBG', {
      backfaceVisibility:"hidden",
      transformStyle:"preserve-3d"
});

I tested on a IPAD Air Safari

 

You can also add perspective like Diaco advised if you need perspective, a good starting transformPerspective value would be 1000px

TweenMax.set('.iconBG', {
      backfaceVisibility:"hidden",
      transformStyle:"preserve-3d",
      transformPerspective: 1000
});

GSAP set() method: http://greensock.com/docs/#/HTML5/GSAP/TweenMax/set/

 

You can also add a slight z:0.01 but depends.. i really didn't see that line when rotating on the y-axis on the IPAD Air Safari, like you described above.

 

See if that helps

 

:)

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

×