Typewriter effect on text component

Ask us anything How do I?
2

I tried with the lib you mentioned, looks fine :slight_smile:

I put an HTML element to load the lib and add a div that will get the typing animation

<script src="https://unpkg.com/typewriter-effect@latest/dist/core.js"></script>
<div id="typewriterText">Hey</div>

Then I added the code from the documentation on mounted (but can be triggered by a button or another event), a little bit tweaked for WeWeb

const Typewriter = wwLib.getFrontWindow().Typewriter

const element = document.getElementById('typewriterText');
const typewriter = new Typewriter(element, {
  loop: true,
  delay: 75,
});

typewriter
  .pauseFor(2500)
  .typeString('A simple yet powerful native javascript')
  .pauseFor(300)
  .deleteChars(10)
  .typeString('<strong>JS</strong> plugin for a cool typewriter effect and ')
  .typeString('<strong>only <span style="color: #27ae60;">5kb</span> Gzipped!</strong>')
  .pauseFor(1000)
  .start();