[How to] Create a Typed Text Effect In Unbounce

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

90 replies

N

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

Java%20Script
Text

B

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?

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!

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

Clara_Simone

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

ChadThompson

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

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

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
J

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

results

Zoe_Tattersall
Userlevel 6
Badge +3

One of the best scripts yet! 🙌🏾

Did I go overboard?! ➡️ http://www.detoxcleansenourish.com/webinar/call/

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

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:

A

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?

J

Looking great, @Ashwin_Satyanarayana!

A

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.

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

J

Thanks for sorting this!

J

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.

J

Thanks @Hristian!

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

J

Brilliant, thanks - its all sorted!

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

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

Hristian
Userlevel 7
Badge +3

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

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

@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

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!

Reply


Terms & ConditionsCookie settings