@qubodup
Hi, I tested quickly with HTML5 Maker and it works.
On the free version, you’re limited to 1 animation.
It means that you have to create one, download it try. And when it’s OK, you can erase it and do a new one.
I gave HTML5 maker another shot but I guess I couldn’t figure out how to create an animation that would work in shotcut. I saw the in-animation in the source monitor but when applied to a video or added as a clip, it would be static.
They use https://github.com/greensock/GreenSock-JS/ / https://greensock.com/tweenmax by the way.
Realizing how easy it is to create a basic CSS3 animation, I tried and while it works in the browser, it unfortunately doesn’t in Shotcut:
The html file:
<!DOCTYPE html>
<html lang='en'><head><style type='text/css'>
@keyframes getin {
from {
margin: 0% -100%;
}
to {
margin: 0% 0%;
}
}
body { margin: 0; }
img {
animation: getin 1s 0s 1 ease-out;
animation-fill-mode: forwards;
min-width: 100%;
min-height: 100%;
background-color: red;
position: absolute;
}
</style></head><body><img src='image.png'></body></html>
(doesn’t require image file to be visible, adding bg color red made sure of that)
Did I do something wrong? (PS: Overlay HTML filter has the same effect, using 0%/100% instead of from/to has the same effect)
I cann’t see you video here but what I’ve done is to create animation
It gives me a folder to download with files inside. Unpack it.
Then, in Shotcut, I open a transparent png which last 10 sec for ex.
I apply a Html5 filter on it and I link the one created above.
Play, and you see it.
Export in mp4 for future use.
Hey Lauren, thank you for this workaround. It works for me :). It opens new possibilities to work with animated text.
But its quite complicated, It would be good if it will work with transparent clips in some future version of Shotcut. Do you think I should create a new thread and report it as bug?
And now I realized it would be very cool if user will have the possibility to create different transitions at the beginning of the clip using filters (similar like you can create fade in and fade out filters).
What do you think about it?
Thanks
I’m sorry but to my knowledge it is not a bug in Shotcut. The solution would have to be re-writing part of the MLT Framework itself.
The luma transitions work by using a filter to modify greyscale values of the clip. The MLT engine cannot create a greyscale map from a transparent clip, even if the text applied isn’t transparent. (This is because the text filter is also treated as a separate “layer”).
If you want to open a bug report I think you would have to do it on the MLT github page, not Shotcut.
Thank you for the explanation :).
CSS3 animation is a dead end for now because it is currently not seekable. There is actually a somewhat new Web Animation seek API, but it is too new for the web engine we are using. And the new web engine offered by Qt is still not able to be integrated into the image processing pipeline. That means using JavaScript and using the WebVfx JavaScript extension. Not all HTML animation engines make it easy or possible to integrate. The Shotcut web site page about Tumult Hype describes an easy one, and its description is informative about how to integrate other animation engines - as does the source of the Circular Frame, 3D Text, and Rutt-Etra Shotcut filters, which are viewable/hackable source in a Shotcut install. It ought to be fairly easy to integrate with GreenSock, but you need to be a web coder to do it.
Hey! First of all, thanks for developing such an amazing open-source tool!
The topic discussed here is really important to me as I was quite saddened that text animation even with transparent pictures workaround is limited to Dissolve effect only.
If possible, please, look closer into the issue. Maybe the idea of being able to work with text as if it was video clip could solve the problem.
Apart from that, it would be great to have an opportunity to change filters’ parameters over time. For example, changing “Size and Position” filter parameters in multiple points on the timeline would result in “animation” effect.
Yeah. For now the trick is to duplicate the video clip, add the text to it and then apply the effects you want (see https://www.youtube.com/watch?v=SFXbHmFRkFg )
This is usually handled with “keyframes”, which are #1 on the roadmap: Shotcut - Road Map
Hopefully soon… 
Maybe someone could suggest a website with a collection of scripted HTML/CSS animations for appearing and disappearing text?
1 Like
Hello, i have made a video with an easy way of how to add fade in and out effects in text, watch it if you like!
You can do it also in this way:
A short video tutorial
"Shotcut video editor: Adding texts with fade in and fade out".