Typed.js

How to integrate Typed.js with Webflow

Typed.js offers flexible integration options for Webflow users. Choose between quick embed solutions for specific elements or site-wide implementations for consistent animations across your project.

Inline embed and popup widget

Add typing animations to specific pages or sections using Webflow's HTML Embed element.

What you can do:

• Create animated headlines that cycle through multiple messages
• Add typing effects to hero sections and landing pages
• Implement location-specific animations without affecting other pages

Setup steps:

1. Add an HTML Embed element where you want the animation
2. Include the Typed.js CDN link and initialization code
3. Target specific elements using CSS classes or IDs
4. Publish to see the effect (animations don't show in Designer preview)

Example implementation:

<h1>Welcome to <span id="typed"></span></h1>
 
<script src="https://cdn.jsdelivr.net/npm/typed.js@2.0.12"></script>
<script>
  var typed = new Typed('#typed', {
  strings: ["our website", "the future", "innovation"],
  typeSpeed: 50,
  loop: true
  });
</script>

Site-wide custom code integration

Implement Typed.js across your entire Webflow project for consistent animations.

What you can do:

• Apply typing effects to multiple elements site-wide
• Maintain consistent animation settings across pages
• Reuse animations by assigning common classes

Setup process:

1. Navigate to Settings > Custom Code
2. Add the Typed.js script to the Footer Code section
3. Include initialization code targeting your desired elements
4. Assign matching classes to elements in the Designer

Configuration options:

• typeSpeed: Control how fast text appears (milliseconds)
• backSpeed: Set deletion speed
• startDelay: Add delay before typing begins
• loop: Enable continuous animation
• showCursor: Toggle typing cursor visibility

Build with Webflow and Typed.js API

For advanced implementations, combine Typed.js with Webflow's API capabilities to create dynamic, data-driven animations.

Use cases:

• Pull animation content from Webflow CMS collections
• Update typing animations based on user interactions
• Create personalized messages using member data

Dynamic CMS content

Connect Typed.js to your Webflow CMS for automated content updates.

Implementation approach:

• Use Webflow's API to fetch collection items
• Pass CMS data to Typed.js strings array
• Update animations when CMS content changes

Example workflow:

// Fetch CMS content
const headlines = document.querySelectorAll('[data-cms-headlines]');
const strings = Array.from(headlines).map(el => el.textContent);
 
// Initialize Typed.js with CMS data
new Typed('#dynamic-typed', {
  strings: strings,
  typeSpeed: 60
});

Custom interactions

Trigger typing animations based on user actions or page events.

Capabilities:

• Start animations on scroll using intersection observers
• Pause and resume typing on hover
• Chain animations with Webflow interactions

Event handling:

// Start animation on button click
document.querySelector('#start-btn').addEventListener('click', function() {
  typed.start();
});
 
// Reset animation on form submission
form.addEventListener('submit', function() {
  typed.reset();
});

What you can build

Integrating Typed.js with Webflow enables dynamic text animations that enhance user engagement.

• Agency portfolios: Showcase your services with rotating headlines like "We design websites, build brands, create experiences" that highlight your capabilities
• SaaS landing pages: Display product benefits with cycling messages such as "Save time, increase revenue, delight customers" in your hero section
• E-commerce promotions: Rotate through offers like "Free shipping today, 20% off sale items, new arrivals daily" to highlight current deals
• Event websites: Build anticipation with countdown messages typing "Conference starts in 3 days, Register now, Limited seats available"