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

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.

https://webflow.com/website/typed-js?s=typed-js

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

https://webflow.com/website/typed-js

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

Hello Sidney, thank you for sharing but I don’t see anything but the animation that says ‘Typewriting - Now you can create beautiful typewriter’.

1 Like