Chat animations

[SpacemannFinn]

Would be great to either get animations for chat messages or an explanation of what CSS is needed to make a chat animation and we can write our own in the OBS CSS

[3dproger]

Hello! This feature is currently in development plans. It is expected that there will be various settings for the appearance of widgets, including animations

[SpacemannFinn]

That's good to know. I have just done a total re-styling from the base version, happy to share it if you want to see it

[3dproger]

I'd be interested to see that. If you want, you can send a screenshot or post the code

[SpacemannFinn]

It's meant to mimic Restream Chat, as such it runs top to bottom, and has a slide in animation with a little bounce. among other changes. Also I only use youtube and twitch chats here.

Code

/*New Fonts*/
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100..900&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

/*-------------------------Animation--------------------------------------*/
.messagesListView > div:nth-last-child(2){
  position: relative;
  animation-name: slideIn;
  animation-duration: 0.3s;
  animation-iteration-count: 1;
  transition-timing-function: cubic-bezier(.75,-0.5,0,1.75);
}


@-webkit-keyframes slideIn{
  0%   {transform: translateX(100%)}
  80%  {transform: translateX(-2%)}
  90%  {transform:translateX(2%)}
  100% {transform: translateX(0%)}
}
/*------------------------------------------------------------*/


/*Moves username onto new line*/
span.authorName::after{
content: "\A";
  white-space: pre;
line-height:2;
vertical-align:top
}

/*Reverses the message order*/
.messagesListView{
  display:flex;
  flex-direction: column-reverse
}


/*---------------------------------message styling---------------------------*/
.message{
background: #253858;
  padding: 1rem;
  margin: 0.2rem 0;
  width: 280px;
  box-shadow: 5px 5px 5px rgba(37,56,88,0.4);
  border-radius: 0px;
}

.badgeServiceIcon {
  width: 12px;
  padding-right: 6px;
}

.badgeLeft, .badgeRight {
  display: none;
}


/*This removes the colon I believe?*/
span.text:nth-of-type(3) {
  display: none;
}


/*Pushes the actual message text downwards a little*/
.message :nth-child(n+4) {
  margin-top: 6px;
  word-wrap: anywhere;
}

/*------------------------------------------------------------*/


/*Transparent BG and removing scroll wheel*/
body{
  background-color: rgba(0,0,0,0);
overflow-y:hidden;
overflow-x:hidden;
}

/*--------------Finally using the fonts to change the name and messages to look nicer-------------------------*/
.authorName {
color: #D3D3D3 !important;
  font-family: "Poppins", sans-serif;
  font-style: normal;
  font-weight: 300;
font-size: 15px;
} 

.text{
color: #FFF !important;
  font-family: "Inter", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
margin-top: 5px
}

[3dproger]

Hello! I tried using this code and I have to say that the appearance looks great!

I'm working on the concept of customizing widget themes and can use your code as one of the theme options. Of course, with your consent and attribution. Perhaps it will be possible to create some kind of hub where each person can post their own version of the theme.

P.S. Sorry for taking so long to answer

P.S. 2: If it was you, then thank you for the donation two weeks ago

[SpacemannFinn]

Yes, the donation was me. This project is super important to me as I am a streamer who focuses on news and uses chat as part of my visuals, so I really appreciate your work.

Also, please use the theme, I hope it helps you. Your app is fantastic, and I am glad to even be a small part of it. I am also happy to make more themes and comment the code to help if need be.

A theme repo would probably ease the work of creating a themeing widget since it will only require small tweaks if the themes are heavily commented as they should be.

[3dproger]

Thanks for the theme code and donation!

Create a repository for themes, I like this idea. Perhaps it will be so.

Regarding donations, I have now made it so that the nicknames of all donors are displayed when the programs are launched. Usually, this is displayed for about a month. If you don’t want your nickname to be displayed, I can remove it, just let me know😉

[3dproger]

Hi! Sorry for not writing for a long time. Anyway, I created a forum where anyone can share their CSS styles: 3dproger/AxelChat#621

I added your CSS style, I hope you don't mind. Your style is very cool. If you want to change something or remove the style, write to me.

P.S. I added this piece of code so that the colons at the beginning of the message are not displayed:

/*Hide the separator between the nickname and the message text*/
.authorMessageContentSeparator {
  display: none;
}

[SpacemannFinn]

Thanks so much @3dproger. I appreciate it, I'm just glad to have contributed anything to your amazing project.

I hope to see more out of it, can't wait for the auto-update button so I only need one version on hand. P.S. Is it possible to handle that through something like steam/itch.io or something of the sort?

Here's what I'm currently using in case anything in here is interesting btw

Current OBS CSS Version 0.37 Axel

/*New Fonts*/
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100..900&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');


#root > span > img[src='./images/tick.svg'], #root > span > img[src='./images/error-alt-svgrepo-com.svg']{
  display: none;
}

#root > span > .authorName {
  display: none;
}

#root .ant-spin.ant-spin-spinning,
#root .anticon.anticon-loading.anticon-spin {
  display: none;
}

/*-------------------------Animation--------------------------------------*/
.messagesListView > div:nth-last-child(2){
  position: relative;
  animation-name: slideIn;
  animation-duration: 0.3s;
  animation-iteration-count: 1;
  transition-timing-function: cubic-bezier(.75,-0.5,0,1.75);
}


@-webkit-keyframes slideIn{
  0%   {transform: translateX(100%)}
  80%  {transform: translateX(-2%)}
  90%  {transform:translateX(2%)}
  100% {transform: translateX(0%)}
}
/*------------------------------------------------------------*/


/*Moves username onto new line*/
span.authorName::after{
content: "\A";
  white-space: pre;
line-height:2;
vertical-align:top
}

/*Reverses the message order*/
.messagesListView{
  display:flex;
  flex-direction: column-reverse
}


/*---------------------------------message styling---------------------------*/
.message{
background: #253858;
  padding: 1rem;
  margin: 0.2rem 0;
  width: 400px;
  box-shadow: 5px 5px 5px rgba(37,56,88,0.4);
  border-radius: 0px;
}

.badgeServiceIcon {
  width: 12px;
  padding-right: 6px;
}

.badgeLeft, .badgeRight {
  display: none;
}


/*This removes the colon I believe?*/
span.text:nth-of-type(3) {
  display: none;
}


/*Pushes the actual message text downwards a little*/
.message :nth-child(n+4) {
  margin-top: 6px;
  word-wrap: anywhere;
}

/*------------------------------------------------------------*/


/*Transparent BG and removing scroll wheel*/
body{
  background-color: rgba(0,0,0,0);
overflow-y:hidden;
overflow-x:hidden;
}

/*--------------Finally using the fonts to change the name and messages to look nicer-------------------------*/
.authorName {
color: #D3D3D3 !important;
  font-family: "Poppins", sans-serif;
  font-style: normal;
  font-weight: 300;
font-size: 1rem;
} 

.authorMessageContentSeparator{
display: none
}

.text{
color: #FFF !important;
  font-family: "Inter", sans-serif;
font-size: 1.3rem;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
margin-top: 5px
}

[3dproger]

Hi! Thanks. I'll think about auto-update. Maybe I'll actually use something like steam/itch.io

[SpacemannFinn]

Either an auto update thing or an installer for windows that just updates all the files wherever they've been installed. It would genuinely make balancing all these versions much easier.

…

On Sun, 23 Mar 2025, 15:49 Alexander, ***@***.***> wrote: Hi! Thanks. I'll think about auto-update. Maybe I'll actually use something like steam/itch.io — Reply to this email directly, view it on GitHub <#7 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AHCLKMP7QNREAWHYKB5RU732V3JYHAVCNFSM6AAAAABZL47A4GVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDONBWGI4DEMZWGA> . You are receiving this because you authored the thread.Message ID: ***@***.***> [image: 3dproger]*3dproger* left a comment (3dproger/AxelChatWidgets#7) <#7 (comment)> Hi! Thanks. I'll think about auto-update. Maybe I'll actually use something like steam/itch.io — Reply to this email directly, view it on GitHub <#7 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AHCLKMP7QNREAWHYKB5RU732V3JYHAVCNFSM6AAAAABZL47A4GVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDONBWGI4DEMZWGA> . You are receiving this because you authored the thread.Message ID: ***@***.***>