Jump to content
Search Community

Transformations on hidden elements get ignored

qarlo test
Moderator Tag

Go to solution Solved by Jonathan,

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

Hello,

I was trying to figure out a problem with an animation and after a while I noticed a weird behaviour.

 

Basically, if I set the css property "visibility: hidden" to an element and I try to apply a transformation to this element, the transformation gets ignored. I know that stuff like this can happen when using "display: none", but with visibility too?

 

It is weird also considering that with autoAlpha it works as expected.

 

I show this in the pen I posted.

Though, maybe I'm wrong and this is the way it's supposed to be?

See the Pen XjEaay by qarlo (@qarlo) on CodePen

Link to comment
Share on other sites

Hello qarlo, and welcome to the GreenSock Forum!

 

Instead of setting initial to visibility: hidden .. try just setting autoAlpha: 0

 

Chrome and Safari have some weird bugs that affect elements with visibility: hidden when calculating transforms.

 

What browser you seeing this in?

  • Like 2
Link to comment
Share on other sites

Hi qarlo :)

 

Please try a little change in your tween:

//switch this
.set('.one', {css: {visibility: 'hidden'}, x: 100})
//to this
.set('.one', {visibility: 'hidden', x: 100})

Making that change should give you the desired outcome. Please keep in mind that you can't animate visibility. It's either hidden or visible. As Jonathan suggested, please use autoAlpha or opacity.

 

Happy tweening

:)

  • Like 2
Link to comment
Share on other sites

Instead of setting initial to visibility: hidden .. try just setting autoAlpha: 0

 

 

//switch this
.set('.one', {css: {visibility: 'hidden'}, x: 100})
//to this
.set('.one', {visibility: 'hidden', x: 100})

Making that change should give you the desired outcome. Please keep in mind that you can't animate visibility. It's either hidden or visible. As Jonathan suggested, please use autoAlpha or opacity.

 

Well, in my question I already pointed out the different behaviour using "visibility" and using "autoAlpha", so I was aware of it and already figured out that autoAlpha works the way I want. Also, I wasn't try to animating it. I was just concerned about the different behaviour when setting the "visibility" property. I thought it might be some kind of a bug. The modified code you posted here works, but then to me the behaviour seems even more inconsistent now.

Link to comment
Share on other sites

This same behavior can also be seen if you try and use visibility with a CSS transition. In that case you still have to set the CSS transition to use both visibility and opacity in order to see a fade. It only gets applied at either the start and end of the transition, but not in between.. whether it is animated via CSS or JS.

 

See the visibility spec regarding when animated:

 

https://drafts.csswg.org/css-transitions/#animtype-visibility

  • visibility: if one of the values is visible, interpolated as a discrete step where values of the timing function between 0 and 1 map to visible and other values of the timing function (which occur only at the start/end of the transition or as a result of cubic-bezier() functions with Y values outside of [0, 1]) map to the closer endpoint; if neither value is visible then not interpolable.

GSAP can animate any numerical javascript object or property. The CSS property visibility does not have a numerical value but a string. So you cant animate a string value to another string value, just as PointC pointed out. GSAP can only do what the browser will allow based on each browser vendor follows the spec.

 

CSS visibility is a binary value (0 or 1) (hidden or visible) but it only toggles off and on .. 0 to 1. It doesn't interpolate 0 on a sub-pixel level like 0.1, 0.2, 0.3, 0.4.. etc.. like opacity does. CSS visibility just toggles on and off after the opacity property has been interpolated at its ending value of 0 or 1. CSS visibility is a static string value, and is not numeric. So the browser cant interpolate between 2 strings ("hidden" or "visible")

 

Even though the spec has CSS visibility as animatable it does not interpolate overtime like opacity, it is just an binary index value.. off and on (0 to 1). That is why CSS opacity is combined with CSS visibility, with visibility just set at the end of opacity transitioning to 0 or 1 (hidden or visible)

 

Resources:

https://drafts.csswg.org/css-transitions/#animtype-visibility

https://developer.mozilla.org/en-US/docs/Web/CSS/visibility#Interpolation

 

Happy Tweening :)

  • Like 2
Link to comment
Share on other sites

This same behavior can also be seen if you try and use visibility with a CSS transition. In that case you still have to set the CSS transition to use both visibility and opacity in order to see a fade. It only gets applied at either the start and end of the transition, but not in between.. whether it is animated via CSS or JS.

 

Thanks for your detailed answer, but I was trying to show something else.

In this pen  you can see that the second box gets translated to the right, while the first one doesn't. I know that one can't animate the "visibility" property and I wasn't trying to do that.

I only wanted to point out that when setting the visibility through the css property in greensock, the transformation is ignored. I thought this might be a bug, or at least an inconsistent behaviour, even though probably it's not that important

Link to comment
Share on other sites

  • Solution

I noticed in your example that you were placing x outside of the css:{} wrapper

 

So you have this.. x is outside the css:{} wrapper, so it is ignored

.set('.one', {css: {visibility: 'hidden'}, x: 100}) // x will be ignored since outside of css:{}

It should be this, like PointC advised above

// x inside the css:{} wrapper
.set('.one', {css: {visibility: 'hidden', x: 100}})

// or dont use the css:{} wrapper and just do this without it
.set('.one', {visibility: 'hidden', x: 100})

x
Your example with that change:

 

See the Pen KgoYgv?editors=0010#0 by jonathan (@jonathan) on CodePen

 

:)

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