(A setting for) disabling fade-in animation of Kanban note edit modal

[laundmo]

Describe feature

I like the Kanban board, however, theres a big annoyance to me:

Currently, when you click on a Kanban item, it takes more than 1 second to fade in fully. First, the modal dialog fades in, then its content has its own fade.

This is an annoying delay in a feature that should really be quick to use.

Please consider disabling the fade, introducing a setting, or documenting a way to override the fade in a custom theme.

Additional Information

One part of the fade, the main modal dialog, seems to use bootstraps fade class. I was able to disable this in devtools to try what it would look like, but it doesn't get rid of the fade for the content. I was not able to find what makes the content fade in.

[laundmo]

This is how far i've gotten with pure CSS, but there seems to be a jquery-based animation involved which i obviously can't influence in CSS.

This makes the modal itself pop up instantly, and also disabled the animation for new items

.board-new-item {
    transition: none !important;
}
.board-view-container .board-note.fade-in {
    animation: none !important;
}
.board-view-container .board-note.fade-out {
    animation: none !important;
}
.modal.fade {
    transition: none !important;
}

I've seen the style="opacity: 0.xxx" of these elements (css classes) be animated through JS:

• promoted-attributes-widget
• note-detail component
• note-list-widget component

But i was not able to find where in the source code this animation happens

[dosubot]

Hi @laundmo! I'm Dosu and I’m helping the Trilium team.

The fade-in animation for the Kanban note edit modal and its content is handled by Bootstrap's modal system (the modal uses the fade class), not by custom React or jQuery logic in the content components like PromotedAttributes, NoteDetail, or NoteList. These components do not implement their own opacity or fade-in animations in code—they just render their content.

To fully disable these fade/opacity animations (including any jQuery-driven effects), go to Trilium's Performance settings and turn off the "Enable motion" (or similar) option. This sets jQuery.fx.off = true and adds a motion-disabled class to the body, which disables all jQuery and CSS-based transitions and animations globally—including the modal fade and any related effects you can't override with CSS alone. This is the recommended way to make the modal and its content appear instantly without animation.

CSS overrides alone may not be enough if Bootstrap/jQuery animations are still enabled, since those can animate opacity via inline styles. The global setting is the most robust solution for disabling all UI motion effects.

For more technical details, see the implementation of the motionEnabled option and how the modal uses Bootstrap's fade class.

To reply, just mention @dosu.

---

^{How did I do? Good | Irrelevant | Incorrect | Verbose | Hallucination | Report 🐛 | Other}

   

[adoriandoran]

There is an option to disable animations and transitions: go to Options → Appearance→ Performance section and uncheck “Enable transitions and animations”.

[laundmo]

Oh, i specifically looked for a way to disable animations and somehow didn't find that. Still, i think the default speed for the Kanban Modal is too slow even for users who'd keep animations enabled.