How Do I Use Typed JS in Webflow?

by

How Do I Use Typed JS in Webflow?

Webflow is a powerful tool that allows you to create beautiful and interactive websites without writing a single line of code. One of the features that makes Webflow even more versatile is the ability to integrate external JavaScript libraries, such as Typed.js. In this tutorial, we will explore how to use Typed.js in Webflow to create dynamic and engaging text animations.

To get started, you need to have a basic understanding of HTML, CSS, and Webflow. If you’re new to Webflow, it’s recommended to go through their official documentation for a better understanding of the platform.

Step 1: Setting up the Project

Firstly, create a new project in Webflow or open an existing one. Once you’re in the Designer view, navigate to the page where you want to implement the Typed.js animation.

Step 2: Including Typed.js Library

To use Typed.js in your Webflow project, you need to include the library. There are two ways you can do this:

Option 1:

  • Visit the official website of Typed.js at https://mattboldt.com/typed.js/.
  • Click on “Download” and save the JavaScript file (typed.min.js) locally on your computer.
  • In your Webflow project, go to Project Settings > Custom Code.
  • Paste the following code inside the “Footer Code” section:

“`html

“`

Option 2:

  • If you prefer using a CDN (Content Delivery Network), open your Webflow project and navigate to Project Settings > Custom Code.
  • Paste the following code inside the “Footer Code” section:

“`html

“`

Step 3: Creating a Text Element

Now that you have included the Typed.js library, you can proceed to create a text element that will be animated. In the Webflow Designer, drag and drop a text element onto your page.

Example:

Step 4: Adding Custom Attributes

To make use of Typed.js functionality, we need to add some custom attributes to our text element.

  • Select the text element on your page.
  • In the right-hand panel, navigate to the “Settings” tab.
  • Click on “Add Field” and enter “data-typed-text”. This attribute will hold the text that will be animated.
  • Enter a string of comma-separated values representing each word or phrase you want to appear in the animation.

For example, if you want to animate the words “Hello,” “Webflow,” and “Typed.js,” your custom attribute should look like this:

“`html
data-typed-text=”Hello, Webflow, Typed.js”
“`

Step 5: Initializing Typed.js

To initialize Typed.js and apply it to our text element, we will use custom code in an HTML embed.

  • Add an HTML embed element below your text element.
  • Paste the following code inside the HTML embed:

“`html

“`

Don’t forget to replace “.your-text-element-class” with the class name of your text element.

Example:

Step 6: Styling and Customization

At this point, you have successfully implemented Typed.js in your Webflow project. However, you can further customize the animation to match your design preferences.

  • Apply CSS styles to your text element using Webflow’s built-in styling options or custom CSS code.
  • You can modify various options in the JavaScript code snippet to control the typing speed, backspacing speed, and looping behavior.

For a complete list of available options and advanced usage examples, refer to the official documentation of Typed.

Conclusion

Typed.js is a fantastic library that adds a touch of interactivity and dynamism to your Webflow projects. With its easy integration and customization options, you can create engaging text animations that captivate your visitors.

By following this tutorial, you should now be able to use Typed.js effectively in Webflow and take your designs to the next level. Happy coding!