Synchronize click events

[Catalin R. 14 Likes (Newbie)]

Hi,

I have a problem with the syncing of click events.

I've found many codepens about that but nothing works properly.

1. When I open the menu I have a timelineMax with the animation I want

2. When I close the menu I need another timelineMax (another animation), a fade-out not a reverse of the current timelineMax

3. The same thing for Test Drop which has a drop-menu

4. When the drop-menu is open and I close the entire menu (top-right trigger) there's a lack of syncing

5. How can I run a timelineMax to the end without any animation interfere meantime (by clicking the top-right trigger)?

I hope that is't not too much for this day!

Thanks!

See the Pen OZBKBX by ZenTao (@ZenTao) on CodePen

Edited May 17, 2018 by DevSaver
link to codepen

[GreenSock 8,117 Likes (Superhero)]

I read your question a few times and I can't quite understand what's not working or what "syncing of click events" means in your context. 

 

Are you saying that after you click the button and the animation starts, you want to force the user to watch the whole animation before they're allowed to click on the button again to animate them off the screen? 

[Catalin R. 14 Likes (Newbie)]

Yes, I want to force the user to watch the whole animation. And I need another animation when I close the menu (another timelineMax or something, I don't need a reverse of the current animation).

Thanks! 

[GreenSock 8,117 Likes (Superhero)]

I feel obligated to advocate for the user and say "please, please don't do that" Just my opinion about UX. I can't stand it when apps force me to sit through an animation, especially for a menu. It feels really weird (bug-like) to not have the UI respond to my clicks (as if I'm locked out). 

 

So are you saying that you want to queue the animations so that if the user clicks the menu (to open it) and then clicks it again very quickly (to close it), you want the whole "open" animation to run, and then run the "close" animation after that? And what happens if the user clicks 5 times really fast? Do you want it to queue up all those animations back-to-back? [cringe]

 

Basically it just boils down to adding conditional logic in your click functions accordingly. Kinda like:

 

[PointC 8,599 Likes (Superhero)]

Jack beat me to it. I was also gonna say that feels odd to me when I'm forced to wait for something to finish. That being said, you can use a global variable as a toggle to prevent additional clicks. It's the same technique as your other thread about this topic. Here's a basic example:

 

See the Pen odQoee by PointC (@PointC) on CodePen

The other tricky aspect of separate timeines for opening/closing the menu instead of reversing a single timeline is the properties you'll be using for each timeline. You'll see in my simplified example, the first tween of the openBox timeline is an autoAlpha fromTo() tween. If that tween wasn't there, this whole thing would only work once. Why? Because the closeBox timeline fades the opacity of the box to 0. Then when you go to open the box again, the scaleY animation would work fine, but the autoAlpha would be stuck at 0 from the closeBox timeline and you wouldn't see anything.

 

If both timelines are targeting different properties, the target element may not be where you expect it for the next timeline. Make sense? Now there are certainly lots of ways to fix that. You can use fromTo() tweens or clearProps etc., but a simple play/reverse on click is easier to manage and is a better user experience IMHO.

 

Happy tweening.

 

[Catalin R. 14 Likes (Newbie)]

Thanks Craig! Thanks Jack!

You're right. Is't not the best experience for user to force him to wait the whole animation!

I have to find a solution to have a certain animation when I open the menu and another animation (more shorter than first) when I close the menu.

[GreenSock 8,117 Likes (Superhero)]

You mean like this?: 

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

 

Should be as easy as sprinkling in some conditional logic and populating a timeline (or just regular tweens...either way). 

 

Hope that helps.

 

[Catalin R. 14 Likes (Newbie)]

Yes Jack, this conditional logic I need! Thanks a lot! Have a nice day!