DocsOverlaysTransitions (stingers)

Transitions (stingers)

PremiumStudio → Overlays → Transitions (stingers)13 settings3 min read

A stinger is the short animation that plays when you switch scenes in OBS. On the Transitions tab you design one with your own colors, logo, text and sound, see it loop in a preview with a timeline, and let DAB Bot render it as a transparent WebM — the format OBS's Stinger transition expects.

How it works#

  • Five styles: Wipe, Diagonal, Shutters, Logo zoom, Iris.
  • The switch point is the moment the screen is fully covered; OBS swaps scenes there so viewers never see the cut.
  • New transitions start with your brand kit's colors, name and heading font.
  • Rendering happens in your browser (frames) and on the DAB server (video); the result is also stored in your library.

Before you start#

OBS Studio (Scene Transitions → Stinger).

Set it up#

Part 1Make and install a stinger6 steps
Open the page

In the Studio sidebar, under STREAM TOOLS, click Overlays.

New transition

Tab Transitions → New transition.

Design it

Pick a Style, Color 1, Color 2, text color, a Logo and Text, Font, Duration and an optional Sound.

Render

Render as WebM. The button shows Drawing frames d/n, then Making video….

Download

Download WebM and put the file in a fixed folder on your PC.

Add to OBS

OBS → Scene Transitions → + → Stinger → name it → choose the video file → Transition point (time) = the ms value shown on Transition point.

Switching scenes in OBS plays your own transition.

Every setting explained#

Transition designer
NameMax 60 characters.
StyleWipe, Diagonal, Shutters, Logo zoom, Iris.
WipeDiagonalShuttersLogo zoomIris
Color 1 / Color 2 / TextThe two main colors and the text color.
Logo (from your library)An uploaded image, or no logo.
Text / FontUp to 60 characters; font Oswald, Impact, Arial Black, Bebas Neue, Montserrat, Poppins (or your brand font).
DurationTotal length, 0.6–4.0 s.
Switch point (screen fully covered)20–80% of the duration — shown in ms. This is the value OBS needs.
Sound (from your library)An optional whoosh or sting.
Buttons
SaveSaves the design.
Render as WebMSaves and renders the video (30 fps).
Download WebMDownloads stinger-name.webm.
Transition point N msCopies the switch point value for OBS.
DeleteRemoves the transition.

Good to know#

Re-render after every design change — the list shows Not rendered yet or WebM ready · N ms.
Keep stingers short (1–1.5 s) so scene switches don't feel slow.

Troubleshooting#

OBS shows a black frame during the transition
Use the downloaded WebM (it has transparency) and set Transition point type to Time (milliseconds) with the exact value shown.
Render failed
Try again; if the logo is a large GIF, use a PNG instead.
Was this page helpful?