Mouseout reverse animation delay

[anteksiler 8 Likes (Newbie)]

If you look at the codepen example, you'll see that, once you hover out, the animation delays for about 1 second before playing the reverse animation.

 

I also noticed that I am getting a jagged animation.

See the Pen qEWxdW by anteksiler (@anteksiler) on CodePen

[Diaco 1,997 Likes (Superhero)]

Hi anteksiler 

 

you should to put the Timeline tweens out of the hover() :

var container = $('.mobile-toggle'),
span = container.find('span'),

tl = new TimelineMax({ paused: true });
tl.add(TweenLite.to(span, 0.4, {left:7}))
  .add(TweenLite.to(container, 0.4, {rotation:90}));
				
container.hover(function() {tl.restart();}, 
                function() {tl.reverse();}
               );

and since you'r using pixels and only tween 2 pixles , you have jagged animation , pls try to use X value Instead of Left to tweens , x/y property use subpixels and u have smoothest tweens .

 

See the Pen dPybzG by MAW (@MAW) on CodePen