Typing Animation in Webflow

Community resources Webflow Tips
21

Hi,

I have another question for typer.js;

How can i make script write down sentences in new line like in the website below.

http://allison.house/404

22

Check out JavaScript Animated Typing with Typed.js | by Matt Boldt and the documentation there.

23

I already checked the documentation but when i use global \n line break it’s not working…

The code that i use;
strings: [“First Sentences\nSecond sentence.”],

with this its write both sentences in the same line

the output that i want to see;

First Sentences
Second Sentences

Am i doing something wrong? :confused:

24

Sorry, man, I can’t tell without seeing the actual code. I’d suggest looking at the examples he’s posted and see how others are doing it.

25

In the Documentation it says;

Use white-space: pre in your typed text element, and then \n when typing out the strings.
Example:
span id=“typed” style=“white-space:pre”>
…
$(“.typed”).typed({ strings: [“Sentence with a\nline break.”] });

I don’t understand what is “use white-space: pre in your typed text element” part and where to put that “span id”, maybe that can solve my problem if i know how to figure out this one.

26

Ok i figure it out how it is, you just put < br> between sentences that you want to line break.

Ex.

$(“.typed”).typed({ strings: [“First Sentences < br>Second Sentences”] })

That’s it.

And thank you md673 :smile:

27

Hey @Jonatan_Ronsholdt,

Amazing work with this plugin. Look what I just did: http://tribe.pm/home-2

As you can see I can’t custom the first time it’s highlighted. First time it’s black, then it’s grey. Any idea how I could fix this?

Thanks man :smile:

2 Likes
28

Hey @Jonatan_Ronsholdt !

Just another quick question to follow-up.

As you can see here on the same URL (http://tribe.pm/home-2), there is an animation to make the screens appear. Is it possible to make the “typing” animation starts after this animation? It’s currently simultaneous, and a bit confusing :confused:

Thanks man!

29

hi,

I’ve been using this plugin over here www.lanefree.com but i don’t want it to highlight the text then delete and start again

thanks

30

Hi guys,

I’m trying to achieve the same typing effect with the following code;

<script src="https://raw.githubusercontent.com/mattboldt/typed.js/master/js/typed.js" type="text/javascript"></script>
<script>
  $(function(){
      $(".element").typed({
        strings: ["Amplify your exposure.", "Brand Strategy.", "Social Media.", "SEO and PPC.", "Content Marketing.", "Digital Design.", "Data Services."],
    // Do you want it to loop?
            loop: true,
          // typing speed, in milliseconds. The higher the number, the slower it gets
            typeSpeed: 5,
            // How many times should it loop? (false = infinite)
            loopCount: false,
            // Show cursor?
            showCursor: true,
             // character for cursor
            cursorChar: "|",
          // time before typing starts, also in milliseconds.
            startDelay: 80,
            // attribute to type (null == text)
            attr: null,      });
  });
</script>

It’s almost there but I need it to type slower and pause for a second between each sentence. Is there anything I can do to get the right results?

Also, it doesn’t seem to be working on chrome?

Heres the link:
https://preview.webflow.com/preview/goldmills-marketing?preview=987b5d022e69bb76bb720e9cd52ad964

Thanks

31

You’ll need to publish it and share that link as we can’t see it in the designer.

32

Thanks @md673

I have published and here is the link http://goldmills-marketing.webflow.io/

Here’s the preview link: https://preview.webflow.com/preview/goldmills-marketing?preview=7b68ec1c9a5f61ebb954846544d3209b

The custom code itself is in the site settings page.

Hope this helps

33

Not seeing your code in the previous post either.

34

Hi guys,

I am trying to get this typing animation thing to work on my website.

Followed and tried a few things said in eplys in this post but up till now it still not working ok.

Is there maybe someone who might be able to help me with this?

Here’s the link:

https://preview.webflow.com/preview/iamreddog?preview=ab81c1a15ac4640b990015128bd0e244

35

Hey man, I’d love to help, but really don’t have time right now. I’d suggest looking over all the documentation again. I had to do a bunch of digging until I figured it out. Start with a simple page and just get it working, then add it to your new site.

I used typer.js and a html embed element on our homepage. You could inspect those elements on our site and reverse engineer it.

Good luck!

1 Like