Adding Typing Animation

Original illustrated guide. Check the framework and controls shown against your project; current task guides are listed in How-to guides.

We are going to add it as a suffix to a heading on our page. First, select the heading:

You can add an animated typing effect to your pages, using the Typed Component in Wappler. It can be added as a prefix or suffix in your headings, links or paragraphs.

We are going to add it as a suffix to a heading on our page. First, select the heading:

Scroll down the properties panel and you will see the Typed component. Click the add button:

Its properties appear as soon as you add it:

Select a position - prefix or suffix:

Then add the strings to be typed in the heading:

You can add as many strings as you need.

When you add your strings, setup the speed and delay options:

Step 7

• Speed is the typing speed in milliseconds
• Delay is the time before typing starts in milliseconds
• Back Speed is the backspacing speed in milliseconds
• Back Delay is the time before backspacing in milliseconds

After we setup the speed and delay options for typing and backspace, let’s setup the rest of the options. Enable or disable the ones you need:

Step 8

• Smart Backspace - will only only backspace what doesn’t match the previous string. So if string 1 says: i love pizza and string 2 says i love ice cream it will only delete ice cream
• Shuffle - shuffles the strings randomly
• Fade - use a fade out animation instead of backspace
• Loop - loop the strings
• Hide Cursor - hides the cursor

That’s how easy it is to use the Typed Component in Wappler: