Show Animated sentence line by line using JS and CSS

Show Animated sentence line by line using JS and CSS. This text effect is developed using CSS, JavaScript and HTML. Demo and Download available.

Demo Download

Author ycw

Created SEPTEMBER 19, 2018

License Open

Compatible browsers Chrome, Firefox, Safari

HTML Snippet

`<base target="_blank"/> <h1>CSS JS 2018+ </h1> <h2>isolation</h2> <article>   <p class="tokenize">This paragraph is clipped by CSS <code>clip-path:polygon(..) </code>which is being updated with <a href="//css-tricks.com/updating-a-css-variable-with-javascript/">CSS Variables</a> controlled by JS.     You'll find that in the JS source, neither DOM nodes creation,      nor string manipulation; It only updates CSS Variables      of existing elements.<br/><br/>The styling *logic* is scoped in one place, the stylesheet.      Coders will not and should not know how it is implemented.(E.g. Tokenize fx is done by clip-path)      What they need to do is to populate CSS Variables. <a href="//developers.google.com/web/updates/2018/03/cssom">CSSTOM</a> will help a lot. <br/><br/>There are few limitations of CSS Variables<br/>1) Not every rule can be parametrized (keyframes state)<br/>2) No real guard (el.style.setProperty)<br/>3) Typeless (or by js CSS.registerProperty but WHY JS)   </p> </article>`

CSS Code

`@import url('https://fonts.googleapis.com/css?family=Wire+One'); @import url('https://fonts.googleapis.com/css?family=Inconsolata'); body {   display:grid;   place-content:center;   perspective:500px;   min-height:100vh; }  p.tokenize {         font:1em Inconsolata;   line-height:var(--lh);   width:calc(var(--COL) * 1ch);   max-height:calc(var(--lh) * var(--ROW));   hyphens:auto;    overflow:hidden;    clip-path:polygon(0 0, 100% 0,      100% calc((var(--line) - 1) * var(--lh)),     calc(var(--ch)*1ch) calc((var(--line) - 1) * var(--lh)),     calc(var(--ch)*1ch) calc(var(--line) * var(--lh)),     0 calc(var(--line) * var(--lh))   ); }    article {   margin-top:0.5em;   color:hsl(0,0%,50%); }  b {   border:1px solid black;   box-decoration-break:clone; }  h1 {   font:2em "wire one"; }  h2 {   font:1.4em "wire one"; }`

JavaScript Snippet

`for (const elm of document.querySelectorAll("p.tokenize")) {   // parse "css input"   // type casting is not needed if using CSS TYPED OM   const sty = getComputedStyle(elm);   const ROW = +sty.getPropertyValue("--ROW");   const COL = +sty.getPropertyValue("--COL");   let row = 1;   let col = 1;      (function f() {     elm.style.setProperty("--ch", col);     elm.style.setProperty("--line", row);     if (++col > COL) {       col = 1;       if(++row > ROW)         return     }     setTimeout(f, 16);   }()); }`

Preview