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:[email protected]&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😉