Restart infinite timeline on hover

[iamsebastn]

Hey there! 
I have some problem, which is breaking my head. I tried to figure it out over the last day but unfortunately I couldn't make it work. 
My goal is to create a blinking dot which is visible once the user hovers over the element. As soon as the user leaves the element the dot should be opacity 0 again. If the user enters again, the dot should blink again and so on.. 

What I come out with was, either the dot doesn't blink at all or it just has half of the opacity. So only going up to 50%.

I think this is kinda simple and I'm just standing on the hose 💀

Thank's @all!

See the Pen BaGJyag by iamsebastn (@iamsebastn) on CodePen

[mvaneijgen]

Ha, why not just have a blinking animation and just hide and how the animation on hover on the element. No need for fancy JS, just simple CSS hover. 

 

See the Pen eYQymeG?editors=0100 by mvaneijgen (@mvaneijgen) on CodePen

 

Or .play() .pause() and .progress(0) the timeline, but create the animation outside of the hover. 

 

See the Pen dyQJPJa?editors=0010 by mvaneijgen (@mvaneijgen) on CodePen

 

Now with extra fade out tween 

 

See the Pen WNYdbJG?editors=0010 by mvaneijgen (@mvaneijgen) on CodePen

[Cassie]

Quote

I think this is kinda simple and I'm just standing on the hose 💀

This saying made me laugh, never heard that before 😂