[How to] Create a Typed Text Effect In Unbounce

  • 30 January 2017
  • 90 replies
  • 1303 views
Show first post

90 replies

J

Hey @Timothy_Hatch!

<insert catchy space-themed pop culture reference here>

Now that that’s out of the way, here’s a little gem that might help. If you click here you can download the actual .unbounce page and load it directly into your account. This way you can essentially reverse engineer the page to see how everything’s working.

I always find this the easiest way to get sorted when I get stuck on @Noah’s more advanced scripts. 🙂

Let me know if this helps!

MPatterson22

This is such a fantastic update Noah! One question: what would be an example integer to slow down the type speed? As it’s already at zero, would you go into negative?

A
Badge

Thanks @Jess! I got it working. And will never apologize for anything ever again. (I’ll let my fiancee know that you told me that was okay… 😀 )

Jess
Rank
Userlevel 7
Badge +1

Hahah! 😂

Good grief, I better sign up for marriage counselling certification.

Ashwin_Satyanarayana

You are surely going to need an Unbounce page for that @Jess ? 😛

Andy_Walker

Hi all, is there a way to slow this down? I see the default value for speed is set at ‘0’

Noah
Userlevel 7

hey @Lnegrich, it looks like you have added id="typed" to two span tags (the innermost and second innermost). That could be the issue, as IDs are unique and should only be used once per HTML document. I’d suggest removing the ID from the second innermost span tag and see if that makes a difference!

Hristian
Userlevel 7
Badge +3

Hi @James_Dixon1,

I just emailed you the unzipped file.

Give that a try.

Best,
Hristian

Hristian K. → experimentation-as-a-service → https://www.revise.agency/
J

Brilliant, thanks - its all sorted!

J

Thanks for sorting this!

Ashwin_Satyanarayana

Here’s another one I created for my course. Whaddayathink?

http://fetchprofits.com/smartmarketing/

I’d also be very happy for any feedback.

Ash

Zoe_Tattersall
Userlevel 6
Badge +3

ALL the pain points! Taken directly for our clients’ feedback on why they did our program or what it helped them with 🙂

We’re more than just your type. We do awesome, too. And website design, graphics, product photography, video content & more. https://sevahcreative.com
Nicholas
Userlevel 7
Badge +4

That is an awesome implementation, @Zoe_Tattersall. You’ve convinced me to test this out on one of our pages. Using client pain points is brilliant.

Subscribe to Growth Marketing Weekly → https://growthmarketer.co/newsletter
Zoe_Tattersall
Userlevel 6
Badge +3

Trying to target everyone one of the hardest things – I haven’t actually launched this page, but will keep you guys updated on conversion % once I do 🙂

We’re more than just your type. We do awesome, too. And website design, graphics, product photography, video content & more. https://sevahcreative.com
ChadThompson

Anyone else having trouble changing speeds? Seems to stay the same regardless of the variable I throw at it…

Clara_Simone

hello, I got it working once, but it no longer works… can you reupload the unbound file please ?

H

Hi there, I`ve got a similar problem like Lnegrich. In the preview mode the typed text effect is working perfectly well, but on the published page there is only static text. (Maybe the source code is also the problem?)

It would be great, if anyone could help me!

Source code

cducar

Works like a dream! However I am trying to use this feature for a quote further down the page. I already was able to manipulate it so it would stop the loop, but I want it to start typing when the visitor scrolls to that part of the page. Is there an easy code snippet I can add to accomplish this?
Thank you!

Noah
Userlevel 7

Hey there, based on your screenshots it looks like you need to remove the # from your textbox source code. Hope this helps!

Antoine_Bonicalzi

Works like charm! Thank you 🙂

M

Hello!
First of all, thank you very much Noah for all your scripts!

My question is: does anybody know why when I use this script along with other animation scripts (like this “onScroll Animations”: [Tips & Scripts] On-Scroll Animations), the onScroll animation script stops working? Is it because this typed text effect script somehow prevent the other from working because there is something interfering? No idea 😅

Thank you!
Miriam

J

This is -> 🔥

Ashwin_Satyanarayana

Thank you so much @Noah , this really makes that landing page get some life of its own 🙂

Timothy_Hatch

Hmmm…I know I can do this but, Dammit Noah, I’m a marketing strategist not a coding master!

Perhaps I should be using the Force? I must unlearn what I have learned.

Timothy_Hatch

Do I have to shut down all the garbage mashers on the detention level here? IN other words, after the text is surrounded, do I have to add the script from your original post?

Reply


Terms & ConditionsCookie settings