Jump to content
Search Community

GSAP Scale Property Causing Problems

innocean_dev 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

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});

Link to comment
Share on other sites

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.

:)

  • Like 3
Link to comment
Share on other sites

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.

 

:)

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