Adding Typing Animation

You can add an animated typing effect to your pages (just as on the Wappler Homepage), 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:

  • 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:

  • 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:

6 Likes

Great Tutorial and nice feature @Teodor
By the way, is dynamic text supported? :smiley:

Dynamic text is not supported yet but I wouldn’t be surprised if that is coming up one day. As for the feature itself so far it works wonderfully!

2 Likes

Dynamic text will work, but it is currently not possible from within the UI.

Like all App Connect component you can prefix the attribute name with dmx-bind: to make it dynamic. So you get something like:

<span is="dmx-typed" speed="200" back-speed="100" dmx-bind:strings="Welcome {{name}}, How do you feel?, Have a nice day." loop></span>

The strings attribute is a comma separated list, so the above example will result in 2 sentences. You could also have an array of strings as input like:

dmx-bind:strings="['Welcome ' + name, 'How do you feel?', 'Have a nice day.']"
5 Likes

Great tips! @patrick. Thanks a lot!!!