How to animate username and message separately in Streamlabs Twitch chat overlay?

Other Questions Twitch
1

I’m trying to spice up my Streamlabs Twitch chat overlay. I want the username to slide in from the left and the message to come in from the right. I’ve got the CSS but I’m not sure how to make this work. The animation part starts with #log>div{. Can anyone help me figure out how to split the animation for the username and message? I’m new to CSS animations and could use some guidance. Here’s a simplified version of what I’m working with:

#log>div {
  animation: fadeInRight .3s ease forwards, fadeOut 0.5s ease 5s forwards;
}

#log .meta {
  width: 35%;
  text-align: right;
  padding-right: 0.5em;
}

#log .message {
  width: 65%;
}

How can I modify this to animate the username and message differently?

2

I’ve been tinkering with Streamlabs overlays for a while now, and I can tell you it’s definitely possible to animate the username and message separately. Here’s what worked for me:

First, you’ll want to define keyframes for your animations. Something like:

@keyframes slideInLeft {
from { transform: translateX(-100%); }
to { transform: translateX(0); }
}

@keyframes slideInRight {
from { transform: translateX(100%); }
to { transform: translateX(0); }
}

Then, apply these to your .meta and .message classes:

#log .meta {
animation: slideInLeft 0.5s ease forwards;
}

#log .message {
animation: slideInRight 0.5s ease forwards;
}

You might need to play around with the timing and easing to get it just right. Also, don’t forget to add a bit of delay to the message animation if you want it to come in after the username. Good luck with your stream!

3

hey there! i’ve dealt with this before. you’ll need to target the .meta and .message classes separately for different animations. something like:

#log .meta {
animation: slideInLeft .3s ease forwards;
}

#log .message {
animation: slideInRight .3s ease forwards;
}

hope that helps get u started!