Animated Typewriter

This is to create.

CREATING AN EXAMPLE IS

Adjustments

Change this in the HTML module to change speed
class="typewrite" data-period="4000"

For other adjustments see notes under

Page Builder > Tools > Layout CSS/Javascript > CSS

CSS

/* centre-me class selector is added to
the HTML module under the advanced tab */

.centre-me
{
display: flex;
align-items: center;
justify-content: center;
}

/* This adds the blinking cursor
Remove the animation and keyframes to remove the blinking
or remove everything to remove the cursor*/

.typewrite {
border-right: 2px solid;
animation: caret 1s steps(1) infinite;
}

@keyframes caret {
50% {
border-color: transparent;
}
}

/* I added this to overwite the blinking in row 2*/

.no-cursor .typewrite {
border-right: none;
animation:none;
}

/* Just to add a 2nd colour in the header of row 1*/

.fl-builder-content .animated-text-row1 H1 {

letter-spacing: -.4px!important;
}

.fl-builder-content .animated-text-row1 H1 STRONG
{
color: #A5E6AE !important;
}

.single-line .typewrite
{
color: #A5E6AE !important;
font-family: georgia serif;
font-size: 26px;
}

/* used in row 2 to add the glow (blur)*/
.one-word .typewrite
{
font-weight: bold;
font-style: normal;
text-shadow: 0 0 30px #FFFFFF;
}

/* used in row 3- it makes the cursor (border right) bigger too*/
.end-word .typewrite
{
background-color: #E00A0A;
display: inline-block;
color: #FFFFFF;
font-weight: bold;
border-right: 10px solid #BF0505;
padding: 0 10px;
}

JS

var TxtType = function(el, toRotate, period) {
this.toRotate = toRotate;
this.el = el;
this.loopNum = 0;
this.period = parseInt(period, 10) || 2000;
this.txt = '';
this.tick();
this.isDeleting = false;
};

TxtType.prototype.tick = function() {
var i = this.loopNum % this.toRotate.length;
var fullTxt = this.toRotate[i];

if (this.isDeleting) {
this.txt = fullTxt.substring(0, this.txt.length - 1);
} else {
this.txt = fullTxt.substring(0, this.txt.length + 1);
}

this.el.innerHTML = '<span class="wrap">'+this.txt+'</span>';

var that = this;
var delta = 150 - Math.random() * 100;

if (this.isDeleting) { delta /= 2; }

if (!this.isDeleting && this.txt === fullTxt) {
delta = this.period;
this.isDeleting = true;
} else if (this.isDeleting && this.txt === '') {
this.isDeleting = false;
this.loopNum++;
delta = 500;
}

setTimeout(function() {
that.tick();
}, delta);
};

window.onload = function() {
var elements = document.getElementsByClassName('typewrite');
for (var i=0; i<elements.length; i++) {
var toRotate = elements[i].getAttribute('data-type');
var period = elements[i].getAttribute('data-period');
if (toRotate) {
new TxtType(elements[i], JSON.parse(toRotate), period);
}
}

};

...and a few affiliate links (well you never know)

Best Beaver Builder Add-ons
Ultimate Addons for Beaver Builder
Get Beaver Builder Now!