Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
Hector18

Hover text rotator

Recommended Posts

 

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.

 

Link to post
Share on other sites

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 :mrgreen:

  • Haha 2
Link to post
Share on other sites
2 hours ago, Carl said:

I'm left wishing I had become a farmer :mrgreen:

 

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

 

EqXgRyv.jpg

  • Haha 3
Link to post
Share on other sites

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...

  • Haha 2
Link to post
Share on other sites

I do not know what you are insinuating, sir.

 

 

 

 

 

 

 

 

 

 

 

 

 

 

carrots.jpg.1c0e0b5ac7a922d79db9296ab10bdfc2.jpg

  • Like 1
  • Haha 2
Link to post
Share on other sites

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

 

 

  • Haha 2
Link to post
Share on other sites
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!

  • Like 1
Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Recently Browsing   0 members

    No registered users viewing this page.

×