Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
romain.gr

Set display:none not working.

Recommended Posts

Hi, 

 

I've recreated a quick codepen of the issue I have,

 

there is a '.set($list, {display: 'none'})' on line 16, which is not triggering. I've been playing around one full day on that and I can't figure out what's wrong, I'm probably missing something.

 

So to see the first and main issue:

     - Click on the 'Show List' button

          => the list is set to display block then an animation is showing the list items and the title is disappearing,  until here all is fine.

     - Click on the 'Show Title' to re-show the title and hide the list (display:none).

         => the title is showing, the animation on list item is working, but the list isn't going from display:block to display:none. I've also tried clearProps: All (and a lot of other workarounds, in css and/or full javscript, like adding and removing class), it doesn't work either.

 

The second issue:

 

       var showList = new TimelineMax({paused: true, onComplete: console.log('complete')});

 

As you can see the animation is paused at first then triggered later, but the console.log is firing on page load, why? As it set to onComplete it should logically  console.log when the animation is finished.

 

If someone could have a quick look at this, it would be great.

 

Thanks 

 

 

 

 

 

 

 

See the Pen rwGrjv?editors=0010 by romaingranai (@romaingranai) on CodePen

Link to comment
Share on other sites

Hi romain.gr,

 

I´m not sure what your real problem is.

 

Instead of "display:'none'" it is easier to set "visibility: hidden"  and tween to "autoAlpha:1".

If you want a log put where it is triggered.

 

To toggle the animations you can use one TimelineMax: 

 

See the Pen RgLeev by mikeK (@mikeK) on CodePen

 

Best regards

  • Like 3
Link to comment
Share on other sites

Hi Mikel,

 

Thanks for the quick answer.

 

Unfortunately the 'reverse' option is not a solution to my problem, actually I tried it but my animation is much more complicated than a simple show/hide. I've just reproduce the issue I had in a simpler pen just to show the issue. In my case any css property won't work, so it can be visibility or display or even background-color. I'd like to understand why the line 16 on my code isn't doing anything.

 

About the console.log, I'd like also to understand why the 'onComplete' doesn't trigger after the animation (as it should do) but on page load, it could be any function.

 

Thank you anyway. 

Link to comment
Share on other sites

Hi romain.jr,

 

I think it may be some sort of bug for the display none but theres a work around that you could use for that which is 

 

/* the temp workaround */
.set($list, {onComplete:function(){$list.addClass('hide');}})
/* The CSS */
.hide {
  display: none !important;
}

 

As for your console.log it was firing as soon as the browser read it rather than when the animation had completed because it needs to be done one of 2 ways

 

// Method one (it's best to only use this method you are only going to call the function once)
onComplete: function(){/* Do your stuff here */}

// Method two (looks neater and a more efficient choice if you're going to reusing the function)
onComplete: myFunction

function myFunction() {
	/* Do your stuff here */
}

 

 

Here is the CodePen if you want to have a look at it

 

See the Pen dRVaYZ by anon (@anon) on CodePen

 

 

I hope that helps

  • Like 1
Link to comment
Share on other sites

Hi romain.gr,

 

It is a question of positioning.

 

If you position the call "... pause(0)" before ".set($title, {display: 'none'})" it will be as you expected.

 

See the Pen bRoZGE by mikeK (@mikeK) on CodePen

 

Best regards

 

  • Like 1
Link to comment
Share on other sites

Hi Valente97,

 

Thanks for the info on the onComplete, got it now ;-).

 

To be honest I'm not really convinced about the addClass solution and !important, sure it does the job and I really appreciate that, but it sounds like the last solution in case everything before have been tested. The pen you embedded isn't working, I can't see it, it reloads indefinitely .

 

Thank you.

Link to comment
Share on other sites

Hi Mikel,

 

I was thinking that the reset of the animation was 'clashing' with the set display:none, but wasn't able to think further :);

 

It works as expected now. 

 

Thanks a lot.

  • Like 1
Link to comment
Share on other sites

7 minutes ago, romain.gr said:

Hi Valente97,

 

Thanks for the info on the onComplete, got it now ;-).

 

To be honest I'm not really convinced about the addClass solution and !important, sure it does the job and I really appreciate that, but it sounds like the last solution in case everything before have been tested. The pen you embedded isn't working, I can't see it, it reloads indefinitely .

 

Thank you.

 

Yeah I know sorry about that, and as for the pen embed not working here is the link to it 

See the Pen dRVaYZ by anon (@anon) on CodePen

 

Link to comment
Share on other sites

Hello @valente97 and @romain.gr and Welcome to the GreenSock Forum!

 

Just so you know .. if you need to toggle display none and block.. along with smooth fade of opacity (autoAlpha)

 

Keep in mind that in GSAP if you include display:none while animating autoAlpha:0 in your tween. GSAP will add the CSS display property at the very ending of the tween. So since GSAP sees the CSS display property as a non-tweenable (non-numeric) property having a value of none, block, etc.. CSS display:none will be set at the ending of the tween. 

 

@mikel advised a good thing to use autoAlpha and visibility: hidden. GSAP can toggle the state of display none and display block without you having to use set() before your tweens or even having to use the onComplete. GSAP will do that for you ;)

 

GSAP will do the following when you use autoAlpha and display property. (look in the browser inspector and you will see how GSAP automatically switch display none to the display:block property at the end of the tween). If it was show to hide GSAP would add display: none at the end of the tween.

 

In the first below codepen you can see that GSAP animates the hide to show

  • set display none to block
  • set visibility hidden to inherit
  • animate opacity 0 to 1
TweenMax.to($list, 3, {autoAlpha:1, display:"block"}); // GSAP will set display block at start of tween

 

If GSAP were to reverse it animating from show to hide it would be like this:

  • animate opacity 1 to 0
  • set visibility inherit to hidden
  • set display block to none
TweenMax.to($list, 3, {autoAlpha:0, display:"none"}); // GSAP will set display none at end of tween

 

Using autoAlpha with display:none and display: block ..
 

See the Pen RgjBJw by jonathan (@jonathan) on CodePen

 

Basic use of autoAlpha.. setting initial CSS visibility hidden on element without display none or block.

 

See the Pen iHdek by jonathan (@jonathan) on CodePen

 

You can find more info on autoAlpha in the CSSPlugin Docs:

 

https://greensock.com/docs/Plugins/CSSPlugin

 

Quote

You can even define properties that are not generally tweenable and GSAP will apply the property for you (like position:"absolute" or borderStyle:"solid"). These non-tweenable properties will be set at the beginning of the tween (except display:"none" which will be applied at the end of the tween for obvious reasons).

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

Happy Tweening :)

 

  • Like 3
Link to comment
Share on other sites

Hi Jonathan, 

 

Thanks for all those details, very well explained, I'll definitely use that little trick with display none ;)

 

  • Like 1
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.
×