Jump to content
Search Community

Synchronize click events

Catalin R. test
Moderator Tag

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

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 by DevSaver
link to codepen
Link to comment
Share on other sites

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? 

  • Like 3
Link to comment
Share on other sites

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:

 

  • Like 2
Link to comment
Share on other sites

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.

:)

 

  • Like 2
Link to comment
Share on other sites

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.

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