Create Eye-Catching Typing Text Animations in LWC

When it comes to creating engaging user interfaces, one of the most effective techniques is to create animations and effects that simulate real-world behavior. One such effect is the typing effect, where text appears to be typed out on a screen one character at a time. In this blog post, we will learn how to create a LWC component that displays text-like typing.

Setting Up the LWC Component

Before we start coding, let’s create a new project in your favorite code editor. You can use the Salesforce CLI to create a new project with the following command:

sfdx force:project:create -n Animation

Next, let’s create a new Lightning Web Component in the project. You can use the following command:

sfdx force:lightning:component:create -n typingText -d force-app/main/default/lwc

This will create the necessary HTML and JavaScript files for your LWC component.

Writing the JavaScript Code

Now that we have our LWC component set up, we can begin writing the JavaScript code that will simulate the typing effect. Here’s the code we’ll be using:

import { LightningElement } from 'lwc';
export default class Typing extends LightningElement {
renderedCallback() {
displayTypingOutput() {
const welcomeMsg = 'Welcome to, your go-to resource for everything Salesforce-related. Whether you are a seasoned Salesforce professional or just starting out, we have something for everyone here. Our mission is to provide you with comprehensive, up-to-date information about the Salesforce platform and its various features and functionalities. '+
'Our team of experts has designed this website to help you learn and grow in your Salesforce career. With a wide range of articles, tutorials, and guides, we aim to make your learning experience engaging and easy. Our content covers everything from the basics of Salesforce to advanced topics like custom development, integrations, and more. '+
'We also understand the importance of community, which is why we have built a platform that allows you to connect with like-minded individuals and experts in the Salesforce community. We encourage you to participate in discussions, ask questions, and share your experiences with others. '+
'Thank you for choosing as your learning partner. We are excited to help you achieve your goals and succeed in your Salesforce journey';
const typingOutput = welcomeMsg;
const typingSpeed = 35; // The speed of typing, in milliseconds
let i = 0;
const timer = setInterval(() => {
if (i >= typingOutput.length) {
const currentText = this.template.querySelector('.typing-output').textContent;
this.template.querySelector('.typing-output').textContent = currentText + typingOutput[i];
}, typingSpeed);
view raw typingText.js hosted with ❤ by GitHub

Let’s take a closer look at what this code is doing:

  • In the renderedCallback method, we call the displayTypingOutput method, which will handle the actual typing animation.
  • Inside displayTypingOutput, we define two variables: typingOutput and typingSpeed. typingOutput is the text we want to display, and typingSpeed is the speed at which we want to display it, in milliseconds.
  • We then set up a setInterval timer that will run every typingSpeed milliseconds. This timer will handle the actual typing animation.
  • Inside the timer callback function, we check whether we’ve reached the end of the typingOutput string. If we have, we clear the interval and return. If not, we get the current text content of the .typing-output element using querySelector, and then set the text content to be the current text plus the next character in the typingOutput string.

Adding the Text to Be Displayed

Now that we have our JavaScript code set up, we need to define the text we want to display in the LWC component. To do this, we’ll add the following code to our HTML file:

<lightning-card title="TypingText" icon-name="utility:type">
<div class="typing-output"></div>
view raw typingText.html hosted with ❤ by GitHub

This creates a div element with a class of typing-output. We’ll use this element to display the text that will be typed out.

To adjust the speed of the typing effect, you can simply modify the value of typingSpeed in the JavaScript code.


padding: 1%;
font-size: medium;
font-family: Comic Sans MS, Comic Sans, cursive;
color: midnightblue;
view raw typingText.css hosted with ❤ by GitHub

The “typing effect” LWC component can be used in Salesforce to create engaging and dynamic user interfaces. Here are a few potential use cases for this component:

  1. Splash screens: Splash screens are often used in Salesforce applications to provide a visually appealing welcome screen when the application is launched. By using the typing effect component, you can create a more engaging and memorable splash screen that gradually displays the application’s name or tagline.
  2. Onboarding: When new users are introduced to a Salesforce application, it can be helpful to provide a guided onboarding process to familiarize them with the platform’s features and capabilities. By using the typing effect component, you can create an interactive onboarding experience that guides users through the platform’s key features one step at a time.
  3. Product demos: Product demos are an important part of the sales process, and a well-crafted demo can help potential customers better understand your product’s value proposition. By using the typing effect component, you can create a more engaging and dynamic demo experience that highlights the most important features of your product.
  4. Landing pages: Landing pages are often used in Salesforce marketing campaigns to provide more information about a product or service. By using the typing effect component, you can create a landing page that gradually displays key messaging or value propositions to potential customers, keeping them engaged and interested.

Overall, the typing effect LWC component can be used in a variety of ways to create more dynamic and engaging user interfaces in Salesforce applications. By using this component strategically, you can create experiences that are more memorable, interactive, and effective at achieving your business goals.


In this blog post, we learned how to create a LWC component that displays text-like typing. By using JavaScript to simulate typing behavior and setting up a setInterval timer to incrementally display each character in the output text, we can create an engaging and realistic effect in our user interfaces.

Creating effects like this can greatly enhance the user experience and make our applications more engaging and memorable. By leveraging the power of LWC components and the flexibility of JavaScript, we can create a wide range of effects and animations that will keep our users engaged and excited.

I hope this post was helpful in showing you how to create a typing effect in LWC components. If you’re interested in learning more about LWC development, be sure to check out the Salesforce developer documentation for more information and resources.

About the blog

SFDCLessons is a blog where you can find various Salesforce tutorials and tips that we have written to help beginners and experienced developers alike. we also share my experience and knowledge on Salesforce best practices, troubleshooting, and optimization. Don’t forget to follow us on:


Subscribe to our email newsletter to be notified when a new post is published.


Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s