Jump to content
Search Community

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

Posted

 

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.

 

Posted

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

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
Posted

I do not know what you are insinuating, sir.

 

 

 

 

 

 

 

 

 

 

 

 

 

 

carrots.jpg.1c0e0b5ac7a922d79db9296ab10bdfc2.jpg

  • Like 1
  • Haha 2
Posted

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

 

 

  • Haha 2
Posted
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

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.
×
×
  • Create New...