I've just discovered that built-in options for adding strokes to text objects is sub-optimal so I've taken to using HTML elements instead. However, I was a little shocked to discover that things like masks, fade, tween, opacity and such don't actually work with HTML elements?
You can add things like the fade behavior (or opacity tween) to an HTML element but it doesn't actually seem to work which is a little counter-intuitive. If it's not supposed to work with it, why can I even add it? As far as I can tell the only way for me to get an HTML element to fade in and out was to add a bunch of CSS to the top of each HTML element in a style tag. So the HTML element basically looks like this:
<style>
.fade-in {
opacity: 1;
animation-name: fadeInOpacity;
animation-iteration-count: 1;
animation-timing-function: ease-in;
animation-duration: 0.75s;
}
@keyframes fadeInOpacity {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
.fade-out {
opacity: 0;
animation-name: fadeOutOpacity;
animation-iteration-count: 1;
animation-timing-function: ease-in;
animation-duration: 0.75s;
}
@keyframes fadeOutOpacity {
0% {
opacity: 1;
}
100% {
opacity: 0;
}
}
</style>
<span style="font-family:'Arial Black';font-size:1.8em;font-weight:black;color: white; text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;">My HTML Element</span>
Then I would call the action Set Attribute for the HTML element and use it to set the attribute "class" to either "fade-in" or fade-out" accordingly. As soon as the class is set the animation would trigger.
It works but I'm unsure if there is a cleaner way for this to be handed.
If not, at least this will serve as a means to show someone else how to accomplish this without having to waste as much time as I did trying to find an official means to do this in the engine.
Thanks!