[How to] Create a Typed Text Effect In Unbounce

design

#21

@Zoltan nice catch!

@Timothy_Hatch my apologies, the js snippet was actually referencing a ‘.element’ class whereas the the instructions reference the ID ‘typed’. I think this may have been causing your issue. I’ve updated the js snippet to correctly reference the ‘typed’ ID. Take a look here: https://gist.github.com/noahub/59f4bb0db7c6ec353709efdcbe1761dc24


#22

@Noah Hey, it looks great when it works :wink:

Here’s a link to how it does it on my end - http://offer.teensafe.com/blank-page/

Following all your steps I got the text “typed” but here’s the issue. For some reason it doesn’t type with the same font specs and uses default paragraph text.

Any chance you could take a look into this? It seems that I’m doing everything right?



#23

hey @Oleksandr_Ponomarenk, can you try using the ID ‘#typed’ in your script as opposed to the ID of your textbox?


#24

it worked!

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


#25

my pleasure :dealwithitparrot:


#26

So, how do I get to Tashi Station and get those Type Text Effect Power Converters?

"Whaddah you think you’re some kinda Jedi waving your hand around…?


#27

I am totally Han Solo when talking into the comlink to the Empire Guards in Ep. IV when they are rescuing Princess Leia…“Uh, everything’s ok, situation normal…we’re fine here, how’ve you been…?” I am totally out of my element. I’ve read this entire thread, twice…anybody willing to send me a screen shot video walkthrough? I’ll buy you a drink at the Mos Eisley Cantina!


#28

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. :slight_smile:

Let me know if this helps!


#29

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?


#30

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?


#31

Hey @Andy2!

Never apologize for n00b questions, I love 'em! Here’s a clip to give you an idea of where to plug in some of those scripts:

Feel free to chime in if you have any other questions, n00b-level or otherwise :slight_smile:


#32

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… :grinning: )


The Ultimate List of Unbounce Tips, Scripts & Hacks
#33

Hahah! :joy:

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


#34

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?


#35

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!


#36

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


#37

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


#38

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


#39

@Andy2 + @Andy_Walker + @MPatterson22 , increasing the typeSpeed value will slow down the typing of the letters. You can also set the time before the typing starts by adding a startDelay variable with a value, and the backspacing speed with the backSpeed variable.

All together, your script might look something like this:

$(function(){
        //Replace .element with the class or ID of your target text
        $("#typed").typed({
            //Replace placeholder text with your own text
            strings: ["test", "test2"],
            //change speed
            typeSpeed: 100,
            // time before typing starts
            startDelay: 100,
            // backspacing speed
            backSpeed: 100,
            //loop the animation
	        loop: true
        });
    });

You can see all the custom options here: https://github.com/mattboldt/typed.js/.

I hope that helps!


#40

Beautiful, thanks @Noah!