In this effect, we will make a paragraph disappear word by word while making the next one appear in the same way. Our logic will be dynamic: if we add one or more paragraphs, the effect will continue to work. Thank you, JavaScript!
HTML Structure
The structure here is relatively simple: the container
div contains the different paragraphs we are going to animate.
<div class="pin-height">
<div class="container">
<p class="paragraph">“We met Vincent at Venice Beach’s Skate Park.</p>
<p class="paragraph">He’s got that rare blend of precision.</p>
<p class="paragraph">He’s been at it since he was a kid.”</p>
</div>
</div>