Typing Effect in Lightning Web Component | Salesforce | LWC Stack ☁️⚡️

Kapil August 27, 2022

In this blog I will show you how you can add a typing effect in your Lightning Web Component text.

I have added this effect in one of my quick action component.

Please check below example and output :

HTML

<template>
  <lightning-quick-action-panel header="Typing Effect">
    <!-- <audio id="foobar" src={src} autoplay></audio> -->
    <b>{bodyMessage}</b>
    <div slot="footer">
      <lightning-button
        variant="neutral"
        label="Cancel"
        onclick={closeAction}
      ></lightning-button>
      <lightning-button variant="brand" label="Save"></lightning-button>
    </div>
  </lightning-quick-action-panel>
</template>

JS

import { LightningElement } from "lwc";
import { CloseActionScreenEvent } from "lightning/actions";
// import TYPING_SOUND from "@salesforce/resourceUrl/sound1";

export default class QuickActionLWC extends LightningElement {
  bodyMessage = "";
  i = 0;

  connectedCallback() {
    this.typewriterEffect();
  }
  typewriterEffect() {
    let message = "Hello this is a demo by Salesforce Bolt!";
    let speed = 100;
    if (this.i < message.length) {
      this.bodyMessage += message.charAt(this.i);
      this.i++;
      setTimeout(() => {
        this.typewriterEffect();
      }, speed);
    }
  }
  closeAction() {
    this.dispatchEvent(new CloseActionScreenEvent());
  }
}