Calling multiple timelines rapidly - Best practices

[Viktor Lenard]

Hello everyone!

 

To start off I'd like to say that I'm very new to GSAP, came from using Framer Motion and fell in love instantly, I'm having a blast using it. I've been mostly creating animated UI components like menus, buttons, search bars etc that morph into different states, changing size, opacity etc. 

 

One thing I like to do is to set up unique animations for each state change. For example: I have button, a timeline that triggers  when I hover on it, and another timeline that triggers when the mouse leaves the component. Slightly different easing and duration, same for opening and closing menus.

 

One problem I have though, is if I rapidly trigger the animations, for example opening and closing a menu with keyboard shortcuts quickly and repeatedly , or moving the mouse quickly and continuously over the hover element, my animations tend to bug out for some reason. In the case of the hover animation, lets say even though the cursor ultimately left the element, it is stuck at the hover state. Hope my explanation makes sense.

 

I tried multiple things, like .kill the opening timeline with the closing timeline and vice versa, in React I tried adding a state variable and trigger the timeline conditionally only if we're in the correct state but nothing seems to have solved it.

 

My guess is somehow I queue up too many animations and since the timelines are never the same length, once the short one resolves we still see the end of the longer one? 

 

I'm sure this is something very basic and apologies if this have been discussed a million times before, but I would really appreciate any sort of insight, best practices or solutions when working with multiple timelines on the same component.

 

Thank you very much! 

Edited Wednesday at 09:56 AM by Viktor Lenard
typo

[Carl]

Hi and welcome to the forums,

Great to hear you are enjoying your time with GSAP!

 

There could be a few reasons why this is happening and it is very difficult to troubleshoot without a minimal demo.

 

One common mistake is relying on from() tweens which by design will use different ending values depending on when they are created.

 

This video from my free beginner's course GSAP 3 Express explains the issues in detail

 

 

 

When dealing with more complex "enter" and "leave" animations you can very easily run into issues with overwriting

 

 

 

With "enter" and "leave" animations it is typically best to call functions that create those animations on demand instead of having pre-made timelines that you try to control as the current state of your enter animation is most likely going to be very different than the start state of your leave animation if the user is trying to trigger them repeatedly in quick succession

 

Hopefully some of this helps, but it would be very helpful to see a minimal demo that clearly illustrates the issue with as little code as possible

 

Thanks!

 

 

 

 

[Rodrigo]

Hi,

 

Since you come from framer motion I'll assume that you're using React in your projects, so a good idea is to use our useGSAP hook. You can learn about it here:

https://gsap.com/resources/React

 

Happy Tweening!

[Viktor Lenard]

Thank you both for these swift and detailed responses, if I can't figure out a solution I will put together a demo and share it here. I feel like there isn't a one-size-fits-all solution, and I should have read the timeline methods in more detail. I have a bad tendency of jumping into creating things half way through reading the documentation 💀