photographers.
I create websites for
TYPEWRITER TEXT
Turn any word or phrase into animated typewriter text that types, pauses, deletes, and cycles through your custom wording.
Style your first word or phrase directly in Showit, then add the additional wording you want to cycle through in the code. Your Showit styling automatically carries through to each phrase.
WHAT YOU'LL NEED
A Showit text box
The Class Selector:
typewriter-text
The Typewriter Text code added to Page Loaded Javascript
HOW TO INSTALL
01 — ADD YOUR TEXT
Add a text box to your Showit canvas.
Type the first word or phrase you want to appear.
Example:
photographers.
Style the text directly in Showit just as you normally would.
Your font, size, color, alignment, bold, italic, underline, and other text styling will carry into the typewriter effect.
02 — ADD THE CLASS SELECTOR
Select your text box and go to:
Advanced → Class Selectors
Add:
typewriter-text
Do not include the period before the class name.
03 — ADD YOUR WORDS
At the top of the code, find:
phrases: [
"coaches.",
"designers.",
"rule breakers."
],
Replace these with the additional words or phrases you want to appear.
The wording you entered directly in your Showit text box is automatically the first phrase.
You do not need to enter it again in the code.
You can add or remove phrases as needed.
Example:
phrases: [
"artists.",
"dreamers.",
"rule breakers."
],
04 — ADD THE CODE
Copy the entire Typewriter Text code.
In Showit, go to:
Advanced → Page Loaded Javascript
Paste in the entire code.
If you already have other code in Page Loaded Javascript, add the Typewriter Text code without removing your existing code.
05 — ADJUST THE SPEED
At the top of the code, find:
typingSpeed: 85,
deletingSpeed: 45,
Lower numbers make the animation faster.
Higher numbers make the animation slower.
typingSpeed controls how quickly each phrase is typed.
deletingSpeed controls how quickly each phrase is erased.
06 — ADJUST THE PAUSES
Find:
pauseTime: 1600,
pauseBetweenPhrases: 200,
pauseTime controls how long a completed phrase stays visible before it begins deleting.
pauseBetweenPhrases controls the short pause after one phrase disappears and before the next phrase begins typing.
These numbers are measured in milliseconds.
07 — CUSTOMIZE THE CURSOR
Find:
cursor: "|",
Replace the character between the quotation marks if you want to use a different cursor.
You can also adjust:
cursorBlinkSpeed: 600,
Lower numbers make the cursor blink faster.
Higher numbers make it blink slower.
08 — CHOOSE WHETHER IT LOOPS
Find:
loop: true
Use:
true
to continuously cycle through your phrases.
Use:
false
to play through the phrases once and stop on the final phrase.
09 — PREVIEW + TEST
Open Preview and watch the full typewriter sequence.
Check both desktop and mobile.
Adjust your Showit text box width if a longer phrase wraps differently than you want.
You can also adjust the typing speed, deleting speed, and pause settings until the animation feels right for your design.
DESIGN TIP
Use your Showit text box to control the typography and layout.
Make the text box wide enough to accommodate your longest word or phrase if you want everything to remain on one line.
The code handles the animation. Showit handles the design.
QUICK INFO
DIFFICULTY — Easy
REQUIRES — Page Loaded Javascript
CLASS SELECTOR — typewriter-text
FIRST PHRASE ENTERED IN SHOWIT — Yes
TEXT STYLING IN SHOWIT — Yes
CUSTOM SPEED — Yes
CUSTOM CURSOR — Yes
LOOP OPTION — Yes
ANIMATED — Yes
MOBILE FRIENDLY — Yes
CODING KNOWLEDGE — Not required