Is it possible to create a text animation on Webflow, where the text appears to be deleted and written again, like in the example given?
TL;DR
- Add a text span or div with a class like
.typed-textin Webflow where the animation will display. - Embed the Typed.js library via custom code and configure it with desired phrases, typing/deletion speeds, and looping.
- Style the typed text block in Webflow and optionally sync other animations using Webflow interactions.
Yes, you can create a text deletion and retyping animation in Webflow using a combination of Webflow interactions and custom code (or by integrating a lightweight typing animation script). Webflow alone doesn't support dynamic typing/toggling character-by-character out of the box, but here's how you can achieve it.
1. Use a Typing Animation Library (Typed.js)
- Typed.js is a popular JavaScript library that mimics typing and deleting text.
- You can include it in Webflow via custom code in Page Settings or using the Embed element.
2. Add Required HTML Elements
- Add a Text Span or Div block where the typed text will appear.
- Example: Set the span’s class as
typed-textto target it via code.
3. Embed Custom Code
- Go to Page Settings > Before </body> tag or use an Embed block within the Designer.
- Include the Typed.js script from a CDN:
```html
<script src="https://cdn.jsdelivr.net/npm/typed.js@2.0.12"></script>
<script>
var typed = new Typed(".typed-text", {
strings: ["First phrase", "Second phrase", "Third phrase"],
typeSpeed: 50,
backSpeed: 30,
loop: true
});
</script>
```
- Modify the
stringsarray to match the phrases you want to animate. - The above settings will simulate typing and deletion in a loop.
4. Style the Typed Text Block
- Style the
.typed-textspan or div using Webflow Designer. - You can add a monospace font or a blinking cursor (add
|as a span after the typed text).
5. Optional: Animate Other Elements in Sync
- Use Webflow interactions to animate other parts of your layout alongside the typing.
- You can delay elements, fade them in/out, or move them based on the Typed.js timing.
Summary
While Webflow doesn’t have native character-by-character deletion/typing, you can create a typing effect with deletion using Typed.js and embedding it into your project. This is the most efficient method to replicate a dynamic text retyping animation.