Jump to content
Search Community

Display: None -> Block causes Scale to be ignored

Jimmi Heiserman 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 am experiencing a bug in a larger project so I made a codepen to hopefully highlight my problem.

 

I have a div wrapped inside an outer container div.  In CSS, I want to hide the container with display:none, and I want to shrink the inner div to 0.5 scale.

Then in GSAP, I want to show the container by setting it back to 'block', and have the inner container realign via a from tween.

 

But when I combine a display toggle, with a scale, with a FROM tween, the scale of my inner div gets ignored. I can't seem to work through the logic on why this is? If I don't start with display:none in my CSS, the .05 scale is correct. OR if I change my last tween from a FROM to a TO, the 0.5 scale is also correct. But a FROM tween on the 'x' position causes the 'scale' to be ignored/dropped/overwritten?

 

the JS code copied here for a quick glance:

var tl = new TimelineMax();
tl.to('#outer', 1, {x:100, display:'block'});
tl.from('#inner', 1, {x:100});

 

(I know there are other ways to hide a div until you are ready to show it,  like alpha, opacity, autoAlpha, but in this particular case, is this a bug or just a conflict in the way I am approaching it?)

See the Pen YjZBjY by jimmi_heiserman (@jimmi_heiserman) on CodePen

  • Like 1
Link to comment
Share on other sites

Great suggestion, PointC.

 

Jimmi,

 

The reason for this is because some browsers will not report transforms when they are inside a parent with display:none or perhaps they themselves have display:none.

 

Please see this demo below in a webkit browser and open up the console. You will see no style.transform reported.

If you remove display:none from the #wrapper rule, then it will work.

 

See the Pen MBpNeQ by GreenSock (@GreenSock) on CodePen

 

 

  • Like 5
Link to comment
Share on other sites

I should also add that the reason this doesn't work is because for a from() tween you need to animate FROM whatever values you specify TO the current values.

If the browser won't tell GSAP what the current values are (because the parent is hidden) then GSAP does not have enough information to create a tween.

  • Like 3
Link to comment
Share on other sites

PointC,

 

Yes, setting scale with GSAP fixes my project's bug. Thanks! I guess the reason some browsers don't propagate their styles down through a hidden element is for performance reasons; a hidden element that has no tree to traverse would be exceptionally fast. But when this 'gotcha' happens, oh boy. But how does GSAP keep track of display:none styles when the DOM doesn't; in a separate data field in its own duplicate structure?

 

 

PointC and Carl, I read here and there on this forum about avoiding mixing CSS with GSAP for positions and rotations, etc. Over the weeks, I have been setting more and more styles using GSAP in the runtime JS and pulling it out of the CSS file. My CSS file is becoming decreasingly small with my JS growing. I have less and less faith in CSS implementation and more in GSAP. Would you argue it is best practice to try to do all styles directly through the GSAP engine if you have heavy use of animations? It is beginning to seem like that.

  • Like 1
Link to comment
Share on other sites

44 minutes ago, Jimmi Heiserman said:

Would you argue it is best practice to try to do all styles directly through the GSAP engine if you have heavy use of animations? It is beginning to seem like that.

 

Generally, I will use GSAP to set() almost every property that I plan to animate. It's easier for me to do that instead of looking through a lengthy stylesheet. Plus you'll never have any conflicts. Of course, there are many properties that will never be animated and I always leave those in the CSS.

 

Happy tweening.

:)

 

  • Like 4
Link to comment
Share on other sites

Another benefit to JS GSAP setting up styles, I often have an initialization function that sets everything in the beginning. If I need to call that function again, it is quite easy to 'reset' everything on the fly. In CSS, I don't even know how you can truly 'start over' during runtime. Thanks!

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