RickBarretto/1-Typewriter animation - Explanation.md

## 1-Typewriter animation - Explanation.md

      
    Raw
  

              1-Typewriter animation - Explanation.md
            
          
    Typewriter - by: @RickBarretto - Github

See the original repository

Its under the MIT License

What's it?


It's a nojs code to make the typewriter animation;
It's for people that don't want to use JavaScript code because the internet have users that disable the javascript in browser.

How it works?


The secret is in css; We grow the width of h2 for reveal words.
It's required the overflow hidden and the font be a monotype.

How to discover the rigth width:


Change the --linex-width: xpx; for --linex-width: fit-content;
So, use ctrl + shift + i, open the dev's browser menu;
Inspect the h2 element and see the width.


The x are variables, --linex-width can be --line1-width, --line2-width / xpx can be 300px

Type Rules


--font-size: size;
--font-color: color;
--line-aproximate: size;
--cursor-color: color;
--cursor-size: size;
--time-to-start: time;
--linex-width: size;
--linex-range: int;
--linex-time: time;

Behind the code


The first line starts before the --time-to-start
so the blink animation runs with the width animation

the width animation was made in steps, this steps are the --linex-range.


before this, is executed the next line
the first line must to have a not transparent border-rigth, unlike the others, that must be a solid color;
the last line don't have a cursor-disabled animation, it must be infinite.


## 2-example.html
<body>
  <div class = "container">
    <h2>Line 1,</h2>
    <h2>Line 2,</h2>
    <h2>Line 3, hehe!</h2>
  </div>
</body>

## 3-root.css
@import url('https://fonts.googleapis.com/css2?family=Source+Code+Pro&display=swap');

:root {

    --font-size: 3rem;
    --font-color: black;
    --line-aproximate: 2rem;
    --cursor-color: rgb(255, 196, 0);
    --cursor-size: 10px;


    --time-to-start: 3s;

    --line1-width: 205px;
    --line1-range: 7;
    --line1-time: 1.2s;

    --line2-width: 205px;
    --line2-range: 7;
    --line2-time: .7s;

    --line3-width: 378px;
    --line3-range: 13;
    --line3-time: 1.2s;

    /* Don't change it:*/
    --cursor1-delay: calc(var(--line1-time) + var(--time-to-start) + .2s);

    --line2-delay: calc(var(--cursor1-delay) + .2s);
    --cursor2-delay: calc(var(--line2-delay) + var(--line2-time) + .2s);

    --line3-delay: calc(var(--line2-delay) + var(--line2-time) + .2s);
}

## 4-style.css
h2 {
    font-size: var(--font-size);
    color: var(--font-color);
    font-family: 'Source Code Pro', monospace;
}

.container h2 {
    align-self: flex-start;
    max-width: 30rem;
    margin-bottom: calc(-1*var(--line-aproximate));
    white-space: nowrap;
    overflow: hidden;
    border-right: solid var(--cursor-size) transparent;
}

.container h2:nth-child(1) {
    border-right: solid var(--cursor-size) var(--cursor-color);
}

## 5-animate.css
.container h2:nth-child(1) {
    animation: animated-text1 var(--line1-time) steps(var(--line1-range),end) var(--time-to-start) 1 normal both,
    animated-cursor1 .6s steps(12,end) infinite,
    cursor-disabled .1s linear var(--cursor1-delay) forwards;
}

.container h2:nth-child(2) {
    animation: animated-text2 var(--line2-time) steps(var(--line2-range),end) var(--line2-delay) 1 normal both,
    animated-cursor .6s steps(12,end) var(--line2-delay) infinite,
    cursor-disabled .1s linear var(--cursor2-delay) forwards;
}

.container h2:nth-child(3) {
    animation: animated-text3 var(--line3-time) steps(var(--line3-range),end) var(--line3-delay) 1 normal both,
    animated-cursor .6s steps(12,end) var(--line3-delay) infinite;
}

## 6-keyframes.css
@keyframes animated-text1
{
    from{
        width: 0;
    }
    to{
        width: var(--line1-width);
    }
}
@keyframes animated-text2
{
    from{
        width: 0;
    }
    to{
        width: var(--line2-width);
    }
}
@keyframes animated-text3
{
    from{
        width: 0;
    }
    to{
        width: var(--line3-width);
    }
}
@keyframes animated-cursor
{
    from{
        border-right-color: transparent;
    }
    to{
        border-right-color: var(--cursor-color);
    }
}
@keyframes animated-cursor1
{
    from{
        border-right-color: var(--cursor-color)
    }
    to{
        border-right-color: transparent;
    }
}
@keyframes cursor-disabled
{
    to{
        border-right-color: transparent;
    }
}
	<body>
	<div class = "container">
	<h2>Line 1,</h2>
	<h2>Line 2,</h2>
	<h2>Line 3, hehe!</h2>
	</div>
	</body>
	@import url('https://fonts.googleapis.com/css2?family=Source+Code+Pro&display=swap');

	:root {

	--font-size: 3rem;
	--font-color: black;
	--line-aproximate: 2rem;
	--cursor-color: rgb(255, 196, 0);
	--cursor-size: 10px;


	--time-to-start: 3s;

	--line1-width: 205px;
	--line1-range: 7;
	--line1-time: 1.2s;

	--line2-width: 205px;
	--line2-range: 7;
	--line2-time: .7s;

	--line3-width: 378px;
	--line3-range: 13;
	--line3-time: 1.2s;

	/* Don't change it:*/
	--cursor1-delay: calc(var(--line1-time) + var(--time-to-start) + .2s);

	--line2-delay: calc(var(--cursor1-delay) + .2s);
	--cursor2-delay: calc(var(--line2-delay) + var(--line2-time) + .2s);

	--line3-delay: calc(var(--line2-delay) + var(--line2-time) + .2s);
	}
	h2 {
	font-size: var(--font-size);
	color: var(--font-color);
	font-family: 'Source Code Pro', monospace;
	}

	.container h2 {
	align-self: flex-start;
	max-width: 30rem;
	margin-bottom: calc(-1*var(--line-aproximate));
	white-space: nowrap;
	overflow: hidden;
	border-right: solid var(--cursor-size) transparent;
	}

	.container h2:nth-child(1) {
	border-right: solid var(--cursor-size) var(--cursor-color);
	}
	.container h2:nth-child(1) {
	animation: animated-text1 var(--line1-time) steps(var(--line1-range),end) var(--time-to-start) 1 normal both,
	animated-cursor1 .6s steps(12,end) infinite,
	cursor-disabled .1s linear var(--cursor1-delay) forwards;
	}

	.container h2:nth-child(2) {
	animation: animated-text2 var(--line2-time) steps(var(--line2-range),end) var(--line2-delay) 1 normal both,
	animated-cursor .6s steps(12,end) var(--line2-delay) infinite,
	cursor-disabled .1s linear var(--cursor2-delay) forwards;
	}

	.container h2:nth-child(3) {
	animation: animated-text3 var(--line3-time) steps(var(--line3-range),end) var(--line3-delay) 1 normal both,
	animated-cursor .6s steps(12,end) var(--line3-delay) infinite;
	}
	@keyframes animated-text1
	{
	from{
	width: 0;
	}
	to{
	width: var(--line1-width);
	}
	}
	@keyframes animated-text2
	{
	from{
	width: 0;
	}
	to{
	width: var(--line2-width);
	}
	}
	@keyframes animated-text3
	{
	from{
	width: 0;
	}
	to{
	width: var(--line3-width);
	}
	}
	@keyframes animated-cursor
	{
	from{
	border-right-color: transparent;
	}
	to{
	border-right-color: var(--cursor-color);
	}
	}
	@keyframes animated-cursor1
	{
	from{
	border-right-color: var(--cursor-color)
	}
	to{
	border-right-color: transparent;
	}
	}
	@keyframes cursor-disabled
	{
	to{
	border-right-color: transparent;
	}
	}