Jump to content
GreenSock

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

rotationX only see half image while rotating

Recommended Posts

Hello

I'm using rotationX on a png. I only see half the png on rotation. When it stops I see the whole image.

See something missing in the code? Thanks

 

TweenLite.set(pie, {perspective:800, transformPerspective:800});

 

var tl;
 
  tl = new TimelineLite({}); 
  tl.to(pie, .5, {autoAlpha:1, immediateRender:false})
    .from(pie, 1.5, {x:"-=100", scale:1.5, rotationX: 90, transformOrigin:"left center", ease:Power2.easeInOut}, "-=.5")
Link to post
Share on other sites

Hi sirhclluk  :)

 

I'm not seeing anything in the code that would explain half of your image disappearing upon rotation. That being said, I don't know what the pie variable is or anything about your CSS. Is pie the image itself or some containing div? Is it going outside the bounds of something that has overflow set to hidden? It's tough to troubleshoot without a CodePen demo. If you could provide one for us, that would get you the best answers.

 

http://greensock.com/forums/topic/9002-read-this-first-how-to-create-a-codepen-demo/

 

Happy tweening.

:)

  • Like 4
Link to post
Share on other sites

It's working here.

See the Pen wWXAJB by sirhclluk (@sirhclluk) on CodePen

 

I'm using google web designer, so the problem is in there then.

And it's actually only a problem in safari. Works fine in Chrome.

Link to post
Share on other sites

Hello sirhclluk

 

I noticed on LINE 1 you are mixing CSS perspective and transformPerspective on the same element.

 

Since you have no children for your .red div, then there is no need to use perspective property. You should then only use transformPerspective on .red element.

 

You really shouldn't be mixing perspective and transformPerspective on the same element. That will cause rendering issues, and webkit has a bug when both are used on the same element.

 

I would recommend either using only:

So it is best to just use either or depending on what your needs are.

 

:)

  • Like 2
Link to post
Share on other sites

Thanks Jonathan

I was just trying anything to get it to work. I tried both by themselves, but still not working right in Safari with perspective or transformPerspective.

Link to post
Share on other sites

Hello sirhclluk,

 

The best thing to do is to create a codepen demo example like PointC advised above, so we can see your code in context.

 

http://greensock.com/forums/topic/9002-read-this-first-how-to-create-a-codepen-demo/

 

 

Without a code example, then we can not test against a specific browser with your specific code.

 

Thanks!

Link to post
Share on other sites

It's in my second post. Here it is again.

It's working here.

See the Pen wWXAJB by sirhclluk (@sirhclluk) on CodePen

 

I'm using google web designer, so the problem is in there then.

And it's actually only a problem in safari. Works fine in Chrome.

Link to post
Share on other sites

Are you saying that the codepen you provided does NOT work? I looked at it in Safari and it seemed identical to what I saw in Chrome. Am I missing something? 

  • Like 1
Link to post
Share on other sites

I am seeing the same rendering in both Safari and Chrome like Jack.

  • What Safari version?
  • And what OS and OS version are you seeing this on?
  • On what device?
Link to post
Share on other sites

Thanks for the response guys. Yes it works just fine in codepen. 

So the problem is when published from google web designer. 

In that case in Safari only, half the image is shown during rotation.

I've asked in their forums also with no luck yet.

 

Thanks!

Link to post
Share on other sites

As far as I know, Safari is the only browser that will render elements in a way that intersects the planes. So imagine two pieces of paper, one laying on top of the other one, and then you take the top one and rotate it on its x-axis - Safari would make half of it go behind the paper it was sitting on top of, chopping it off visually. An argument could be made that this is more "correct", but it's just annoying for a lot of web developers. 

 

It sounds like you're running into that issue. Perhaps try offsetting the element's "z" (or "translateZ" in some tools), kinda like picking up that piece of paper and making it float above the other one enough to not have them intersect when the rotation occurs. 

  • Like 1
Link to post
Share on other sites

Nice Jack, I was about to suggest the same thing! I always seem to have to the very thing you recommended with increasing the z-axis value, right on!

 

:)

  • Like 1
Link to post
Share on other sites

I tried moving the translate3D z around before, but just small numbers like 2 or 10.

A translate3D z of 80+ on the rotating object seems to do the trick. Or around -30 on the shape below it.

But the better solution for this particular banner was to just remove the color div below it that the object was sort of slicing through.

 

Thanks for the help. Here's to cool movements.

  • Like 1
Link to post
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.

×