How can I make Twitter Bootstrap modal animation faster?

Question

I really like the Twitter Bootstrap modal, but showing it with the animation is a bit slow. I'd say around 500ms.

Is there a way to make it faster? I looked in bootstrap-modal.js but couldn't find anything compelling that could help.

And, I don't want to deactivate the animation completely because I've found out that it's a good trick to make response times seem faster in the eyes of the user ;o)

Tokharian

Good question. In my case, the SPA I'm building makes extensive use of modals.. and their associated events $('#myModal').on('shown.bs.modal', function () { .... } to trigger other logic. When it comes time to unit test this stuff, I'd like to speed up the execution – Elodiaelodie

Answer 1

You can manipulate the .fade class as explained here:
How can I change the speed of the fade for alert messages in Twitter Bootstrap?

Kummerbund

Modifying .fade class based on that link answer is only for adjusting the background fading speed. The slide down and slide up speed seems to be unchanged. – Sundew

Except, if you remove the fade class entirely, then there is also no sliding animation done. – Duffy

As @Sundew pointed out, modifying .fade will not affect the modal slide animation. There is another thread that shows how to solve this problem. See my answer below. – Nylon

Answer 2

Slide animation can be changed by modifying .modal.fade .modal-dialog in bootstrap.css as suggested here: Modify Bootstrap Modal Transition

Quite late to the party, however this question is the first search result in google, and question hasn't really been answered. So, I thought this might help someone. Cheers!

Nylon