Using Split Type Library

Hi everyone,

First time using this forum and just recently started using Webflow and still getting used to it but loving it so far!

I am having one issue though trying to get the Split Type Library below:

I have it set up as the following:

However it looks like it isn’t accepting the class name as the target as I get this error:

Has anyone any idea what has went wrong?

For reference I followed this tutorial:

Any help would be greatly appreciated!

Hi Harvey, welcome to the Webflow forum.

It would be easier to diagnose your issue if you shared read-only link of your project.

But anyway, I think I got the idea about your issue. You seems to have done just one simple mistake, I think you’ve placed your scripts inside < head> tag. So instead you should please it on the field below, Before </ body> tag field.

1 Like

That was it, I knew it was something simple I was missing! ha thanks for your help!

1 Like

Ya it usually happens to everyone.

And no problem, always happy to help.

I have now managed to add a class using this javascript called “line” to each line within the paragraph, is there a way to target this class to animate it, or animate them as a child so I can add a delay to each line within webflow? The class hasn’t been created in webflow, only in the script.

Yes, any class that exists in your final HTML ( including those created by script ) can be styled and targeted with Interactions.

  • Drop an element of a similar kind on your form. e.g. text line, image, list or whatever.
  • Select it and create a Webflow class of exactly the same name, and case, as your script is creating. In your case that might be line, all lowercase.
  • Now, style it, or build Interactions based on that class.

Targeting should work fine. Note that you might encounter timing issues, since your scripts are creating those classes at the end of the page load. But I don’t think that will really matter for most Interactions particularly if they are element interactions like a click or mouseover.

Thanks,
I can add custom html to Head ? :thinking:

Not css…