GSAP Scale Property Causing Problems

[innocean_dev]

I don't have a live example to show just yet, but here is my problem. I have a button with a shine that runs across it when you roll over. The shine is within a div that has its overflow property set to hidden. This is so the excess shine image is cropped. But when I animate the scale of any other element in my document, it releases the overflow on the button. When I scale an element back to normal size, the overflow property becomes hidden again. Why is the scale property causing that? (ex: TweenLite.to(object, .25, {scaleX:.5, scaleY:.5});

[PointC]

Hi innocean_dev 

 

Welcome to the forums.

 

I'm not sure I completely follow your question, but scaling a DOM element should not change the overflow property of another element. I don't know how you've set up your button, shine and other elements, but if overflow is changing upon tweening the scale, there is certainly a way to stop it from happening. 

 

To get you the best answers we really need to see a demo of your code. If you could make a CodePen showing the behavior, everyone will be more than happy to assist you in solving the problem. Please follow this link to learn more about making a CodePen:

 

How To Create A CodePen Demo

 

Thanks and welcome aboard.

[Jonathan]

I would second PointC regarding providing us with a codepen demo!

 

But this happens due to composited layers not being clipped by their parent layers. So sometimes you need to bring the parent with overflow hidden onto its own compositing layer so it can apply overflow hidden correctly.

 

Add this to the parent container of your transformed element:

// add to the parent of your transformed element
// so it is composited on its own layer before rendering
.parent-of-transformed-element {
     -webkit-transform: translateZ(0);
     transform: translateZ(0);
}

The above should work, but I believe this to maybe be a webkit bug / issue, since i usually don't see this behavior in Firefox, only webkit based browsers!

 

This can be caused by a majority of things. Mostly due to browser bugs and how they handle composited transformed elements before being rendered.

• sometimes adding specific transform values to the parent or an ancestor can help with this issue.
• even adding a transparent border around your parent container
• adding background and opacity: 0.99 to the parent container

But keep in mind their are known browser bugs regarding this behavior. A codepen demo will help us see the issue live.