Clickfunnels Typewriter Animation Masterclass Day 4

Better Designs, Higher Conversions, & More Sales…Guaranteed. Click the link below.
k

Add a typewriter style animation to your Clickfunnels funnel using this simple CSS and HTML code.

Add this to the CSS editor…
/DEMO-SPECIFIC STYLES */
.typewriter h1
color: #fff;
font-family: monospace;
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(30, end),
blink-caret .5s 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

Add this to the HTML element…
youtube won’t let me use angled brackets (the symbol that looks like a V pointing right. So you’ll need to replace the “$” with angled brackets
$div class=”typewriter”$
$h1$I am an awesome typewriter animation.$/h1$
$/div$

You May Also Like