Is there a way to implement a typewriter effect that types out a text line and then displays a button once the animation is complete?
Here is the CSS code for the typewriter effect:
.welcome-msg {
overflow: hidden; /* Ensures the content is not revealed until the animation */
border-right: .15em solid orange; /* The typwriter cursor */
white-space: nowrap; /* Keeps the content on a single line */
margin: 0 auto; /* Gives that scrolling effect as the typing happens */
letter-spacing: .15em; /* Adjust as needed */
animation:
typing 3.5s steps(40, end),
blink-caret .75s step-end infinite;
}
/* The typing effect */
@keyframes typing {
from { width: 0 }
to { width: 100% }
}
/* The typewriter cursor effect */
@keyframes blink-caret {
from, to { border-color: transparent }
50% { border-color: orange; }
}
And here is the code for the UserMenu component in TypeScript:
import React from "react";
import { useHistory } from "react-router-dom";
import AppBar from "../../common/AppBar";
import CssBaseline from "@material-ui/core/CssBaseline";
import './styles.css';
import Grid from "@material-ui/core/Grid";
import Button from "@material-ui/core/Button";
const UserMenu = () => {
const history = useHistory();
const handleLogout = () => {
history.push('/')
}
return (
<div>
<CssBaseline />
<AppBar label="user" handleLogout={handleLogout} />
<Grid container direction="column" alignItems="center" justify="center" style={{ height: "50vh" }}>
<Grid item>
<h1 className="welcome-msg">Welcome to user homepage</h1>
</Grid>
<Grid item>
<Button variant="contained" color="secondary">Create</Button>
</Grid>
</Grid>
</div>
)
}
export default UserMenu;
Do you have any suggestions on how to resolve this issue?