Easy Letter & Word Animations in Webflow

Have you ever seen those super-cool letter-by-letter reveal animations that some sites greets you with when loading a new page?

Or maybe a full paragraph of words that pops up one by one when scrolling into a new section?

Well, I have.

And I’ve also struggled to find a simple way of creating these types of animations in Webflow.

That’s why I created Wordplay.js — a super-small Javascript library that lets you create both letter-by-letter or word-by-word animations in just a few seconds.

Wordplay

The interface in the gif above can be found over at my site. It lets you play around with its settings and gives you all instructions needed to implement it into your own sites.

However, let’s go through some details here as well.

Import

You can import Wordplay directly through its CDN.

<script src=”https://cdn.jsdelivr.net/gh/robingranqvist/wordplay@1.1.0/script.js"></script>

(Please note that v.1.1.0 is the current version as of May, 2024)

Initialization

We’ll have to make sure that the DOM of the web page is fully loaded before initializating Wordplay.

document.addEventListener("DOMContentLoaded", () => {
  new WordPlay({
    className: "wordplay",
    mode: "letter",
    offset: 100,
    speed: 0.5,
    delay: 0.025,
  });
});

Modes

Wordplay has two modes: “letter” and “word”. These are pretty self-explanatory. The letter mode staggers each letter of every word in a paragraph, and the word mode staggers each word. Simple.

Class Name

The className option is the class name of whatever text element you want to stagger. All elements that shares this class will be animated.

Please note that Webflow format spaces as dashes and upper case letters as lower case. A class of Display Heading should be set as display-heading.

Speed

The speed option determines the speed of each word/letter being revealed. It’s sets the time between each word/letter, so a “higher” speed will create a slower reveal, while a lower speed makes it faster.

Delay

The delay option sets a delay between the reveal of each word/letter.

Offset

The offset is used for when you want to trigger an animation based on scroll position. It offsets the position of how close to the target element a visitor needs to scroll before the animation is triggered.

With an offset of 0, the animation is triggered as soon as the element enters the page. With a higher offset the animation is triggered when the element is a bit higher up on the screen.

Multiple instances

You can use as many instances of Wordplay as you want on a single page. Just make sure you create a unique instance (initialization) for each new class you want to animate.

Thank you

Feel free to check out this video for Wordplay that I recorded yesterday to see it in action. Also, feel free to check out my Webflow templates on the marketplace.