New plugin - Typewriter Text

I was reading this post on Tuesday night and thought it would be a good challenge for myself to try and build this Typewriter effect into a plugin.

If you search ‘Typewriter Text’ in Plugins (or +install more) you will find the plugin!

Or head to quick demo app at where you can see the plugin in action.

Worth saying that I am definitely not a developer! 8 weeks ago I had never written a line of JavaScript and have only taken the CodeAcademy basics course (along with 1000’s of StackOverflow searches :slight_smile: )… so this was just an assignment to push me a bit.

I know that others are keen to learn more about the Plugin Editor and I will write a fuller post soon about how this works in case it helps someone else get started.

In the meantime if anyone with real JS skills would like to critique what I have done I would really appreciate that. Just let me know :slight_smile:


Can’t find the plugin.

Type “Typewriter Text’” in the plugin search field

Thanks @exception-rambler! I was looking for this only recently - great job!

Still not appearing :frowning:

Although I can see it here.

Hey @JonL very strange!
Hard to know what’s going on as I can’t recreate that at all my end. For me it comes both through ‘+install more’ in the Elements panel of the design workspace, and through the Plugins tab.

Here is the Plugin page - but looks like you have found something similar already.

Try opening ‘+install more’, select all and then order the Plugins by date. When I do that this Plugin is top of the list. If that doesn’t work then looks like a bug, or maybe there rollout of plugins is handled in batches? @emmanuel

I cleared cookies and it appears now. Thanks!
I think you did a great job. And very nice to use this development as a challenge.
I tried challenging myself with but I gave up :smiley:
So kudos to you! Thanks for providing this.

Thanks! Definitely room for improvement at the back-end so still hoping for some critique (although thanks to @iamsalar who got in touch).

Just visited the menu library - really nice! If I wasn’t ignoring my core project at the moment I would definitely have a go.

Thank you for this awesome new plugin @exception-rambler, works great. Yes, a detailed post on how you created this using the plugin builder would be fantastic as I am just learning javascript and a little confused on the plugin builder process.

I just used this plugin but nothing else works on my page when the plugin is on.
I try to show an element but bubble just keeps thinking without showing the element.
When I delete the typewriter everything works again.

Is there a solution for that?

1 Like

hey @cho - that sounds frustrating!
I have tried to replicate what is happening for you but can’t.
Are you able to share the app?


If you click the bag icon on the top right it should animate your cart but it just keeps loading.
If you go into the man’s fashion section and click the bag, it opens with no problem.
Removing the typewriter from the homepage also solves the issue and the cart loads in just fine.

I notice that you’re adding your own jquery file, it’s not a good idea, Bubble offers that by default, and adding more than one can lead into bad stuff.


thanks @emmanuel very helpful!
And @cho could you let me know your end whether that has fixed it…? I did manage to replicate the problem my side and this change seems to have fixed it.

Will dynamic text be available for this? …or is it already?

hi @1danielbaker… good question.
And I’m not sure why they were not dynamic in the first place.

I have just updated the plugin - you can download 2.0.
You will need to reinstall plugin as I did not want to push this change backwards to existing apps that are using it.

1 Like

great work!
Do you think that you could to as for dropdown inputs and be able to choose between static choices (one per line) and dynamic choice (results of a search) ?
Do you also think that you could add the text shadow option ?

Finally, do you know if the displayed text also counts for SEO ?

Thanks !

I like the plugin a lot! Is there a way to have some text stay the same and other be constantly typed?

You should combine a normal text element - containing your static text - with the typewriter element and match the font styles. If you arrange them, group them together and make that parent group Fixed Width then you should achieve the effect you want.

1 Like

Ok thanks!