CODEWITHSUNDEEP
animationdropdowngsap
bghouse
bghouse

Reputation: 558

tween max and animating dropdown menu

I have a problem animating a simple dropdown. If you hover over link 3 and stay hovered, it works great.

The problem is when you hover over back and forth between link 3 and link 4 repeatedly. Then the animation glitches a little bit. Some links stay at full opacity while others are 0.

I would like it to totally reset on mouseout so when you mouse enter again it looks clean. Any ideas? I created a jsfiddle.

https://jsfiddle.net/hbLbpzxv/2/

jQuery(function(){
    TweenMax.set(jQuery('header.main ul.nav li ul li a'), { opacity: 0, x:-50 });

    jQuery('header.main ul.nav li').on({
        mouseenter: function() { 
            var $this = jQuery(this);
            $this.addClass( "open" ); 
            TweenMax.staggerTo($this.find('ul li a'), .2, {x:0, opacity:1, delay:.15, ease:Power2.easeOut}, 0.1);
       }, 
        mouseleave: function() { 
            var $this = jQuery(this);
            $this.removeClass( "open" ); 
            //console.log( $this.find('ul li a') );

            TweenMax.to($this.find('ul li a'), .05, {x:-50, opacity:0, ease:Power2.easeOut});

            //$this.find('ul li a').css({ opacity: 0 })
            //TweenMax.set($this.find('ul li a'), { opacity: 0, x:-50 });
        }
    });

    TweenMax.set(jQuery('.hero-content'), { opacity: 0, y: 50, scale: .8 });
    TweenMax.set(jQuery('.hero-buttons'), { opacity: 0, y: 50, scale: .8 });
    TweenMax.to(jQuery('.hero-content'), 1, {
        opacity: 1,
        y: 0,
        scale: 1,
        delay: .5,
        ease: Power2.easeOut
    });

    TweenMax.to(jQuery('.hero-buttons'), 1, {
        opacity: 1,
        y: 0,
        scale: 1,
        delay: 1.2,
        ease: Power2.easeOut
    });
});

Upvotes: 0

Views: 528

Answers (1)

dougtesting.net
dougtesting.net

Reputation: 571

Looks like the tweens are still running on the list items when the user rapidly swaps between the links which causes the effect you describe.

I added a TweenMax.killAll(); in your jsfiddle, either at the start of the mouseenter, or mouseleave functions, and that seemed to fix the problem.

More details on stopping a tween here: https://greensock.com/forums/topic/8917-all-the-methods-to-kill-a-tween/

Upvotes: 1

Related Questions