Reverse issue with display: "block".

[jesper.landberg]

Hi,

 

I have a problem I have encountered a couple of times. If I have a timeline and some code.. something like this for example:

var tl = new TimelineLite({paused:true}};

tl
.set(element, { display: "block" })
.from(element, 1, { alpha: 0, ease: Power2.easeInOut });

$('a').click(function(e){
    e.preventDefault();

    var self = $(this);

    if(self.hasClass('active')){
        self.removeClass('active');
        tl.reverse();
    } else {
        self.addClass('active');
        tl.play();
    }

});

Sometimes, randomly, the tl.reverse(); won't reverse display: "block" to it's initial state, why is this and is there any solution?

[Jonathan]

Hello jesper.landberg,

 

Without seeing your code in a live editable environment it will be hard to test your code. Here is a video tut by GreenSock on how to create a codepen demop example so we can better help you:

 

 

But i would just set the element you want hidden with a CSS property of visibility:hidden in your stylesheet for your element you want hidden on page load.

 

And then you would animate autoAlpha instead of alpha.

 

autoAlpha is found in the GSAP CSSPlugin Docs:

 

http://greensock.com/docs/#/HTML5/GSAP/Plugins/CSSPlugin/

• autoAlpha
  Identical to opacity except that when the value hits 0 the visibility property will be set to "hidden" in order to improve browser rendering performance and prevent clicks/interactivity on the target. When the value is anything other than 0, visibility will be set to "inherit". It is not set to "visible" in order to honor inheritance (imagine the parent element is hidden - setting the child to visible explicitly would cause it to appear when that's probably not what was intended). And for convenience, if the element's visibility is initially set to "hidden" and opacity is 1, it will assume opacity should also start at 0. This makes it simple to start things out on your page as invisible (set your css visibility:hidden) and then fade them in whenever you want.

Example of autoAlpha usage:

//fade out and set visibility:hidden
TweenLite.to(element, 2, {autoAlpha:0});

//in 2 seconds, fade back in with visibility:visible
TweenLite.to(element, 2, {autoAlpha:1, delay:2});

Using autoAlpha is better on performance when showing and hiding elements.

 

[jesper.landberg]

 

Hello jesper.landberg,

 

Without seeing your code in a live editable environment it will be hard to test your code. Here is a video tut by GreenSock on how to create a codepen demop example so we can better help you:

 

 

But i would just set the element you want hidden with a CSS property of visibility:hidden in your stylesheet for your element you want hidden on page load.

 

And then you would animate autoAlpha instead of alpha.

 

autoAlpha is found in the GSAP CSSPlugin Docs:

 

http://greensock.com/docs/#/HTML5/GSAP/Plugins/CSSPlugin/

• autoAlpha

  Identical to opacity except that when the value hits 0 the visibility property will be set to "hidden" in order to improve browser rendering performance and prevent clicks/interactivity on the target. When the value is anything other than 0, visibility will be set to "inherit". It is not set to "visible" in order to honor inheritance (imagine the parent element is hidden - setting the child to visible explicitly would cause it to appear when that's probably not what was intended). And for convenience, if the element's visibility is initially set to "hidden" and opacity is 1, it will assume opacity should also start at 0. This makes it simple to start things out on your page as invisible (set your css visibility:hidden) and then fade them in whenever you want.

Example of autoAlpha usage:

//fade out and set visibility:hidden
TweenLite.to(element, 2, {autoAlpha:0});

//in 2 seconds, fade back in with visibility:visible
TweenLite.to(element, 2, {autoAlpha:1, delay:2});

Using autoAlpha is better on performance when showing and hiding elements.

 

 

Thanks for the reply, seems like autoAlpha sovled the problem:)

[Jonathan]

Glad you got it working, Happy Tweening!