HTML - CSS Animation Support

Elusien · January 11, 2018, 2:40pm

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

Steve_Ledger · January 11, 2018, 7:40pm

Shotcut development plans are listed here;

Elusien · January 11, 2018, 8:57pm

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.

brian · January 12, 2018, 2:13pm

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:

github.com

mltframework/shotcut/blob/master/src/qml/filters/webvfx_threejs_text/threejs_text.html#L283


		if (textPosition.x !== horizontal) {
			textPosition.x = horizontal;
			refreshText();
		}
		var vertical = (0.5 - webvfx.getNumberParameter('vertical')) * window.innerHeight * 0.5;
		if (textPosition.y !== vertical) {
			textPosition.y = vertical;
			refreshText();
		}


		group.rotation.x = 2.0 * (webvfx.getNumberParameter('x_rotation') - 0.6);


		renderer.clear();
		renderer.render( scene, camera );


	}


	</script>
</body>
</html>

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.

shotcut · January 13, 2018, 2:33am

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)

Elusien · January 13, 2018, 3:33pm

@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.

Elusien · January 13, 2018, 10:33pm

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.

shotcut · January 20, 2018, 9:22pm