I’ve played about a bit more. The main problem is the lack of support in Shotcut for the CSS directive:
perspective: 1000px; or -webkit-perspective: 1000px; and
transform-style: preserve-3d; or -webkit-transform-style: preserve-3d;
Without this you won’t get what you are hoping for I’m afraid and my framework cannot overcome this.
whats interesting is that I use qmelt from shotcut download from the website. I also built qmelt and the webvfx and utils from source. running with melt I actual see movement versus the downloaded qmelt. Wondering if it comes down to the version of qt used during compile
The following is my understanding, which may or may not be correct.
Development ceased on QT Webkit, which is used by Shotcut-MLT, in 2013, before the newer CSS animation features became supported. A new framework QT WebEngine, based on Chromium, was being touted as a better replacement.
In 2016 development of QT Webkit was restarted, but there was a lot of work needed to catch up and while it is not quite ready for production yet (there are still some issues with the Windows version) it is available for use and its official release is imminent.
See: http://lists.qt-project.org/pipermail/development/2017-May/029795.html and http://qtwebkit.blogspot.com.cy/2016/08/qtwebkit-im-back.html
Hopefully once this is officially released in QT it will be incorporated into Shotcut-MLT and we shall all reap the benefits of support for more modern HTML/CSS constructs.
Elusien, I love your webvfx.js stuff. I have found this for blender, https://www.blendermarket.com/products/25-professional-titles-for-blender . Do you think it would be doable also with your framework?
Thank you for considering.
I’ve looked at the website you gave and it may be possible to do something similar for Shotcut videos.
I did at one time think of putting together a set of HTML files as Overlay HTML filters for good looking film titles and film credits for use with my WebVfx.js stuff. People could then, with very little effort and very little knowledge of HTML/CSS/Javascript, modify these to produce some reasonably professional looking beginnings and endings for their Shotcut creations. I know that some people are a bit daunted with HTML and CSS and it would mainly help them.
Unfortunately I got sidetracked doing a fairly large project to produce an app to enable golf club competition secretaries to create and manage golf competitions.
I still have some work to do on the golf app, but it did get me thinking that I could also create an app to simplify creating these Overlay HTML filters. It would be a nice exercise for me to try to do. I’d have to look more closely at the feasibility of doing this, but if it proved too difficult I could always fall back to samples of HTML code that people could edit manually.
I suspect it will be a couple of months before I have the time to make a stab at it,
Hey, great news then 
I am happy with just html/css samples. I started experimenting with your sample scripts. I think that titles are one of the mostly used feature for HTML Overlay.
What you could also do is post something like a tutorial how to move stuff with Shotcut/HTML/CSS/JS. I got couple of hints from reading your code samples, but would be nice to have a reference how to do this and that with Shotcut, eg. moving stuff around with js,css … ( /* ignored by MLT-Shotcut */)
I hope you know what I am talking about.
Hope you don’t mind me stepping in here firstly to say Hi Neil! @elusien - I’m still dabbling with a few video titles using your webvfx framework. And @palica, yes it would be nice to make html/css more user-friendly.
I do agree. to demonstrate this, here’s a short animation (unfinished) I did a few months ago using Shotcut’s Overlay HTML filter and Elusien’s Webvfx framework js file. The text is a bit silly - I did it to experiment with multi-lines of text appearing and disappearing, using percentage keyframes…
And … here’s a screen capture video of the code I used to create it: !!! I certainly looks complicated, although I had no training in HTML/CSS until about year ago and I picked it up from the web and also Elusien on this forum.
I wish I had time - I’d really like to make a tutorial sometime about how you can make text, lines and boxes move about using HTML code.
@jonray, do you mind sharing the code on a paste bin somewhere? The video looks perfect, even the short part of it. 
@palica Sure thing! When I get a few moments I’ll post the code on here. Might be 24-48 hrs, rather busy at the moment!
Thanks!! Jon
@palica
The code is quite long, so I’ve attached it as a .txt document.
Dont worry about a thing HTML animation 01.txt (12.5 KB)
You are welcome to analyse/play around with it !
To get it to work in Shotcut, a few important points:
Also, specifically for this html file:
It will only work as intended in Shotcut if you apply it to a clip (either video clip of your choice or a color clip) which is 100 seconds long. That’s because this was an experiment to see whether I could apply multiple animations to the text and lines using percentage keyframes, so I set the duration to be 100 seconds. Code for this is:
data-control="100:30"
Good luck!
Jon
@jonray, thank you very much for your code and instructions. Looking forward to experimenting with it.
@palica No problem. Another suggestion (pardon me if you know this already or are experienced in HTML) is to use Notepad++ to view the code. I have it set up with the “dark material” theme.
You can make decent title sequences using Shotcut filters. This was done using mask, text, and opacity filters only with 4 video tracks and one audio.
You can do more sophisticated ones with HTML overlay. Using key frames and timing it’s possible to make reasonable title sequences.
Wow, looking great as usual, @sauron! Keep 'em coming - you are the Size/position and Mask Master!! Yes, this could be done with html but it would be a lot of code and there’s a big disadvantage - when previewing the animation it always starts from the beginning so it’s very time-consuming when you make a lengthy animation. (Also you need a lot of trial and error to tweak everything into position). Great work! 
(I’m guessing that to make the text disappear mid-screen you used two identical background clips and masked out a central rectangle on one?).
This link is great for showing the possibility of object animation using HTML:
https://rupl.github.io/unfold/
Indeed. Text is sandwiched between 2 BGD clips with mask on top.
Nice. Will have a go at that myself sometime.
