Hover text rotator

[Hector18]

Hi,

 

I try to create an effect like in this example but mine have some bugs on fast hover in and out.

 

Ex: http://m2hagency.com/carprice

 

*** Scroll to the bottom page.

 

Any help would be appreciated. Thanks

See the Pen rJJbjz by Hector18 (@Hector18) on CodePen

[Carl]

 

Thanks for the demo. That's a bit tricky.

The main problem is that if you hover quickly you are creating multiple timelines that want to animate the same elements at the same time.

In other words you can have your over() timeline playing while you create and play your out() timeline.

 

I forked your example and made the animations slower so you can better see how these multiple timelines  are running at the same time.

See the Pen GQxJZZ?editors=0010 by GreenSock (@GreenSock) on CodePen

 

 

 

I inspected the site you provided and it appears they actually remove elements from the DOM when the animation is over and put them back in when a new animation is needed. In other words, once "NEXT" appears then "GO" is removed. 

I did a quick screencapture and slowed it down a bit.

https://greensock.d.pr/8foxqC

 

notice how 2 elements get animated but at the end only one remains. pretty cool.

 

I'm not exactly sure how they are making it so seamless. I really wish I could slow down the live site and mess around with it more.

Unfortunately I don't have time at the moment to dig into this and figure it all out. Perhaps over night someone else can take a look or comment with a fresh perspective. Let us know if you make any progress.

 

[Sahil]

That's super easy. You just have to speedup ongoing animation so it won't overlap and add delay of 0.1 second to both timelines.

 

See the Pen KQoaKb?editors=0110 by Sahil89 (@Sahil89) on CodePen

 

[Carl]

That's great Sahil. Always good to see how usable solutions can be seen by another set of eyes. What you did certainly works to mimic the desired effect very well!

 

I just have to say that I've been bitten many times thinking something is so fast that the user can't break it only to find out a client wants to change the timing, and some very strange edge case pops up where users occasionally get the effect to glitch out and it takes hours and hours to figure out and I'm left wishing I had become a farmer 

[PointC]

2 hours ago, Carl said:

I'm left wishing I had become a farmer 

 

So, instead of GreenSock Guru, we'd just call you Farmer Carl?

 

[Sahil]

I had made one too

 

[Carl]

Great job, guys. Love them. Thanks for choosing relatively flattering body doubles. 

I have a sense I should delete this thread before @Dipscom gets involved...

[Dipscom]

I do not know what you are insinuating, sir.

 

 

 

 

 

 

 

 

 

 

 

 

 

 

[Carl]

NIce one, Dipscom. Really takes me back to my roots.

 

 

[Hector18]

On 2/20/2018 at 11:03 AM, Sahil said:

That's super easy. You just have to speedup ongoing animation so it won't overlap and add delay of 0.1 second to both timelines.

 

See the Pen KQoaKb?editors=0110 by Sahil89 (@Sahil89) on CodePen

 

 

Thank you Sahil. You always save me! Cheers!