I’m trying to creating a typing animation effect for a portfolio website. I have two issues, which are:
-
The text jitters horizontally as the typing animation progresses, i’m assuming this is due to the fact that my typing animation is causing the width of the animated the text being "typed" to change dynamically, but none of the fixes I have tried have resolved the issue.
-
I’m trying to get the typing animation to be justified to the center instead of the left. The problem with this is, each string is different in length and so If I correctly position one string, the others following it will look out of place. When typing centrally justified text in any document editor, both the start of the string and the typing cursor move away from each other equal amounts as the string gets longer. But i’m not sure how to achieve this.
* {
box-sizing: border-box;
padding: 0;
margin: 0;
}
.main {
overflow:hidden
}
.home__container {
row-gap:4rem;
padding-top:2rem
}
.home__data {
row-gap:1.5rem
}
.home__title {
text-align:center;
font-size:var(--biggest-font-size);
letter-spacing:.3px;
margin-bottom:.5rem
}
.section__border {
border-bottom:1px solid var(--title-color);
padding-bottom:3.5rem
}
.container {
max-width:1024px;
margin-inline:1.5rem
}
.grid {
display:grid;
gap:1.5rem
}
.type {
display: inline-block;
}
.type>span {
display: grid;
overflow: hidden;
height: 1.2em;
}
.type span span {
width: 0%;
max-width: max-content;
overflow: hidden;
height: inherit;
word-break: break-all;
animation: c 0.5s infinite steps(1), t 2s linear infinite alternate, m 12s steps(3) infinite;
}
.type span span:before {
content: " ";
display: inline-block;
}
@keyframes t {
90%,
100% {
width: 100%
}
}
@keyframes c {
0%,
100% {
box-shadow: 5px 0 0 #0000
}
50% {
box-shadow: 5px 0 0 rgb(255, 255, 255)
}
}
@keyframes m {
100% {
transform: translateY(-300%)
}
}
<main class="main">
<section class="home section" id="home">
<div class="home__container container grid section__border" id="maincard">
<div class="home__data grid">
<h1 class="home__title">Hello World, I'm Dan <br /><span class="type">
<span>
<span>Software Engineer</span>
<span>Computer geek</span>
<span>Coffee lover</span>
</span>
</span><br />
</h1>
2
Answers
If you close the h1 tag after your name and change the outer container of the rotating text to a div the jitters go away:
for the spacing, you can use flexbox on the parent div:
I suggest for animation using a combination of
transform
andclip-path
.Below is an example if you have three lines + with your permission, added the cursor 🙂: