GSAP Animation Sequences Overlapping And Disturbing Each Other

[Nine]

Sorry if I am gonna sound like a newb but basically I started doing GSAP yesterday, and now I am trying to make some SVG animations look nice but the problem is on mouseleave animation disturbes my onmouseenter animation if I hover very quickly over the element, how can I solve it?

See the Pen vYGQqBZ by whitelionx (@whitelionx) on CodePen

[ZachSaucier]

Hey Nine and welcome to the GreenSock forums! 

 

You're making a couple of the most common GSAP mistakes. I highly recommend giving the whole article a read. The key to doing this sort of thing is to create the animation outside of the event listeners and just use control methods inside of the event listeners. I talk more extensive about that topic specifically in my article about animating efficiently which is a great learning resource as well  

 

Your ease is also invalid, I'm not sure where you got that formatting from.

 

I'm not 100% sure what your end goal is but the end result could be something like this:

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

[Nine]

2 minutes ago, ZachSaucier said:

Hey Nine and welcome to the GreenSock forums! 

 

You're making a couple of the most common GSAP mistakes. I highly recommend giving the whole article a read. The key to doing this sort of thing is to create the animation outside of the event listeners and just use control methods inside of the event listeners. I talk more extensive about that topic specifically in my article about animating efficiently which is a great learning resource as well  

 

Your ease is also invalid, I'm not sure where you got that formatting from.

 

I'm not 100% sure what your end goal is but the end result could be something like this:

 

 

Thanks a lot, what I am trying to do is to recreate this effect: https://www.shiftbrain.com/

On the left side of the website after the page load are three control buttons which are basically the navigation of the site for the different sections, and I am kinda confused how to do it as I lack a lot of understanding still concerning the whole library and animations  

[ZachSaucier]

5 minutes ago, Nine said:

what I am trying to do is to recreate this effect: https://www.shiftbrain.com/

I see. You just need to change the tweens in my demo a little bit  

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

 

Read more about the position parameter here: 

 

 

[Nine]

Wow thanks I lot now I see what you did there, I will go over the links you posted in the comments and will post some interesting things these days, thanks for the quick help @ZachSaucier you're a legend