To integrate Typed.js by Matt Boldt into Webflow, you can follow these steps:
Step 1: Add Typed.js to your project
- Go to the Typed.js GitHub repository (https://github.com/mattboldt/typed.js/) and download the latest version.
- Extract the downloaded ZIP file and locate the `typed.min.js` file. Copy it to your Webflow project folder.
Step 2: Include Typed.js in your Webflow project
- In your Webflow project, open the Designer.
- Go to the Project Settings by clicking on the gear icon in the top-right corner.
- In the Project Settings panel, select the Custom Code tab.
- In the Footer Code section, add the following code:
```html
```
Make sure to replace `path/to/typed.min.js` with the actual path to the `typed.min.js` file you copied in Step 1.
Step 3: Create a container element
- Go to the page where you want to use Typed.js.
- Drag and drop a new HTML Embed component onto the page. This will serve as the container for your Typed.js instance.
- Resize and position the HTML Embed component as desired.
Step 4: Initialize Typed.js
- Double-click the HTML Embed component to open the code editor.
- In the code editor, add the following script:
```html
```
Replace `.your-element` with the class name or ID of the element you want to apply Typed.js to. You can customize the strings, typing speed, and other options to fit your needs.
Step 5: Publish your site
- Save your changes in the code editor and close it.
- Publish your Webflow site to make the changes live.
Now, the text inside the targeted element will be animated using Typed.js. You can further customize the animation by referring to Typed.js documentation (https://mattboldt.com/typed.js/docs/).
Note: These instructions assume you are using the Webflow Designer interface. If you are using the Webflow Editor, you can access the Project Settings and HTML Embed component through the Editor UI.