Design & animation
PremiumStudio → Overlays → Design & animation26 settings5 min read
Every layer (except groups) has a second inspector tab, Design & animation. It works the same for text, shapes, images and widgets, so you can give a chat box a glass background, make a logo pulse, or show a sticker only when a raid comes in. Sections fold open and show a dot when something in them is set.
How it works#
- Design settings sit on top of a widget's own look — e.g. an alert box's Appearance background plus a design border and glow.
- Entrance and exit animations play when a layer appears or disappears in OBS: when the overlay loads, when it's shown by an automation, or with Only on an event.
- Looping animations run constantly. Play preview replays the animations on the canvas.
Before you start#
A layer selected in the editor (not a group).
Set it up#
Part 1A raid sticker that pops in5 steps
Open the editor
On the Overlays tab, click an overlay's thumbnail or its Edit button.
Add the sticker
Uploads → upload a GIF or PNG and place it.
Animate it
Select it → Design & animation → Animation: Entrance Pop, Exit Fade, Looping Bounce.
Show it only on raids
Visibility → Only on an event → click RAID → Visible for 8 s.
Test
Publish, then send a Raid from the event simulator.
In OBS the sticker pops in on a raid, bounces for 8 seconds and fades out.
Every setting explained#
Shape & border
| Corners | Corner radius 0–2000 px. The link icon switches to per corner (top-left, top-right, bottom-right, bottom-left). |
| Border | Width 0–100 px and style Solid, Dashed, Dotted or Double; a Border color appears when width > 0. SolidDashedDottedDouble |
| Background | A background color behind the layer (any CSS color, or a brand swatch). |
| Mask | Cut the layer into a shape: None, Circle, Rounded, Hexagon, Diamond, Triangle, Star — e.g. a round webcam-style logo. NoneCircleRoundedHexagonDiamondTriangleStar |
| Shape mask | Mask with an image/GIF (only its non-transparent parts stay visible; a GIF animates the mask) or with text (60 characters, font Impact, Arial Black, Oswald, Georgia, Verdana or Courier New). Then choose Fit / Fill / Stretch and optionally Invert. NoneImage/GIFText |
| Flip H / Flip V | Mirror the layer horizontally or vertically. |
| Blend mode | How the layer mixes with what's below: normal, multiply, screen, overlay, darken, lighten, color-dodge, difference, hard-light, soft-light. normalmultiplyscreenoverlaydarkenlightencolor-dodgedifferencehard-lightsoft-light |
Effects
| Shadow | Drop shadow with X and Y offset (−60 to 60), Softness (0–120) and color. |
| Glow | A colored glow around the layer: Size (0–120) and color. |
| Glass (backdrop blur) | Blurs whatever is behind the layer (0–40 px) — the frosted-glass look. Combine with a semi-transparent background. |
Color correction & filters
| Brightness / Contrast | 0–200% (100% = unchanged). |
| Saturation | 0–300% (0% = grey). |
| Hue | Shift all colors −180° to 180°. |
| Grayscale / Sepia / Invert | 0–100%. |
| Blur | Blurs the layer itself, 0–40 px. |
| Reset filters | Puts every filter back to neutral. |
Animation
| Entrance / Exit | None, Fade, Slide from left, Slide from right, Slide up, Slide down, Zoom, Pop, Blur in, Flip. NoneFadeSlide from leftSlide from rightSlide upSlide downZoomPopBlur inFlip |
| Duration | Length of the entrance/exit, 100–3000 ms. |
| Delay | Wait before the entrance starts, 0–5000 ms — stagger several layers for a nice build-up. |
| Looping | Runs continuously: None, Pulse, Float, Spin, Shake, Glow, Bounce, Wobble. NonePulseFloatSpinShakeGlowBounceWobble |
| Speed | Speed of the looping animation, 0.2×–4×. |
| Play preview | Replays the animations on the canvas. |
Visibility
| Always / Only on an event | Only on an event: in OBS the layer stays hidden until a chosen event arrives, then shows for the set time and hides again. In the editor it stays visible so you can design it. AlwaysOnly on an event |
| Events | Click the events that should show it: FOLLOW, SUBSCRIBE, GIFT_SUB, CHEER, RAID, REDEMPTION, STREAM_START, DISCORD_JOIN, TIP, EMOTE_RAIN. None chosen = any event. |
| Visible for | How long it stays, 1–60 seconds. |
Custom CSS
| Custom CSS | Extra CSS declarations for this layer (max 4000 characters), e.g. letter-spacing: 2px; text-shadow: 0 0 8px #2f8fff;. url() isn't allowed. |
Good to know#
Glass only shows something when there's content behind the layer — check with the Game scene preview background.
Use Delay on several layers (0, 150, 300 ms) for a starting-soon screen that builds up piece by piece.
Heavy blur and glow on many large layers costs GPU in OBS. Keep big effects to a few layers.
Troubleshooting#
My entrance animation doesn't play in OBS
Entrance animations run when the layer appears. Refresh the browser source, or use Only on an event / an automation to show it.
The layer is invisible in OBS but visible in the editor
Check Visibility: with Only on an event it's hidden until that event arrives. Also check the eye icon in the layer list.
Was this page helpful?