Typewriter effect on text component

Ask us anything How do I?
1

I’d like to have some text displayed with a typewriter effect on my homepage. What’s the easiest way to get that done? Looks like there are a few NPM packages and then some js code options.

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();
3

Thank you for explaining how to implement this! Works great.

4

@Alexis when I load the page on mobile, the script works until I scroll, then it stops working. It does not start again until I refresh the page. On desktop, scrolling does not stop it and is still working when I scroll back to the text field. Any idea why this happens?

5

Probably because something is resized, you can turn off the option “refresh on resize” on the HTML element

6

@Alexis That looks great! What library did you install? How can I make the cursor on an input field flash as an animation before the user clicks on it? I want it to behave like the cursor at the beginning or end of the animation you displayed above.

7

@Alexis - It seems this approach isn’t supported since the latest update. Do you have a recommendation for what needs changed now?