Typing Animation in Webflow

Glad to help :blush:



<b

Hi @Jonatan_Ronsholdt, this is excellent, thanks so much for sharing :slight_smile: Cheers,
Dave

This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.

1 Like

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

Thanks in advance! :slight_smile:

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

Hi,

I have another question for typer.js;

How can i make script write down sentences in new line like in the website below.

http://allison.house/404

Check out http://www.mattboldt.com/demos/typed-js/ and the documentation there.

I already checked the documentation but when i use global \n line break it’s not working…

The code that i use;
strings: [“First Sentences\nSecond sentence.”],

with this its write both sentences in the same line

the output that i want to see;

First Sentences
Second Sentences

Am i doing something wrong? :confused:

Sorry, man, I can’t tell without seeing the actual code. I’d suggest looking at the examples he’s posted and see how others are doing it.

In the Documentation it says;

Use white-space: pre in your typed text element, and then \n when typing out the strings.
Example:
span id=“typed” style=“white-space:pre”>

$(".typed").typed({ strings: [“Sentence with a\nline break.”] });

I don’t understand what is “use white-space: pre in your typed text element” part and where to put that “span id”, maybe that can solve my problem if i know how to figure out this one.

Ok i figure it out how it is, you just put < br> between sentences that you want to line break.

Ex.

$(".typed").typed({ strings: [“First Sentences < br>Second Sentences”] })

That’s it.

And thank you md673 :smile: