MARKETPLACE
PLUGINS
TYPEWRITER EFFECT
Typewriter Effect logo

Typewriter Effect

Published October 2021
   •    Updated this week

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 logo
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

Categories

This plugin can be found under the following categories:
Containers   •   Internationalization   •   Media   •   Blog   •   News   •   Visual Elements

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)
October 31st, 2022
  •  
Lateral Studio
Bubble logo
Product
AI
Mobile
Design
Data
Logic
Collaboration
Security
Status
Release notes
Bubble for
Founders
Developers
Agencies
Enterprise
Discover
How Bubble works
Examples
Pricing
Learn
Academy
Technical guides
Blog
How to build
Coaching
Resources
Connect to AI
Marketplace
Templates
Plugins
Experts
Bootcamps
Certification
Partnerships
Affiliates
Figma to Bubble
Community
Bubble community
Forum
Newsletter
Immerse
Early access
Store
Company
About
Careers
Brand guidelines
Support
Contact us
Legal
Terms
Privacy
©  2026, Bubble Group, Inc. All rights reserved.
Bubble
Pricing
Enterprise
Contact sales