Currently, I am aiming to implement a captivating Typewriting effect using styled components, but encountering some obstacles in the process.
The approach involves defining two animations - one for character typing and another for caret blinking within the container element. By utilizing the :after pseudo-element with inline styling, I add the animated caret, while dynamically setting the text content and character count through JavaScript.
Incorporating properties like white-space: nowrap and overflow: hidden helps conceal excess content, although these styles seem ineffective within my application despite being correctly declared and applied 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"
...
}
};
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);
...
}
export {Typewriter};