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

 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

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
<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

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
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());
  }
}


Output


Checkout complete video tutorial below

 If you have any question please leave a comment below.

If you would like to add something to this post please leave a comment below.
Share this blog with your friends if you find it helpful somehow !

Thanks
Happy Coding :)

Post a Comment

0 Comments