DEV Community

lemmin
lemmin

Posted on

2

Simple Text Revealer

All text nodes in the provided container will be parsed and added back into the DOM with a wrapping span (by letter or word) including classes that describe the hidden and revealed styles (and transition).

Any transition you can think of can be used to animate each individual letter or word in sequence (doesn't even need to be a reveal).

The reveal() method returns a promise that resolves when all the text has transitioned. This demo uses the promises to chain the reveal animations together.

You can use reset() or replay() to run the animation again. The transitions will apply when resetting as well (all at once).

Top comments (0)

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay