Help me help (HTML-CSS Stinger Transition)

w3suli

New Member
The Browser plug-in is a great module for OBS Studio, but there is no way to use it for transitions when switching scenes.
Browser plug-in allows you to use html-css animated backgrounds, use animated captions, create an animated countdown, use html-css and html-svg-css animations. Transparency can be applied so many creative ideas can be implemented.
We create the html file and paste it as a local file in the Browser plug-in.
The Browser plug-in now allows you to display an html-css animation when the scene appears, but there is no way to start the animation on a previous scene as with stinger transitions.
Current transitions:
-Fade to Black
-Cut
-Fade
-Stinger
-Luma Wipe
Stinger supported: mp4, ts, mov, wmv, flv, mkw, avi, gif, webm
Stinger not supported: html
Using the Browser snap-in, html-css animations can also be implemented as transitions between scenes.
Some examples of html-css animations:
https://codepen.io/hisamikurita/pen/oNvEjMj
https://codepen.io/hisamikurita/pen/OJLrjpB
https://codepen.io/hisamikurita/pen/bGbOrWZ
https://codepen.io/hayamine01/pen/ZEzXMjy
https://codepen.io/akhil_001/pen/mzNQoM
https://codepen.io/miocene/pen/mjLPVp
https://codepen.io/AshBardhan/pen/oyyazm
https://codepen.io/matchboxhero/pen/pWLOQb?editors=1100
https://media.24ways.org/2009/15/space.html
http://www.cssplay.co.uk/menu/cssplay-random-heroes.html
http://www.cssplay.co.uk/menu/css3-3d-carousel.html
http://www.cssplay.co.uk/menu/css3-marquee.html
http://www.cssplay.co.uk/menu/css3-clock.html
http://www.cssplay.co.uk/menu/css3-digital-timer.html
Almost anything is possible. That’s why I thought it would be worthwhile to integrate the Browser plug-in into the Stinger transition.

I am not experienced in creating desktop applications. If the HTML-CSS Stinger Transition in OBS were feasible, I would be happy to make HTML-CSS Stinger transitions for the community.
 

w3suli

New Member
This is how I envision the future user interfaces.

New Stinger transition video file UI:
StingerVideoFile.png


New Stinger transition html file UI:
StingerHtmlFile.png

(It's just a concept.)

Browser settings:
Browser width and height = video resolution.
Refresh browser when transition active.
 
Top