Transitions and Effects

[gludington]

On occasion, it might be nice to have some effects on Conversation HUD, such as transitions, vignettes, or TokenMagicFX style animations. This is not in the form of a PR, because the real work is in deciding what could be appropriate to add without compromising the usability of the module, as well as creating the appropriate UI metaphor to control it, either at module or conversation level. However, as a simple example, one can achieve an approximation of a quick cross dissolve between participants:

chudcrossfade.mp4

by changing this section of the changeActiveImage function to:

    const activeParticipantAnchorPoint = document.querySelector("#active-participant-anchor-point");
    activeParticipantAnchorPoint.style.transition = 'opacity 0.3s ease-in-out'; //possibly in the css, but simpler to track here
    activeParticipantAnchorPoint.style.opacity = 0;
    setTimeout(() => {
      activeParticipantAnchorPoint.innerHTML = activeParticipantTemplate;
      activeParticipantAnchorPoint.style.opacity = 1;
    }, 150); //should be half of what the css specifies

It is not a true cross dissolve, as that cannot be accomplished without separate DOM elements to fade between, which would be a much larger example, nor does it include logic to allow customizable (or no) delay, but hopefully is enough to spark discussion.

[CristianVasile23]

This is a great suggestion!

I am currently rewriting the module entirely to allow for more flexibility and to fix limitations caused by how I created the module initially when I was not very knowledgeable of how FoundryVTT operates.

With this in mind, I am going to try to create a framework that allows the addition of transition effects when changing the active participant, but it might take some time until the rework is completed.