Hello,
After a few days, I have eventually found a workaround to solve this problem!
Just a quick summary about what was happening:
- In my Shotcut project, I have a 15s credits part at the end of the timeline.
It is a color element (color:#ff000000) with a filter “Text: HTML” applied to it. The add-on “WebVfx.js” is enabled (last 1.11 version). - The text is displayed in white on a black background.
- The animation consists of a short list of credits, fading in from 15% to 30% of the total duration (starting at 15% because I want to slightly delay the FadeIn of this element after an other one), then starting to fade out at 90% until completely invisible at 100%.
- No other effect than opacity animation.
- On the body element of my HTML file, I have set the data-control=‘15:30’ attribute (15 seconds of duration on a 30 frames per second video). On the timeline, my color element has a duration of 17 seconds to make sure the javascript animation runs until its end.
- The font I am using is “Courier New” (.ttf files in my “C:/Windows/Fonts” directory).
- When playing this final part in Shotcut, the animation scenario is executing correctly. The credits fade in, but at 30% of the total duration (when it is supposed to be at opacity:1) here is when the bug happens: the aliasing of the characters seems to “flicker”. As if suddenly the font was displayed with a slightly thicker font-weight. Looking normally thin of the last frame of the Fade In, then slightly thicker on the next frame. Visually it looks a bit messy! I hope this makes sense for you…
- I noticed this behaviour also with other serif or monospace fonts, but not with sans-serif like Arial (which animates perfectly). Quite mysterious… I suspect this has to do with the way that “font-smooth” or “-webkit-font-smoothing” CSS properties are managed by WebVfx, but I can’t figure out how to contact its author Elusien.
Here is an excerpt of my HTML file:
<body data-control='15:30'>
<div class='webvfx' data-animate='{
start: 0,
end: 1,
ease: "easeInOutSine",
0% : {opacity:0;},
15% : {opacity:0;},
30% : {opacity:1;},
90% : {opacity:1;},
100% : {opacity:0;} }'>
<strong>Credits</strong><br/>
<i>Song's title</i> — Artist (Year)
</div>
</body>
Without success, I have tried to link my font as @font-face (with converted .weoff and .weoff2 “Courier New’ font files) in the section of my HTML file. Also tried to override “font-smooth” or '-webkit-font-smoothing” CSS properties (with ‘none’ value). And also a few other unsuccessful attempts…
Eventually, here is the workaround I have found: in the animation parameters, you have to set the opacity at 0.999 instead of 1. Here is my previous HTML excerpt with this modification included:
<body data-control='15:30'>
<div class='webvfx' data-animate='{
start: 0,
end: 1,
ease: "easeInOutSine",
0% : {opacity:0;},
15% : {opacity:0;},
30% : {opacity:0.999;},
90% : {opacity:0.999;},
100% : {opacity:0;} }'>
<strong>Credits</strong><br/>
<i>Song's title</i> — Artist (Year)
</div>
</body>
No more flickering!
I hope this helps some of you experiencing the same issue.
Best regards,
Clément
