Hi all, i am a french

I animated a title with Google Web Designer : https://www.google.com/webdesigner/
An example in attachment ( live anim title.zip (21kb) downloaded 51 time(s).)

Two questions :

how to play this animation (html5) in Vmix overlay ?

how to modify by the browser chrome this texts "name", "surname" and "test & test" ?


merci à tous ;)
Phab

How is OBS studio integrating the google web designer? So far not visible in the video.

Can you upload the source html for the title or give a better detail of how to make them in Google Web Designer?

This looks cool, and after only 5 minutes of fiddling around (before watching video) I was also able to make an animation.

While I was able to get this to work in vMix using a web source, I did run into a few problems that hopefully someone here will help us overcome.

The animation plays once when you add the source and does not repeat. Even when "Loop" is enabled.

Right click the source and select "Reload" will blank the screen while the page is refreshed and the animation plays one time and stops.

I added a trigger to the input, "On Transition In" or "On Overlay In" and told the input to reload the web page. This works, however the last frame of the animation is live for a split second before the trigger starts. This also creates a short delay from the time you cut to the time the animation actually plays.

After thinking about it for a while, I think the best way would be to build the entire in/wait/out sequence with a few blank frames at the end of the sequence. In this way, the default state is stopped on the last frame which is blank and therefore nothing appears on screen when taking the animation. Then the trigger will reload the page, start the animation, go in its entirety, and stop at the end. This will take some practice with timing on your part as it will need an extra second to reload the page. I also tried an "OnCompletion" to clear the overlay, but I don't think web sources ever "complete." This means you'll always have that overlay on after an animation, but it shouldn't cause any problems that I can see, unless someone reloads the page without clearing the overlay. If you have a dedicated overlay specific to this effect, you can always set a master duration for after the effect completes to clear the overlay.

If anyone has a better way, please share!

Of course, when version 22 comes out with the new title designer, it may become easier just to learn the new designer. But this is still a cool alternative, if we can get that dead space to go away.

Thanks for sharing!