Anyone know if there’s a way to animate text typing in Webflow? I’d like the page to type out a headline, select it, delete it, and then write a new headline. Got the idea from dunked.com. Thanks, guys!
Working on it! Shouldn’t take me long to making a working demo 
This is actually very easy to make, using a little jQuery plugin!
(I checked the source code of the dunked website, and quickly found out what plugin they’re using for making this work. It’s a small plugin called typer.js)
Awesome! I found that js plugin as well. Let me know when you get it figured out! I may take a stab at it myself.
Hi,
I built something very similar to this very recently. Here are the steps:
1 - Add this code to your footer (from site settings > Custom code)
<script src="https://raw.githubusercontent.com/mattboldt/typed.js/master/js/typed.js" type="text/javascript"></script>
<script>
$(function(){
$(".element").typed({
strings: ["First sentence.", "Second sentence."],
typeSpeed: 0
});
});
</script>
2- Change the “First sentence.”, “Second sentence.” parts to your text. First sentence becomes the first thing that you want to type, and so on so forth. You can also configure the speed at which this types/deletes and a whole lot of other things, more info on that down below.
3- Select your headline in webflow designer, and give it the class “element” (you can change the class name in the custom code if you want, of course).
4- You are done! The typing effect will not show up on the designer or preview, but you should be able to see it when you publish your site!
More on customization:
You can add more arguments in the script to customize certain things. Here is an example:
$(function(){
$(".element").typed({
strings: ["First sentence.", "Second sentence."],
// typing speed, in milliseconds. The higher the number, the slower it gets
typeSpeed: 0,
// time before typing starts, also in milliseconds.
startDelay: 0,
// backspacing speed. Same as the typing speed.
backSpeed: 0,
// time before backspacing. In milliseconds.
backDelay: 500,
// Do you want it to loop?
loop: false,
// How many times should it loop? (false = infinite)
loopCount: false,
// Show cursor?
showCursor: true,
// character for cursor
cursorChar: "|",
// attribute to type (null == text)
attr: null,
// either html or text
contentType: 'html',
// call a function when done
callback: function() {},
// starting callback function before each string
preStringTyped: function() {},
//callback for every typed string
onStringTyped: function() {},
// callback for reset
resetCallback: function() {}
});
});
You can find out more about this here.
Have fun!
5 Likes
Don’t know if this might help anybody?.. 
What @collut have made using typed.js looks very nice! 
I’ve made this other demo using typer.js. There are some options, like if you want the different retypes to come sequential or in random order, and some for changing the higlight background and text colour. And the code adding-workflow is a little different. Anyways…
Here it is
http://webflow-typer-demo.webflow.io
and here’s the sharing link for it:
https://preview.webflow.com/preview/webflow-typer-demo?preview=4856ef16763d39bb045028d4215d4bf0
Best to all of you guys,
Jonatan
7 Likes
Well done! Thanks @Jonatan_Ronsholdt! I’ll be implementing this in a build soon. Will report back.
Glad to help
<b
Hi @Jonatan_Ronsholdt, this is excellent, thanks so much for sharing 
Cheers,
Dave
This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.
Hi guys
I am trying to get this to work. I do not understand this part
I have tried selecting a headline and adding the ‘element class’ but it did not work.
Any advice on how to set this up correctly would be great
Paul
Can you please update your post with some more information so we can help you faster? Things like screenshots and your environment info really speed things up.
Posting guidelines can be found here: Posting Guidelines for the Design Help Category - General - Forum | Webflow
Thanks in advance!
Hi @PixelGeek
I am sorry I do not have anything to show you
I created a new page
I put the JS Code in the footer as per instructions above
I then tried to add a H1 Heading and add the class “element” to it
I do not know if I should write in the headline or leave it blank
Hit save and then preview
So I guess I really need instruction on nearly all of it!
But this is the bit I really cannot get, how do I select a headline and give it the class “element”
I am sorry I cannot be more helpful
I tend to get the basics working and then build everything around it.
Thanks for your input
Paul
It’s hard to say, but I know that you can’t see the typer in preview. You’ll have to launch the site to see it in action.
Also, when he says “element” he menas the class name you assigned earlier. Notice the second line of the script…
(".element")
That’s how it knows what type to change. Name it whatever you want, but make sure it’s updated in the script.
Hi @md673
I understand all that and thank you.
I am sorry I am not making myself clear:
Select your headline in webflow designer, and give it the class “element” (you can change the class name in the custom code if you want, of course).
Does this mean add a headline using H1 H2 etc?
If so do you need to write any text in the heading block?
If you add the ‘element’ class… do you add it to the H1 class that is already there so ‘element’ becomes a secondary class?
If not, to what do I add the ‘element’ class to??
Thanks again
Paul
Here’s a quick example that I did using the HTML embed. However, you should note that my script is a bit different.
<h1>This type doesn't change <span data-typer-targets="this copy changes,the second change,and last change" class="typer"></span>.</h1>
H1 gives the style based on other headline styles in my site. The “typer” span is the element the script is looking for. I think you are overthinking it. Take another look at @Jonatan_Ronsholdt’s example link http://webflow-typer-demo.webflow.io/ and maybe take a peak at the code to reverse engineer it.
Hope that helps.
Hi @md673 and @PixelGeek
Thanks for all you help.
However, I have found the MAIN reason while this DID NOT work
The link to the JS file was no longer valid!
I added the script to my own server and changed the source and BOOM we have action!
So I now have this working ok and I am playing around with the code.
I do have one final question… where would I add this CSS?
.typed-cursor{
opacity: 1;
-webkit-animation: blink 0.7s infinite;
-moz-animation: blink 0.7s infinite;
animation: blink 0.7s infinite;
}
@keyframes blink{
0% { opacity:1; }
50% { opacity:0; }
100% { opacity:1; }
}
@-webkit-keyframes blink{
0% { opacity:1; }
50% { opacity:0; }
100% { opacity:1; }
}
@-moz-keyframes blink{
0% { opacity:1; }
50% { opacity:0; }
100% { opacity:1; }
}
Thanks again for your help
Paul
1 Like
You can add custom CSS to the header of each page using the “Custom Code” section in the dashboard of your project.
1 Like
Hey I need some Help. I cant do what you said, could you give the exact instructions that you followed please