How can I animated like a streaming chat

  animation, javascript, reactjs

I’m video editor, and I literally nothing to know about programming except semicolons works.

I want to make a stream chat for short film, so I tried this video(https://youtu.be/brpycRerhhw?t=19), and I made it with a lot of help(there is a code on below). But I can not made a animated thing.
Is there anything I can do? How can I make an animation? Please help.

import React, {Component, Fragment} from 'react';
import Messagebox from './messagebox';

const Chatbox = ({messages}) => {
    const style = {
        position:"absolute",
        right:"1vw",
        bottom:"0vh",
        width:"30vw",
        height:"10vh",
        background:"transparent",
        color:"#eeeeee",
        padding:"0vw 1vw",
        overflow:"hidden",
        textAlign:"left",
        borderTop:"solid 0vm transparent",
        "text-shadow": "1px 1px 2px black"
    }
//"-1px 0 #000, 0 1px #000, 1px 0 #000, 0 -1px #000"
    const messageboxes = messages.map(({username, t}, i) => (
        <Messagebox username={username} key={i}>
            {t}
        </Messagebox>
    ))      

    return (
        <div style={style} className="chatbox">
            
            {messageboxes}
        </div>
    )
}

export default Chatbox;

Source: Ask Javascript Questions

LEAVE A COMMENT