Render Transparent Background for web

[Cris Wiegandt]

I'm currently working on a project that requires animations with transparent backgrounds and gradients for web. We did several tests, such as gifs and lottie files and nothing really worked until we came accross Rotato.

I've exported the animations from AE with ProRess4444 (and no sound) with RGB + Alpha.

Once the mov was ready I just dropped it into Rotato. The outcome is amazing. 

And you can test it right away in Safari and Chrome.

But, the mp4 doesn't work in Figma, in case you are using Figma to design. It works when it's code though.

Here you can see the test. First image is the render in Rotato on transparent BG and gradient.

Second image is the test in Safari with the Rotato app. I've added a white frame on the animation.

Here the link to the free app:

https://rotato.app/tools/converter

[Cris Wiegandt]

How to use transparent videos on the web in 2022

https://rotato.app/blog/transparent-videos-for-the-web

[Topher Welsh]

That's pretty cool.  Too bad it isn't a script/plugin for AE.

[Rick Gerard]

Standard media players do not support transparency. You need specialized tools. Specialized tools require specific media types. There is a world of difference between an MP4 and a ProRez file. Bit Depth, actual frames instead of predicted frames, It does not surprise me at all that highly compressed files will not work with this tool. It has nothing to do with Adobe and everything to do with the folks that build the other tools.