se7en

I tried out OSUblake's solution and it almost worked. Only issue was that I was getting scrollbars under certain circumstances and setting the width/height to 0 didn't eliminate the problem. Adding "overflow:hidden" seems to sort the problem. Thanks for your help

Adding position absolute together with visibility hidden and width:0 seems to work on my initial testing! I will try it tomorrow morning. (it is very late here!) Still, a bit of a hassle because I am using angular and the ng-show directive which uses "display:none". I will have to ditch that and use a custom function.

Probably we are talking about different things. Here is a super basic example that demonstrates the difference: http://codepen.io/se7en/pen/ZQoeLy display:none - Turns off the display of an element (it has no effect on layout); all descendant elements also have their display turned off. The document is rendered as though the element did not exist. https://developer.mozilla.org/en-US/docs/Web/CSS/display visibility:hidden - The box is invisible (fully transparent, nothing is drawn), but still affects layout. https://developer.mozilla.org/en-US/docs/Web/CSS/visibility My exact situation is a bit too complicated to create a pen for it. I am not "display:none" the svg directly, but a div that contains (among other things) inline SVGs. In the codepen above setting the height to 0 has the same visible effect as display:none (you don't even need to set visibility to hidden) but in my more complicated structure setting visibility:hidden, height:0 and width:0, does not have the same effect as display:none. Some other things inside that div prevent it from totally collapsing.

Thanks, but as I mentioned "visibility:hidden" doesn't work for me since it still affects the layout. It is not the same as display:none. Is there a way to target whatever animation exists inside an element with pause and play? e.g. pauseChildTweensOf and playChildTweensOf (similar to the existing killChildTweensOf). Such functionality would be helpful so I can pause the animation before I set display:none and prevent this from happening.

Hello, I am animating some SVG graphics and I am getting the "NS_ERROR_FAILURE" error on firefox when the display is set to none on certain elements. I searched the forum and I found a recommendation to use "visibility: hidden" instead, but that is a different effect since display:none removes the element from the normal flow, while visibility: hidden just hides it (but it still takes up space). Any other recommendations for dealing with issue? I tried to pause animations before "display:none" is applied on them and then play them again after they are shown, but this is a big hassle because what is shown and what is displayed and where is controlled by the user. It would require a lot of code to deal with this bug in this way.

Thanks for the detailed answer. I read the article you linked to and I agree with your points. I sometimes wonder why the browsers don't include all major javascript libraries like some browsers include the flash player, and then use the local version if the author links to the CDN file. In any case the technique you supplied earlier seems to work, but in the last couple of days that I used TweenMax I started using the bezier functionality also. Do you think it would be better to use TweenMax instead of TweenLite + css + bezier plugins? Also, when you say that TweenMax is 34Kb is that after gzip, or thats the size without the included plugins? (because TweenMax.min.js seems to be 105kb)

Thanks, I will try out that solution with TweenLite! I am still bothered a bit by the file size of TweenMax. I know GSAP is quite popular but it is not "jQuery popular" so I assume that CDN/caching would not be as effective. Maybe the repeat/yoyo functionality could be part of a small plugin for TweenLite, like most other features seem to be?

Thanks. I guess will have to use TweenMax then

Hello, What I am trying to do is animate some SVG icons and I choose GSAP because of the various issues some browsers have when dealing with CSS animation of SVG elements. It appears that TweenLite+CSSPlugin can do everything that I need. The only thing that I need that TweenLite doesn't give me is the repeat and yoyo functionality. I tried to simulate that functionality by using "onComplete:reverseThis, onReverseComplete:restartThis (where reverseThis is a function that just calls this.reverse() and restartThis calls this.restart() ) This solution seems to work initially, but if I let the animation run for a while the various elements go out of sync. This doesn't happen when I use the native repeat:-1 and yoyo:true functionality of TweenMax. I looked at the plugins and there doesn't seem to be a plugin that will give me the repeat and yoyo functionality with TweenLite. Is there a way to do what I need without the need to load the whole TweenMax? Thank you