Streaming live at 10am (PST)

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


#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


Typed.js on Webflow
Typer.js jQuery not working on Chrome
#2

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


#3

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


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


#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


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


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


#15

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


#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: https://github.com/mattboldt/typed.js/

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!


#19

Most libs are hosted on Github. You don't even need to use your own hosting: https://forum.webflow.com/t/how-to-embed-files-hosted-on-github/29281?u=samliew


#20

@samliew – Whoa, thanks for this tip!