[How to] Create a Typed Text Effect In Unbounce

7 years ago
30 January 2017
90 replies
1304 views

Userlevel 7

Noah
Former Unbouncer
126 replies

Have you ever been asked to make a landing page “pop”? Don’t you just love that? Well here’s a way you can really WOW some folks with this nifty new script!

Introducing: Typed Text Effect in Unbounce

Gone are the days of having to choose just one adjective, or just one feature to display on your landing page. Rejoice!

You can check out the demo page built in Unbounce here:
http://landingpage.noahmatsell.ca/typed-js/

How to Install in Unbounce

Click Here for Instructions

🚨
This is not an official Unbounce feature. This functionality is based entirely on third party code, and has only been tested in limited applications. Since this isn’t a supported Unbounce feature, our support team will be unable to assist if things go awry. So if you are not comfortable with HTML, Javascript and CSS, please consider consulting an experienced developer.

Optional: Download the .unbounce file

Download the .unbounce template here.

Download the latest version of the script

https://gist.github.com/noahub/59f4bb0db7c6ec353709efdcbe1761dc

Step 1.

Create a new text element for your ‘typed’ text and add some default text. Make this text element wide enough to accommodate your ‘typed’ text.

Step 2.

Click ‘view source’ and create a new innermost span around your default text. Give this span an id of ‘typed’ (or another ID/class of your choosing)

Step 3.

Copy the script from ‘typed.js’ and add to your page Javascripts with placement ‘Before Body End Tag’

Step 4.

Replace ‘.element’ with the ID from step 2.

Step 5.

Add your ‘typed’ words or phrases to the strings array

Step 6.

Optional: for blink cursor effect, copy CSS from ‘animated_cursor.css’ and add to your page Stylesheets

Testing

Like any other feature that you implement onto your page, you’ll want to see what effect it has on your conversion rates. We recommend running an A/B test and segmenting a small portion of traffic towards the page, just to be safe. Documentation on A/B testing can be found here.

Did you find this tip useful? Did you test this on your landing page? Let us know in the comments below! 🙂

Can’t see the instructions? Log-in or Join the Community to get access immediately. 🚀

Want to take your Unbounce landing pages + Convertables™ to the next level?
Check out the Ultimate List of Unbounce Tips, Scripts & Hacks

Show first post Hide first post

90 replies

Page 3 / 4

Okay, I know this should be easy, but I’m gettin’ nowhere. I can do the first step, but nothing happens. The steps 3-6 are to infinity and beyond for me right now…I’d love to be able to offer this feature on my landing pages…another day perhaps. Thanks for your efforts to bring this padewan further into the jedi coding space.

it worked!

Thanks for the prompt response Noah, you’re THE man haha

Apologies for noob question, but how do I link to the script? Do I place into the section for javascripts or stylesheets? And if the former, which section of the page?

Got another one for you! How do you change the timing of how quickly the text changes, and also how quickly it actually spells out each segment of text?

hello…I’m beyond beginner level here, so apologies for the elementary question. I got the text effect to work but I’m being a bit ambitious with having two different text box’s that will do it (one below the other). When I try and do this, it seems like the script overrides the first one and I only get 1 of them to work. Any tips/suggestions? I don’t want to give up on this dream lol! Thank you in advance!

This looks great and looking to implement it soon. Related question based on the Landing Page example in the original post. Is there an article that describes how to implement the animated background? Can’t seem to find that in the community so that I would just come back here and ask!

@Jess @Noah

Beautiful, thanks @Noah!

Hi: I got this all to work great in Preview Mode but live it just shows “text” . refreshed, resaved, tried alt browser with same result. Each time the Preview looks fine. Any suggestions? Thanks.

text source

text

@Justin - I’ve been having some issues so thought I’d try with the .unbounce file but its not selecting - do I need to use a doc in the file or what? Seems strange, never had a page upload problem like this before

Userlevel 7

Hi James,

Based on the screenshot you’ve provided, it seems like the file is still archived/zipped.

Unzip it and the file picker should allow you to select it.

Best,
Hristian

Hey @Hristian, I unzipped it but there is no .unbounce files in there

Justin
Former Unbouncer
1556 replies
7 years ago
28 February 2017

Thanks @Hristian!

Also, sorry @James_Dixon1! Not sure how the hell that .zip file failed so hard… I’ll update the link now.

Justin
Former Unbouncer
1556 replies
7 years ago
28 February 2017

Update:
The following link should allow you to download the .unbounce file and load it into your account. Sorry about that!

Download the .unbounce file here.

Hey, I had a question about the cursor CSS. I was able to get the text animation running fine, and the cursor CSS does apply the blinking effect, but for whatever reason, the cursor doesn’t seem to carry over the formatting of the rest of the text in my span.

Justin
Former Unbouncer
1556 replies
7 years ago
18 March 2017

Looking great, @Ashwin_Satyanarayana!

Love this, such a great feature. May have missed this somewhere in the thread above but it is possible to style the text for mobile without it affecting the desktop version?

Ok, I have tried to do this for a couple of days made little progress. The Scrolling text seem to be working but I cant adjust or change the text color in anyway. Sorry in advanced if I missed something.

Text Box:

.

Javascript:

Justin
Former Unbouncer
1556 replies
6 years ago
28 September 2017

Love it @Zoe_Tattersall! Looks like you’re addressing quite a few pain points in one single headline. This is the perfect implementation. 😃

Hi guys, I got this working but as soon as I created a “count up animation” with Javascript it instantly stopped working. Article here: [Tips & Scripts] Count Up Animation

Any idea?

Hi Everyone,

Amateur here. I’m hoping to get some help with my typed text. I’m struggling to change the colour, size and style of my typed text. On a side note, I have managed to create the typing effect but only when I input the metadata element (#lp-pom-text-1538) into java script. When I input #typed in java script, the typed effect doesn’t work. I have tried variations mentioned in this forum i.e “#element” instead of “#typed” and Class instead of ID. Nothing seems to work. Help would be appreciated!!

Thanks Noah! It works perfectly! Is there any possible way to have the text fade out after it has been typed rather than have the current backspace typing effect? Thanks for your help again!

Hey! I’m having the same problem. Did you ever find a solution to change the cursor size and colour?

@Noah Thanks for sharing! I got it to work but how can I increase the time each word is visible before it changes to the next?

Does this work for PopUps?

Hey @Noah, I’m having an issue with the typed effect working while there is a form on the page. If I remove the form, the typed effect works perfectly. I tried changing the span id to something random instead of “typed” just incase there was something else calling “typed” in the form, but still it is not working. Is there a way to get this to work while still using a form on the page?

Thanks,
Mike