Simple Typewriter Effect in Webflow using Typer.js

🖐 Check out my Webflow templates: robn.link/templates
⭐ Try out Webflow using my affiliate link: webflow.grsm.io/robin
This will give me a small commission, which will help me lots. Thank you so much :)
Typer.js documentation: steven.codes/typerjs/docs/ind...
This video will show you how you can make one of those cool Typewriter effects in Webflow, using a great (and small!!) javascript library called Typer.js.
🖐 Portfolio: shapedbyrobin.com
🖐 Twitter: / shapedbyrobin
🖐 Instagram: / shapedbyrobin
🖐 Webflow: webflow.com/robingranqvist
🖐 Dribbble: dribbble.com/robingranqvist

[@CanvaGuru]

I wanted to change the typing text to other colour but it is always rendering in the balck no matter what ever the changes that I do for CSS. Can you please help me to fix this.

[@garethellison01]

Thanks Robin. Awesome tutorial!

[@DjSoulsaver]

Giving you a sub actually! Very straight-to-the-point tutorials and love the quick formats. Like quite a few of the interactions/implementations. Keep them coming.

[@shapedbyrobin]

That's exactly what I'm going for. Thanks so much 🤙

[@alexandresilva5520]

Thanks a lot for the help! Amazing video, just what I was looking for!

[@irieinthe760]

Super easy thank you so much!

[@user-gq9ru7pn1g]

Spot on - great tutorial - thank you

[@CristianeSilva-xk5zz]

Worked perfect!!! Thanks

[@Sportty126]

Love this! This is awesome!! I appreciate this so much

[@shapedbyrobin]

Thanks so much!! 🤙

[@aloha2713]

Pretty nice thank you 👍

[@carinag1913]

This soooo awesome!! Thank you !!! May i ask if there is a way to type a whole sentence with "," inside the sentence?

[@theblackrosetbr7950]

Great, thanks!

[@paullefebvre5968]

Do you know how to change the color of the words "design" etc ? thank you ! 😊

[@imjustsomeguy]

data-colors="#123abc"

[@karthikvenugopal9139]

awesome tutorial, I have a question, is there a way to integrate two fonts in this, like 'design' is font 01 and 'develop' is font 02. I'm sorry I have zero knowledge in coding.

[@ssport_offical]

thank you!!!!!

[@indigogoss7203]

Thanks so much! How would I get it to pause on the last word?

[@nicomatico]

Works! 💪

[@marcososa1986]

Great tutorial! How can I make the font transparent with a black stroke?

[@denniszenanywhere]

Really like this but anyone know where I can find a text counter. It works like a counter that you see used in numbers but looking for a text that gets replaced or work like a rolling counter.

[@alexundefeated]

Thanks you

[@alexnguyen6215]

Thank you for the help, when I tried it it worked but instead of filling it with my own words, it says "override this" & "sample teaxting" Is there anyway that you can help me with this issue?

[@ByGodsGrace99]

Hey, do you get a little lag on this animation for mobile?

[@drao90]

How do I edit the code to create 2 different sentences on different lines?

[@private_krapfen950]

can i change the typing speed for each word?

[@njengathegeek]

Can you please do the one that words loops like a number counter

[@m4dn3wt]

This looks great, but the link on the description is broken :( Could you fix it by any chance? TY! :)

[@rafaelmartinez7615]

Great tutorial buddy! Is there a way to get a vertical cursor?

[@tedserdel]

Add this to the cursor class custom attributes similar to how you added, data-owner="main" data-cursorDisplay="|"

[@AnaGarcia-ks8vd]

Hi! This is great! thank you. How could I change the color of the typed text?

[@shapedbyrobin]

Do you mean a different color for each writeout? I'm not sure about how that would work, I'll try to look into it. If you mean just the span itself, you can style it however you want in Webflow as usual :)

[@darkmxk]

" data-colors="red,orange,blue"

[@juliakabelka5778]

Thanks for that great tutorial! By default the font color is black - unfortunately when I change the style in Webflow it won'z be applied once I publish it. Any tips on how to change the font color?

[@shapedbyrobin]

Hey, thank you so much. Sorry for not mentioning it in the video, but you have to add another data-attribute called "data-colors" with the value of your color. It should look something like this: prntscr.com/1tynt4k

[@juliakabelka5778]

@@shapedbyrobin Thank you so much!

[@kevinmakesvideos]

@@shapedbyrobin goat!!

[@waroakawa]

great

[@goldenapple801]

Thank you! How do I make it so it doesn't loop?

[@tedserdel]

Add this to the typer class custom attributes similar to how you added, data-words="first,second,third" data-loop="1"

[@evan_swanson]

Great video! 1 question: I used the script. It works. But it's changed my text from Maroon (the original color) to black. How to I keep the Maroon color? It shows as Maroon in Webflow but when it gets published it shows as black.

[@SimoneBreanna]

add another attribute named "data-colors" and then use the hex code for whatever color you want

[@quefreen]

@@SimoneBreanna Thanks a lot. :)

[@rabihdaoud8629]

How can I change the colour from black to white for example?

[@michielverbeke4713]

above is the explanation from Robin G himself. U need to add another data attribute

[@elizabeth4689]

the link to the code is displaying an error 404, did you take it down :(

[@IUSTITA]

Big Daddy Kane sent me here.

[@brianbrown3601]

Everything works but when i go to the final screen the curser is moving but the words are not visible, I changed the color and it still isn't working

[@Clipqa]

Hey did you fix this by any chance?

[@stormcostabir1559]

I don't know where I'm making a mistake! Can you help me out?

[@Clipqa]

hey were you able to fix that issue?