Skip to content

Instantly share code, notes, and snippets.

@RickBarretto

RickBarretto/1-Typewriter animation - Explanation.md

Last active July 3, 2023 06:51
Show Gist options
  • Save RickBarretto/638ffd156943870cae726a58f409579a to your computer and use it in GitHub Desktop.
Save RickBarretto/638ffd156943870cae726a58f409579a to your computer and use it in GitHub Desktop.
Download ZIP
Typewriter animation - NoJs/Without Js -- just html and css -- multipleslines
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:

  1. Change the --linex-width: xpx; for --linex-width: fit-content;
  2. So, use ctrl + shift + i, open the dev's browser menu;
  3. 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.
Raw
2-example.html
<body>
<div class = "container">
<h2>Line 1,</h2>
<h2>Line 2,</h2>
<h2>Line 3, hehe!</h2>
</div>
</body>
Raw
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);
}
Raw
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);
}
Raw
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;
}
Raw
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;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment