Automatic Typewriter effect in React Typescript

Issue

I want to apply such a Typewriting effect, I am still struggling with styled components.

I know that I need to define two animations, one for typing to animate the characters and second to blink to animate the caret.

Then I apply the :after pseudo-element inline to add the caret to the container element. With Javascript I can set the text for the inner element and set the --characters variable containing the character count. This variable is used to animate the text.

Wite-space: nowrap and overflow: hidden are needed to make content invisible as necessary. But its not working in my App. I declared all styles and apply them inline.

App.tsx

import React from 'react';
import { Box } from '@mui/material';

const styles = {
    typewriterEffect: {
        display: "flex",
        justifyContent: "center",
        fontFamily: "monospace",
      },
      
      "typewriter-effect > text": {
        maxWidth: 0,
        animation: "typing 3s steps(var(--characters)) infinite",
        whiteSpace: "nowrap",
        overflow: "hidden",
      },
      
      "typewriter-effect:after": {
        content: " |",
        animation: "blink 1s infinite",
        animationTimingFunction: "step-end",
      },
      
      "@keyframes typing": {
        "75%",
        "100%": {
          maxWidth: "calc(var(--characters) * 1ch)",
        },
      },
      
      "@keyframes blink": {
        "0%",
        "75%",
        "100%": {
          opacity: 1,
        },
        "25%": {
          opacity: 0,
        }
      }
};

function Typewriter() {
    const typeWriter: HTMLElement | null = document.getElementById('typewriter-text');
    const text = 'Lorem ipsum dolor sit amet.';
    
    typeWriter.innerHTML = text;
    typeWriter.style.setProperty('--characters', text.length);

    return (
        <Box style={styles.typewriterEffect}> 
            <Box class="text" id="typewriter-text"></Box>
        </Box>
    );
}

export {Typewriter};

Solution

Forked into your codesandbox to recreate your issue. You could have used styled-components i.e

import { styled } from "@mui/material/styles";

given from MUI to create styles same as Codepen Example.

Below is my solution -

https://codesandbox.io/s/automatic-typewriter-effect-stackoverflow-y546o7?file=/src/Typewriter.tsx

Answered By - Pratik Wadekar