Streaming live at 10am (PST)

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

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

1 Like

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

2 Likes

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?

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

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

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

@samliew – Whoa, thanks for this tip!

Sounds like http://type-effect.webflow.io/ is down since then. That’s a bummer. Would it be possible to republish it?

Many people should’ve used in their project. Probably someone will post here another link. Maybe that could be me if I could find a time. :slight_smile:

I guess so! The idea would be to have access to tutorial like the one @SidneyOttelohe published. Let me know if you get a chance to work on it. That’s to bad this one got unpublished.

1 Like

I have personally reached out to Sidney about this. Hope he republishes it soon :slight_smile:

4 Likes

The Type Effect Link is no longer valid. Can you post an updated link? Thanks!

You guys may know about typer.js (http://webflow-typer-demo.webflow.io) it works but it’s a bit outdated as well. If you want to change the highlight color, it won’t render the first animation with the correct color.

I have no idea who put it together so support is limited.

Hey Guys, I was using Sidney’s Typed.Js tutorial on one my projects. I was not able to finish it so I changed the project into Typed JS. Hope it will help some of the guys in here asking.

I’ve done this between 2am-7am so if there are some problems, I m sorry. ill try to fix them with your help. bye.

Here is the link to the clonable project.

@laurentdesserre @PixelGeek @lorentracy

AMAZING! Congrats and thanks @Dogukan_Uzak :clap:

1 Like

Hey,
That’s a great resource, Thank you!

Does anyone know how to change the length and color of the cursor?
My text is 50 pixels size so the cursor looks very low in height - See picture attached

Thank you :pray:

02

You can clone the project and then read the details to do your own or copy paste between your projects.
It’s up to you. Dont forget the copy custom codes.

If you send a link to your site, I can take a look but I can’t make any promises!

Hey Diarmuid_Sexton, Thank you for trying to help!

I gave it another try and found the solution. The “Typed Wrapper” is controlling the style of the cursor…

2 Likes

Hi Sidney, I don’t see a tutorial in the link. just the typing animation?

1 Like