Typewriter-like animation on text possible?

sarracobenoit · December 21, 2018, 10:03am

Hello,
Thanks a lot!
Just one question, what properties do I need to add to have an erase effect?
Thanks for your help

danieltanasec · December 21, 2018, 10:08am

I wrote a code which has all the effects you need. Just modify the last section of the code. You copy it and paste it in a html box. No other js code required. It’s included in the script

/* Global */
html{
min-height: 100%;
overflow: hidden;
}
body{
height: calc(100vh - 8em);
color: #54A4DB;
font-family: ‘helvetica’;
font-size:55px;
background-color: white;
}
.line-1{
position: relative;
top: 50%;
width: 24em;
margin: 0 auto;
border-right: 1px solid rgba(255,255,255,.75);
font-size: 180%;
text-align: center;
white-space: nowrap;
overflow: hidden;
transform: translateY(-50%);
}

/* Animation */
.anim-typewriter{
animation: typewriter 2s steps(44) 1s 1 normal both,
blinkTextCursor 500ms steps(44) 0 infinite normal;
-webkit-animation: typewriter 2s steps(44) 1s 1 normal both,
blinkTextCursor 500ms steps(44) 0 infinite normal;
-moz-animation: typewriter 2s steps(44) 1s 1 normal both,
blinkTextCursor 500ms steps(44) 0 infinite normal;
-o-animation: typewriter 2s steps(44) 1s 1 normal both,
blinkTextCursor 500ms steps(44) 0 infinite normal;
}
@keyframes typewriter{
from{
width: 0;
}
to{
width: 24em;
}
}
@-webkit-keyframes typewriter{
from{
width: 0;
}
to{
width: 24em;
}
}
@-moz-keyframes typewriter{
from{
width: 0;
}
to{
width: 24em;
}
}
@-o-keyframes typewriter{
from{
width: 0;
}
to{
width: 24em;
}
}

@keyframes blinkTextCursor{
from{
border-right-color: rgba(255,255,255,.75);
}
to{
border-right-color: transparent;
}
}
@-webkit-keyframes blinkTextCursor{
from{
border-right-color: rgba(0,0,0,.75);
}
to{
border-right-color: transparent;
}
}
@-moz-keyframes blinkTextCursor{
from{
border-right-color: rgba(255,255,255,.75);
}
to{
border-right-color: transparent;
}
}
@-o-keyframes blinkTextCursor{
from{
border-right-color: rgba(255,255,255,.75);
}
to{
border-right-color: transparent;
}
}

<script> 
var app = document.getElementById('app');

var typewriter = new Typewriter(app, {
loop: true
});

typewriter.typeString(‘text1’)
.pauseFor(2500)
.deleteAll()
.typeString(‘text2’)
.pauseFor(2500)
.deleteAll()
.typeString(‘text3’)
.pauseFor(2500)
.start();

sarracobenoit · December 21, 2018, 2:46pm

@danieltanasec Hi Daniel.
Thanks a lot. Works very well

mollyorain · January 20, 2019, 2:50am

did u ever figure this out?

serena-anslow · January 30, 2019, 2:45pm

@danieltanasec Hi Daniel, sorry if this is a really obvious question (I’ve never used HTML before). I was wondering how I would add more words to the type string, I’ve tried repeating the code but it doesn’t seem to be working for me. Thank you

danieltanasec · January 30, 2019, 4:02pm

@serena-anslow Hey. In the last section just add what you like:

typewriter.typeString(‘text1’)
.pauseFor(2500)
.deleteAll()
.typeString(‘text2’)
.pauseFor(2500)
.deleteAll()
.typeString(‘text3’)
.pauseFor(2500)
.start();

The code is also set for loop in:

var typewriter = new Typewriter(app, {
loop: true
});

serena-anslow · January 30, 2019, 6:48pm

@danieltanasec amazing, thank you!

langley-eagles · February 26, 2019, 8:32am

I tried to input the html code into my site but it shows the html is broken and doesnt show up on live site, but shows on editor. Heres my input: any help??

/* Global */ html{ min-height: 100%; overflow: hidden; } body{ height: calc(100vh - 8em); color: #ffff; font-family: raleway; font-size:30px; background-color: transparent; } .line-1{ position: relative; top: 50%; width: 24em; margin: 0 auto; border-right: 1px solid rgba(255,255,255,.75); font-size: 180%; text-align: center; white-space: nowrap; overflow: hidden; transform: translateY(-50%); } /* Animation */ .anim-typewriter{ animation: typewriter 2s steps(44) 1s 1 normal both, blinkTextCursor 500ms steps(44) 0 infinite normal; -webkit-animation: typewriter 2s steps(44) 1s 1 normal both, blinkTextCursor 500ms steps(44) 0 infinite normal; -moz-animation: typewriter 2s steps(44) 1s 1 normal both, blinkTextCursor 500ms steps(44) 0 infinite normal; -o-animation: typewriter 2s steps(44) 1s 1 normal both, blinkTextCursor 500ms steps(44) 0 infinite normal; } @keyframes typewriter{ from{ width: 0; } to{ width: 24em; } } @-webkit-keyframes typewriter{ from{ width: 0; } to{ width: 24em; } } @-moz-keyframes typewriter{ from{ width: 0; } to{ width: 24em; } } @-o-keyframes typewriter{ from{ width: 0; } to{ width: 24em; } } @keyframes blinkTextCursor{ from{ border-right-color: rgba(255,255,255,.75); } to{ border-right-color: transparent; } } @-webkit-keyframes blinkTextCursor{ from{ border-right-color: rgba(0,0,0,.75); } to{ border-right-color: transparent; } } @-moz-keyframes blinkTextCursor{ from{ border-right-color: rgba(255,255,255,.75); } to{ border-right-color: transparent; } } @-o-keyframes blinkTextCursor{ from{ border-right-color: rgba(255,255,255,.75); } to{ border-right-color: transparent; } }

</section>

<script> 

var app = document.getElementById('app');

var typewriter = new Typewriter(app, {

loop: false

});

typewriter.typeString(‘Design.’)

.pauseFor(1500) 

.deleteAll() 

.typeString('Create.') 

.pauseFor(1500) 

.deleteAll() 

.typeString('Innovate.')

.pauseFor(1500)

.deleteAll()

.typeString(‘The Quorum Group.’)

.pauseFor(1500)

.start();

danieltanasec · February 26, 2019, 8:47am

Your font color is white :). In body{}. If I change to black the text shows up fine in chrome

marquis69 · March 21, 2019, 4:52pm

Hi Daniel how do I change the font speed typed? I have tried to change the typewriter 2s speed however this doesn’t change anything.

danieltanasec · March 21, 2019, 5:14pm

I found out a much much but much simple version

Some text which

just play with the settings in js code. Also more setting here GitHub - mattboldt/typed.js: A JavaScript Typing Animation Library

marquis69 · March 21, 2019, 6:22pm

@danieltanasec

I’m using this code for the text, where would an amendment to speed go?

apologies in advance for the novice response!

/* Global */ html{ min-height: 100%; overflow: hidden; } body{ height: calc(100vh - 8em); color: #FFFFFF; font-family: 'calibri'; font-size:85px; background-color: transparant; } .line-1{ position: relative; top: 50%; width: 24em; margin: 0 auto; border-right: 1px solid rgba(255,255,255,.75); font-size: 180%; text-align: center; white-space: nowrap; overflow: hidden; transform: translateY(-50%); } /* Animation */ .anim-typewriter{ animation: typewriter 0.1s steps(25) 0.05s 1 normal both, blinkTextCursor 500ms steps(5) 0 infinite normal; -webkit-animation: typewriter 0.05s steps(5) 0.05s 1 normal both, blinkTextCursor 500ms steps(25) 0 infinite normal; -moz-animation: typewriter 0.05s steps(25) 0.05s 1 normal both, blinkTextCursor 500ms steps(25) 0 infinite normal; -o-animation: typewriter 0.05s steps(25) 0.05s 1 normal both, blinkTextCursor 500ms steps(25) 0 infinite normal; } @keyframes typewriter{ from{ width: 0; } to{ width: 24em; } } @-webkit-keyframes typewriter{ from{ width: 0; } to{ width: 24em; } } @-moz-keyframes typewriter{ from{ width: 0; } to{ width: 24em; } } @-o-keyframes typewriter{ from{ width: 0; } to{ width: 24em; } } @keyframes blinkTextCursor{ from{ border-right-color: rgba(255,255,255,.75); } to{ border-right-color: transparent; } } @-webkit-keyframes blinkTextCursor{ from{ border-right-color: rgba(0,0,0,.75); } to{ border-right-color: transparent; } } @-moz-keyframes blinkTextCursor{ from{ border-right-color: rgba(255,255,255,.75); } to{ border-right-color: transparent; } } @-o-keyframes blinkTextCursor{ from{ border-right-color: rgba(255,255,255,.75); } to{ border-right-color: transparent; } }

urbino1233 · March 21, 2019, 8:21pm

@ Andreas Kviby i am writing to ask you how can i simply do the typewriter effect in the landing page?

danieltanasec · March 21, 2019, 8:24pm

Hey. Just copy the code I provided in a html frame

urbino1233 · March 21, 2019, 8:26pm

@danieltanasec i need this code for the js event in wix, I don’t how can I do it in html

danieltanasec · March 21, 2019, 8:30pm

@urbino1233 you have html frame in wix components

urbino1233 · March 21, 2019, 8:55pm

@danieltanasec thanks a lot

marquis69 · March 22, 2019, 3:23pm

any ideas daniel?

danieltanasec · March 22, 2019, 3:29pm

@marquis69 Use the script I provided and change typeSpeed/backSpeed

yisrael-wix · March 24, 2019, 7:44am

See the Typewriter example .

Topic		Replies	Views
Typewriter text animation Ask the community code , question	1	716	June 26, 2018
Typewriter animation on Wix Ask the community code , question	3	342	October 8, 2021
Typewriter Text Animation Effect Ask the community code , wix-editor	5	439	January 31, 2024
How to create typewrite effect? Ask the community code , wix , design , question , wix-editor	3	675	August 7, 2025
How to Create This Typewriter Effect? Ask the community wix-studio , code , design	6	147	August 3, 2025

Typewriter-like animation on text possible?

Some text which

Related topics