[Mini-Tutorial] How to Integrate Typed.js in Webflow

Community resources Webflow Tips
1

Hey Guys,

Here’s a mini-tutorial on how to integrate Typed.js by Matt Boldt in Webflow.
You can find it here: http://type-effect.webflow.io/

If something isn’t clear or perhaps difficult to understand feel free to reach out to me I’m happy to help!

Lot’s of love
Sidney

16 Likes
2

Cool! Thanks for the tutorial.
Seems pretty clear to me. :slight_smile:

1 Like
3

Beautiful tutorial! :slight_smile: thanks for sharing with the community. :heart:

1 Like
4

@SidneyOttelohe

Better still. Skip Step 1 & 2 by changing Step 3 to this:

<script>
var Webflow = Webflow || [];
Webflow.push(function() {
  $.getScript('https://cdn.rawgit.com/mattboldt/typed.js/master/js/typed.js', function() {
    $(".typed").typed({
      strings: ["How to integrate Typed.js"],
      typeSpeed: 50,
      startDelay: 250,
    });
  });
});
</script>

And while you are at it, might as well merge 3 & 4 as they can be pasted into either the header or footer code now (I recommend Footer Code).

Now that’s down to two steps instead of five.

3 Likes
5

The sign of an awesome web designer is someone who presents even a simple tutorial in a beautiful, custom-built website rather than a text post :100:

Thanks for the tutorial. I assure you this will be put to good use on at least 2 of my sites.

Best,
Christopher

2 Likes
6

Thanks @SidneyOttelohe

Trying this out now and adding custom styling… Any reason why I might be having cursor alignment issues with multi-line text?

JFly

7

@samliew I was looking for a way to skip 1 & 2 thanks for pointing this out! I’m not very good at js (yet). :smile:

Thanks
Sidney

8

Hey @JFly,

Try moving your typed element into a div wrapper and make sure to set the typed element itself to display: inline-block.

Could you share me your read only link?

Let me know if this helps!

1 Like
9

Yep. Thanks!

https://preview.webflow.com/preview/jfly-typedjs-test?preview=b2eaba1b43c0efbab4159ab864deba16

10

@JFly Ok so what I’d recommend doing is remove all the styling you gave ‘typed’ and style ‘typed-wrapper’ instead.

I’ve also updated the tutorial covering a bit more how to use multiple strings etc.

11

okay - styling removed from the typed div (except inline-block), and instead applied to wrapper.

The cursor still jumps down to the bottom of the paragraph after the first line…

12

@JFly

Ah yes, I’m sorry I misunderstood your problem.

Try adding line break like this ["Sentence with <br>line break."] where you want your line to break.

13

Oh, I need to manually break the sentence? That sorta works against my need for responsive text reflow…

14

Great work @SidneyOttelohe :slight_smile: It will come in handy on my next website. Thanks for sharing!

1 Like
15

Thank you so much. I made use of it on my website : www.kalpah.com :slight_smile:

2 Likes
16

Thank you first of all for posting this tutorial and I have tested the script and it worked… until today. The link https://cdn.rawgit.com/mattboldt/typed.js/master/js/typed.js seems to down therefore causing the text effect to not work. Anyone else having this problem?

17

Hey @funhyun, the author seems to have deleted the cdn, but here’s another you could try: https://cdnjs.cloudflare.com/ajax/libs/typed.js/1.1.7/typed.min.js

You could also download the file and upload it to your own hosting provider like amazon aws etc, here’s the original project link: GitHub - mattboldt/typed.js: A JavaScript Typing Animation Library

Best,
Sid

18

Thanks for the speedy reply! I wound up doing exactly that as you stated. Downloaded the js file and used my own hosting. Have a great day!

1 Like
19

Most libs are hosted on Github. You don’t even need to use your own hosting: How to embed files hosted on Github

20

@samliew – Whoa, thanks for this tip!