Simple Hover Effect Issue When Targeting Animated Element

[dada78]

Hi guys,

I created this shine effect on a button, but it seems that there would be a more elegant solution than resetting the animation by clearing the backgroundPosition prop...

 

I just want to auto-animate the background-position on the cta, but when I do so without the reset I added, the hover wouldn't work since the element has already reached it's target position.

 

Any ideas appreciated! You rock! (Just joined the GS Club )

See the Pen c83dfc1542cc9e072af16afb1d762799 by dada78 (@dada78) on CodePen

[Diaco]

Hi dada78 

 

pls try this :

var T = TweenMax.to("#cta", 1, {backgroundPosition:"300px 0px",paused:true});
document.getElementById("cta").addEventListener("mouseover",over);
function over() { T.restart() };

[Rodrigo]

Hi,

 

I would use this approach, not that there's anything wrong with Diaco's though:

var tl = new TimelineMax(),
    mouseEffect = document.getElementById("cta");

tl.to("#cta", 1, {backgroundPosition:"300px 0px", ease:Linear.easeNone}); 

mouseEffect.addEventListener("mouseover", over, false);

function over() { 
  if(tl.progress() === 1) {
    tl.restart();
  }
}

Basically the animation runs on page load and then if the animation is completed on the mouse over event, runs again. If the animation hasn't completed yet, nothing happens.

 

Happy Tweening!!!

[dada78]

Thanks guys!

I tried both of your guys approaches but Diaco's is more in line what I wanted to accomplish as the shine should happen as soon as the user mouses over the button (which could happen before the animation is completed).

 

I am still having trouble getting it to work properly though. So in my timeline I have the cta firing the shine. But in the variable T for the mouseEffect the animation is paused. Even if I set that to false that won't work...

 

Essentially the cta should animate the shine but the user should also be able to initiate the shine animation on mouseOver (any time after the initial shine effect took place).

 

Please see updated codepen with Diaco's solution integrated..

Thank you!

[Diaco]

pls try this :

 

var tl = new TimelineMax(); 

tl.to("#txt1",1,{autoAlpha:1})
  .to("#txt2",2,{autoAlpha:1})
  .to("#cta",1,{backgroundPosition:"300px 0px"});

var T = TweenMax.fromTo("#cta",1,{backgroundPosition:"-200px 0px"},{backgroundPosition:"300px 0px",paused:true});
// or var T = TweenMax.from("#cta",1,{backgroundPosition:"-200px 0px",immediateRender:false,paused:true});

document.getElementById("cta").addEventListener("mouseover",function(){T.restart()});

[dada78]

Ah ok! So the variable tween needs to have the from and to position registered in order for the call to work properly?

Thank you!

[Diaco]

you can use .from() too , pls check my previous answer again :

 

like this : 

var T = TweenMax.from("#cta",1,{backgroundPosition:"-200px 0px" , immediateRender:false , paused:true});