How to add timing delay for streaming notification text

Other Questions Twitch
1

I’m looking for assistance with creating a delayed text effect for my streaming notifications. Currently, when someone subscribes or follows, both the image and text are displayed at the same time. What I want is for the image to show first, followed by the text appearing after a few seconds.

I’ve struggled with the timing aspect and could use some help since I’m not very experienced with CSS animations or JavaScript. Here’s what I have so far:

.alert-box {
  font-family: 'Arial';
  font-size: 20px;
}

.picture-wrapper {
  width: 100%;
  height: 100%;
}

.alert-box .picture {
  object-fit: cover;
  width: 100%;
  height: 100%;
}

.description {
  font-size: 22px;
  color: #FFFF00;
}

.background-video {
  width: 100%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: -2;
}

.header {
  color: #00FF00;
}

.message-wrapper {
  position: absolute;
  top: 45%;
  left: 55%;
  transform: translateX(-50%) translateY(-50%);
  text-shadow: 1px 1px 3px #000000;
}

<div class="alert-wrapper">
  <div class="picture-wrapper">
    <img class="picture" src="{follower_image}" />
  </div>
  
  <div class="message-wrapper">
    <div class="header">
      Thanks <span class='username'>{follower_name}</span> for the follow!
    </div>
    
    <div class="description">
      <span class='message'>{custom_message}</span>
    </div>
  </div>
</div>

Does anyone know how I can make the text appear 2-3 seconds after the image? I appreciate any assistance!

2

You could slide the text in from below using CSS transform with translateY. Start with your .message-wrapper set to transform: translateX(-50%) translateY(-50%) translateY(20px); opacity: 0; then add a .show-text class that brings it back to normal position with opacity 1. Use JavaScript to trigger that class after your delay. This works way better than just fading in, especially with OBS browser sources. The movement grabs viewers’ attention more than a simple fade. Don’t forget transition: all 0.5s ease; to make the slide smooth instead of instant.

3

Set .message-wrapper to visibility: hidden first, then use setTimeout to show it after your delay: setTimeout(function() { document.querySelector('.message-wrapper').style.visibility = 'visible'; }, 2500); This beats pure CSS since streaming software can be weird with animation-delay. I’ve noticed visibility works way better than opacity for streaming alerts - doesn’t mess with layout calculations. Just wrap it in a function and call it when the alert fires. 2.5 seconds feels pretty natural from what I’ve tested.

4

Skip the manual CSS and JavaScript setup. Streaming notifications happen constantly, and coding custom delays for each one turns into a nightmare.

I’ve switched to handling all my streaming alerts through automation. Set up a workflow that triggers on follows or subs, then control exactly when each element appears. Image shows immediately, wait 2.5 seconds, then display text with whatever animation you want.

Best part? You can change timing without touching code. Want 3 seconds instead of 2? Change one number. Different delays for different alert types? Done.

You also get way more control over the notification flow. I queue multiple alerts, prevent overlaps, and customize delays based on follower count or time of day.

No more wrestling with CSS keyframes or setTimeout functions that break when your streaming software updates.

5

Skip animation-delay and use transition-delay instead - it’s way more reliable in OBS. Start with opacity: 0 on your text, then add a class with opacity: 1; transition: opacity 0.8s ease 2.5s; where that last number is your delay. Works every time and no JavaScript can break it.

6

add animation-delay: 3s; to your .message-wrapper css and start with opacity: 0. then create a keyframe animation to fade it in. i use this for all my alerts - works perfectly!