isTweening doesn't seem to be working as expected

[gimperdaniel]

I am sure this is happening because I am not thinking the GSAP way... I am not there yet. I am trying to use jquery's hover with TweenMax. The animation works as expected, however if I move the mouse on and off fast, before the animation is completed, I get all sorts of weird behavior (.coords collapses, moves to the wrong spot and so on). I thought that using isTweening would fix the issue, but isTweening never returns true, even though it's obvious the animation is still going on. Maybe it's a matter of scope?

$(".coords").hover(function(){

            if(TweenMax.isTweening($(this)) === false){

                TweenMax.to($(this),.2, {width:"+=100px",height:"+=50px",top:"-=50px",left:"-=50px",ease:Circ.easeOut});
                TweenMax.to($(this).find("span"),.2, {display:"block",opacity:1,ease:Circ.easeOut});

            }

        }, function(){

            if(TweenMax.isTweening($(this)) === false){

                TweenMax.to($(this).find("span"), 0, {display: "none", opacity: 0, ease: Circ.easeOut});
                TweenMax.to($(this), .4, {
                    width: "-=100px",
                    height: "-=50px",
                    top: "+=50px",
                    left: "+=50px",
                    ease: Circ.easeOut
                });

            }

        });

I have also tried to unbind the hover event and then bind it back after once the animation is complete, but no luck. Any other ideas on how to approach this problem?

[Rodrigo]

Hi,

 

I believe that you're after something that goes back and forward when the user hovers in/out of the element. In those cases the best approach is to create a single tween/timeline for each element, add it to the DOM node and play/reverse it depending on the event triggered:

$.each($(".coords"), function(i,e){
  var tl = new TimelineLite({pasused:true});

  tl
    .to(e,.2, {width:"+=100px",height:"+=50px",top:"-=50px",left:"-=50px",ease:Circ.easeOut})
    .to($(e).find("span"),.2, {display:"block",opacity:1,ease:Circ.easeOut});

  e.hoverAnimation = tl;
});

$(".coords").hover(coordsOver, coordsOut);

function coordsOver(){
  this.hoverAnimation.play();
}

function coordsOut(){
  this.hoverAnimation.reverse();
}

That basically will save you from writing all that conditional logic and make it quite easier. Here's a very simple codepen using that technique:

 

See the Pen rHwuy?editors=011 by rhernando (@rhernando) on CodePen.

[Jonathan]

Hello gimperdaniel,

 

As always Rodrigo beat me to it

 

If you go to this forum topic you can see various ways to handle this: https://greensock.com/forums/topic/10447-best-practice-for-kllingundoing-timelines-of-objects-on-rolloverout/

 

For multiple elements, is to use Rodrigo's

See the Pen vjGxH by rhernando (@rhernando) on CodePen.

and store a reference to the tween for each element. It uses play and reverse:

 

See the Pen itmeB by jonathan (@jonathan) on CodePen.

 

Other Examples of usage:
 

See the Pen yLeIt?editors=011 by rhernando (@rhernando) on CodePen.

See the Pen vjGxH by rhernando (@rhernando) on CodePen.

See the Pen itmeB by jonathan (@jonathan) on CodePen.

 

var tl;

$('.coords').each(function(i,el) {

    var tl = new TimelineLite({paused:true}),
    $el = $(el);

    tl.to($(this),.2, {width:"+=100px", height:"+=50px", top:"-=50px", left:"-=50px", ease:Circ.easeOut});
    tl.to($(this).find("span"),.2, {display:"block", autoAlpha:1, ease:Circ.easeOut});

    this.tl = tl;

});

$(document).on('mouseenter', '.coords', function(){
    this.tl.play();
}).on('mouseleave', '.coords', function(){
    this.tl.reverse();
});

:

You can try this by using TimelineMax which is included with TweenMax:

$(".coords").hover(function(){

    var myTween = new TimelineMax();
    myTween.to($(this),.2, {width:"+=100px", height:"+=50px", x:"-=50px", :"-=50px", ease:Circ.easeOut});
    myTween.to($(this).find("span"),.2, {display:"block", autoAlpha:1, ease:Circ.easeOut});

}, function(){

    var myTween = new TimelineMax();
    myTween.to($(this).find("span"), 0, {display: "none", autoAlpha: 0, ease: Circ.easeOut});
    myTween.to($(this), .4, {
      width: "-=100px",
      height: "-=50px",
      y: "+=50px",
      x: "+=50px",
      ease: Circ.easeOut
    });
});

:

You will also notice i changed opacity to autoAlpha which is part of the GSAP 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.

 

I also changed top to y (translateY) and left to x (translateX) .. so this way your animation can be more smooth animating with transforms on a sub-pixel level.

 

More info on top and left versus x and y:

 

http://css-tricks.com/myth-busting-css-animations-vs-javascript/

http://www.paulirish.com/2012/why-moving-elements-with-translate-is-better-than-posabs-topleft/

 

I hope this helps!

[gimperdaniel]

Thank you guys. I am going to do some good reading and try out Rodrigo's solution. I did not even consider reversing the animation. Thanks!