Jump to content
Search Community

Erratic button behaviour

roughRabbit 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

The code below drives a button that toggles various div s on the page on and off, and changes it own  visible state - from dellie to tellie:

 

It works once as expected (usually) but the second time through,clicking dellie makes it disappear but tellie does not appear.  Can anyone please help point out what I'm doing wrong? Or point to a better way of achieving what I'm after - a button that toggle show/hide div states.

 

$("#dellie").click(function(){

  TweenLite.to("#tellie", 0.5, {display:"block", ease:Back.easeOut});

  TweenLite.to("#dellie", 0.0, {opacity:0});

  TweenLite.to(".inacc", 0.5, {opacity:0.4});

  TweenLite.to(".note", 2.5, {display:"block", ease:Back.easeOut});

  });

  

  $("#tellie").click(function(){

  TweenLite.to("#tellie", 0.0, {opacity:0});

  TweenLite.to("#dellie", 0.5, {opacity:1});

 TweenLite.to(".note", 2.0, {display:"none", ease:Back.easeOut});

   TweenLite.to(".inacc", 0.5, {opacity:1});

           

});

 

Thanks

Link to comment
Share on other sites

Hi and welcome to the GreenSock forums.

 

Is always a little harder to pinpoint the issues users are having by just looking at some code. Please read this post in order to see how you can create a live sample in codepen, that allows us to get a solution faster.

 

http://forums.greensock.com/topic/9002-read-this-first-how-to-create-a-codepen-demo/

 

In terms of your code there are a couple of things that you should know. Display and visibility are two properties that can't be tweened, they are applied at the start or end of the tween, but you won't see a smooth transition between one state and the other. The engine has a way to deal with visibility by using the autpAlpha property in the config object:

TweenLite.to(element, time, {autoAlpha:0});

What that code does is animate the element's opacity to 0 and when is completed turns the visibility property to "hidden". When is autoAlpha:1 it goes backward, takes an element with opacity:0 and visibility:"hidden" and changes the visibility at the tween start and then animates the opacity to 1.

 

If you want to do the same with display, you'll have to create a tween to animate the element's opacity to 0 and when completed change the display no none:

// hide the element
TweenLite.to(element, time, {opacity:0, onComplete:hideElement});

function hideElement()
{
  TweenLite.set(element, {display:"none"});
}

// show the element
TweenLite.to(element, time, {opacity:1, onStart:showElement});

function showElement()
{
  TweenLite.set(element, {display:"block"});
}

I've set up a simple codepen using autoAlpha, please fork and adapt it to your scenario in order to get a better idea of what could be the issue you're having:

 

See the Pen Bqibt by rhernando (@rhernando) on CodePen

 

Rodrigo.

  • Like 2
Link to comment
Share on other sites

You shouldn't need to use the onStart/onComplete to do that Rodrigo (you even hinted that earlier in your post =D ). GSAP works out the smartest time to swap between none/block etc i.e.
 

// hide the element - display is set to none at the END of the tween
TweenLite.to(element, time, {opacity:0, display:'none'});

// show the element - display is set to block at the START of the tween
TweenLite.to(element, time, {opacity:1, display:'block'});
  • Like 4
Link to comment
Share on other sites

Hi,

 

Basically both buttons end up with an opacity:0.

 

You are missing the opacity for the second button: "#tellie".

 

That button has a display:"none", you click the first button. This goes to opacity:0 and display:none, the second button goes to display:block. Then you click the second button, this goes to opacity:0 and display:none, the first the other way. Then you click the first button again, this goes to display:none and opacity:0 and the second goes to display:block, but it's opacity it's 0. Just add opacity:1 on the first tween:

$("#dellie").click(function()
{
  TweenLite.to("#tellie", 0.5, {opacity:1, display:"block", ease:Back.easeOut});
  TweenLite.to(this, 0.2, {opacity:0, display:"none"});
  TweenLite.to(".inacc", 0.5, {opacity:0.6});
  TweenLite.to(".note", 1.5, {opacity:0.8, display:"block"});
});
  
  $("#tellie").click(function()
{
  TweenLite.to(this, 0.2, {opacity:0, display:"none"});
  TweenLite.to("#dellie", 0.5, {opacity:1, display:"block"});
  TweenLite.to(".note", 1.5, {opacity:0, display:"none"});
  TweenLite.to(".inacc", 0.5, {opacity:1});
});

That should work.

 

See how the codepen makes things easier and faster? ;)

 

Rodrigo.

  • 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.
×
×
  • Create New...