Animation + Hover scenario.

[Dkam]

Help with this...

 

I wanna make optimal solution..

 

I want make:

tl.to($a, 10, {scale:1.25, repeat:-1, yoyo:true});

Then I hover to element:

var tl = new TimelineLite();
tl.to($a, 0.3, {scale:2, x:100});

Then I unhover element return to state before hover and continue animation.

 

How to do it right?

 

Thanks!

See the Pen GgRKoj by anon (@anon) on CodePen

[Diaco]

Hi Dkam 

 

try this :

var a = new TimelineLite()
a.to('#redBox', 3, { scale:1.5,backgroundColor:"blue", repeat:-1, yoyo:true});

var tl = new TimelineLite({paused:true});
tl.to('#redBox', 0.3, {scale:2, , x:40});

$('#redBox').hover(
  function() {
    a.pause();
    tl.restart();
  },
  function() {
    tl.reverse().eventCallback("onReverseComplete", function(){a.play();});
  }
); 

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

[Dkam]

Hi Dkam 

 

try this :

var a = new TimelineLite()
a.to('#redBox', 3, { scale:1.5,backgroundColor:"blue", repeat:-1, yoyo:true});

var tl = new TimelineLite({paused:true});
tl.to('#redBox', 0.3, {scale:2});

$('#redBox').hover(
  function() {
    a.pause();
    tl.restart();
  },
  function() {
    a.play();
  }
); 

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

 

Then I hover out, out animation is not smooth... it is go without transition to last position.

[Diaco]

ok , check the codepen and my answer again

[Dkam]

ok , check the codepen and my answer again

 

Nice! Thanks! Have a good day!