HTML - CSS Animation Support


#1

Shotcut apparently doesn’t handle CSS animation. Are there any plans to do so?

For example the following HTML/CSS code causes the phrase “SPINNING TEXT” to spin around the centre of the page, when viewed in a browser. but the text is static when the HTML is input as an “Overlay HTML” filter in Shotcut.

Implementing CSS Animations would be a relatively easy way for users to create animated objects and text on their movies.




  Page Title
  
    @keyframes spin {
        0% {transform: rotate(  0deg);}
      100% {transform: rotate(360deg);}
    }

	.spinning {
		position:     fixed;
		height:        90px;
		width:        412px;
		top:            50%;
		left:           50%;
		margin-top:   -45px;
            margin-left: -206px;
            animation:   spin 1s ease-in-out 1;
        }

  


  
SPINNING TEXT

#2

Shotcut development plans are listed here;

https://www.shotcut.org/roadmap/


#3

I take it that’s a “no” then.

I also tried to implement the rotation using a WebVfx javascript script that included
…style.tranform = “rotate(” + Math.round (360/time) + “deg)”

but that didn’t work either. Pity.


#4

Shotcut uses webVfx “under the hood”. There is an example that rotates text here:
https://www.mltframework.org/doxygen/webvfx/examples_2transition-demo_8html-example.html

Also, if you look in the source for the “3D Text” filter, you can see that there is a line to set rotation in the JS:

Maybe you can get a hint from that.

Sorry, I’m not a web expert. I’m not sure if rotation is possible using CSS, but I’m sure it is possible using JS.


#5

Shotcut supports CSS animation, but it may not support all the latest CSS3 features. In order to control the animation with time, you need to use a polyfill, in conjunction with WebVfx. However, you need to embed the polyfill instead of refer to it by URL because most publicly hosted copies of that are via https, which Shotcut does not yet support. You will also need to take care of the duration of the animation for the clip. I do not know why your attempt did not work. It is tricky, and I do not debug people’s scripts for them. Here is an example for 60 seconds scrolling credits:
web-animations.min.js.zip (15.0 KB)


#6

@brian, @shotcut,

Thank you both for pointing me in these directions. I will have a look at the resources you have provided and do a bit of experimenting. I’ll let the forum know how I get on if I manage to produce something useful.


#7

Thanks to @brian and @shotcut, I found my problem. WebVfx uses the “-webkit-transform” variant of CSS rather then the prefix-less “transform” variant. So my WebVfx version should have been:

…style.webkitTranform = “rotate(” + Math.round (360 * time) + “deg)”

I’ll be experimenting with this over the next couple of days and report on my progress for others who might want to use various HTML-CSS features.


#8

See also Movie-style scrolling credits


#9

Hello,
I also tried following the procedure (copy code, backup under Html, black color on video track, filter, tick option, load the HTLM file) and nothing happens; worst ShotCut plant!
Help and thank you in advance with a hello from France.


#10