Jump to content
Search Community

isTweening doesn't seem to be working as expected

gimperdaniel test
Moderator Tag

Go to solution Solved by Rodrigo,

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

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?

Link to comment
Share on other sites

  • Solution

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

  • Like 3
Link to comment
Share on other sites

Hello gimperdaniel,

 

As always Rodrigo beat me to it :P

 

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! :)

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