Create/Edit

CREATE

There are 3 places within Stream Animate where you can create the custom browser sources. A new HTML file is saved locally and an OBS Browser Source (1920×1080) is created in OBS pointing to the file.

1. Stack > Send Message to A Browser Source

2. Extensions > Link Animations

3. Extensions > StreamerSonglist > Set OBS Sources

Big Text

Resizes text larger automatically. Adds a one new line for multiple words.

To change the style, edit the CSS within h1 { } at the top of the HTML file. Do not change font-size

^{Note: Certain Font-Family types don’t work well with this effect.}

Bulge

To change the style, edit the CSS within .bulge { } at the top of the HTML file.

Count Up

To change the style, edit the CSS within .count-up { } at the top of the HTML file.

^{Note: Only works with integer numbers}

Fade In Shadow

To change the style, edit the CSS within .fade-in-shadow{ } at the top of the HTML file. Alternatively change the colour with a Color Correction filter in OBS

^{Note: The background needs to be opaque for the effect to work well.}

Flip

To change the style, edit the CSS within .flipping { } at the top of the HTML file.

Plain Text

No animation.

To change the style, edit the CSS within .plain-text { } at the top of the HTML file.

Slide Up

To change the style, edit the CSS within .slide-up { } at the top of the HTML file.

Typing

To change the style, edit the CSS within .typing { } at the top of the HTML file.

Edit

Best practice is to edit the CSS at the top of the local html file, instead of adding CSS via OBS.

You can find the location on the file in the OBS Properties menu of the browser source.