Animations

[jweintraub]

Is there any general guidance for animations, optimal speeds, etc? We're planning to show an animation in the nav when we go in and out of a service nav.

[gloriliale]

Hi @jweintraub! So, we haven't tackled animation guidelines as part of Paste yet, but could you give us some visuals around what you're planning, and what you mean by going in and out of a service nav? We could offer specific support!

[jweintraub]

Hi! Please see attached screencast to see what I mean for going in and out of a service nav. We'd like the service nav to slide in from right when entering a service and slide out from right when going back to main nav. Any guidelines you can provide are helpful but if you don't have any yet, I can make up something that looks good.

Screen.Recording.2021-07-13.at.10.03.28.AM.mov

](url)

[gloriliale]

Thanks for sending this over @jweintraub!
The first thing that jumps out is that this service nav completely covers the previous menu- is there a way to preserve the hierarchy of Messaging --> Services so there isn't a loss of context if a user looks away?

For the animation itself, we have a slide animation in @twilio-paste/animation-library which has spring physics that would work. It's a result of a user click, so our suggestion would be that it be quick and last from 100-200 ms.

You could also consider a mutation effect, where opening up Services bounces open the Services nav, moves it up under Messaging, and has everything else fade away, as opposed to the whole previous menu disappearing. Example of the bounce open and close part of that is the menus on this page.

[jweintraub]

Thank you so much. This is very helpful!

[jweintraub]

Can you share the link to @twilio-paste/animation-library? Not able to find it.

[andioneto]

Hi @jweintraub 👋 @twilio-paste/animation-library is a wrapper around React Spring, the third party animation library we use for Paste.

• @twilio-paste/animation-library source code
• React Spring documentation