Animation User Experience

[tdjmNZ]

Hi there,

 

Love the GSAP library! 

 

I'm curious to know what the GSAP community's UX thoughts are on fully letting timelines play out before a new event timeline is initialised?

 

For Example

 

1. User clicks on icon.
2. Event triggers icon morph-in animation & modal open visibility animation.
3. User clicks on morphed-in icon.
4. Event triggers icon morph-out animation & modal close visibility animation.

 

Timeline is about 0.8 seconds long.

 

Would you prefer to run something like this to ensure the morph in/out & modal open/close animation timelines are forced to fully finish before the in/out open/close plays?

 

if ( !trigger.classList.contains("active") ) {

if (tlIconMorphOut.isActive()) { return; }
    tlIconMorphIn.restart();
    tlIconMorphIn.play();
    tlModalOpen.restart();
    tlModalOpen.play();
    trigger.classList.add("active");
} else {
            
if (tlIconMorphIn.isActive()) { return; }
    tlIconMorphOut.restart();
    tlIconMorphOut.play();
    tlModalClose.restart();
    tlModalClose.play();
    trigger.classList.remove("active");
}

 

Or immediately on event trigger?

 

Thanks!

[GreenSock]

Welcome to the forums, @tdjmNZ!

 

Personally, this is one of my pet peeves. From a UX standpoint, it makes me feel like the interface is unresponsive and something is wrong. Like...if I click, I want there to be clear indications that my click actually did something. When someone prioritizes the animation finishing before I'm "allowed" to click, it's frustrating. Poor experience. That's just my opinion, though. 

 

Is there any particular reason that the animations MUST finish before the UI becomes responsive again? My advice would be to never...ever...make the UI unresponsive unless there's a very, very compelling reason. 

 

If it's just so that your animations look cooler, I personally wouldn't say that's a good reason. The animations should be able to adjust instead. You can definitely build GSAP animations to adjust on-the-fly like that. 

 

Does that help at all?