TYPEWRITER EFFECT

Typewriter Effect

Published October 2021

    •    Updated March 2026

Plugin details

A simple plugin to produce a cool typewriter effect that rotates between a given list of sentences.

You can set a different style (color, bold, italic, ...) for any sentence, word or even letter thank to the support of Rich Editing!

You can also easily add a fixed prefix text before the animated sentences, change the typing and delete speed and the paused time when a sentence has been fully typed.

Every text can be defined dynamically.

Look at our demo below for a cool example :)

DEMO:
https://plugin-playground.bubbleapps.io/version-test/typewriter_effect

EDITOR:
https://bubble.io/page?type=page&name=typewriter_effect&id=plugin-playground

$6

One time • Or $3/mo

4.6 stars   •   5 ratings

245 installs  

This plugin does not collect or track your personal data.

Platform

Web

Contributor details

Lateral Studio

Joined 2021   •   8 Plugins

View contributor profile

Instructions

Set a list of sentences (each one in a new line) as the "Texts" field

Customize each sentence style using the Rich Text editor (set a different style, color for each word or group of words) or by adding a conditional (change font style for different "Current Text" states)

Configure the animation by changing the:
- speed of typing ("Delay" option)
- speed of deleting ("Delete speed" option)
- pause after a sentence is completed ("Pause at end" option)

Set the "Prefix" option to add fixed "rich text" before the animated sentences

Types

This plugin can be found under the following types:

Background Services   •   Element   •   Action

Resources

Support contact

Tutorial

Rating and reviews

Average rating (4.6)

Works great, would be good to be able to turn off indicator.

April 23rd, 2024

Could you please provide a way to turn off the flashing indicator? I find it distracting and would like it to just be the typing text. Thanks

Hello, thank you for this review
I've just release a new version (v 1.5.0) with the new option "Cursor" that allows you to change the cursor character or completely remove it (plugin author)

January 7th, 2024

•

Lateral Studio

Great work, revised to 5 stars.

April 23rd, 2024

•

Original reviewer

Works great

December 13th, 2023

Exactly what I needed for the hero section of my app.

Can deletion be prevented?

July 6th, 2023

I love the simplicity, but I'd like to mimic an AI's streaming text so do not want/need any text to be deleted. Is there a way to disable the deletion, and just have the text being typed?

Hello,
Yes, you can set the "Loop" option to false and it will not delete the final string.
You can also use the "Reset" action in a workflow to restart it with a new text if you need to write someting new (set "Delete speed" to 1 if you want to delete the previous value quickly).

There's a caveat though:
this plugin is optimized for animating a hero message and considers any string after a "new line" as a different message. For this reason, to achieve your result, you should never go to a new line. (plugin author)

January 7th, 2024

•

Lateral Studio

Requested updates, amazing response

November 3rd, 2022

All of my requests were completed by Francesco when I reviewed originally. These were very necessary and made this plugin worth it. Would recommend to anyone that wants this type of element.

Works, but missing core features

October 26th, 2022

Hi, would love to see:
Dynamic sizing
HTML editing for different colors on a per loop basis
Better responsive setup
Improve conditionals

Thanks for the review!
I've released the version 1.2.0 to address some of your issues:

1. texts can now be defined dynamically
2. you can now define texts using the rich text editor, this means that yous can set a different style for each text or word (bold, italic, color, etc...)
3. I've added the state "Current Text" which is the number of the current displayed text (first, second, etc). This is helpful in case you need to set a different conditional for each text

Hope this helps,
Francesco (plugin author)