DEV Community

loading...

Simple Text Revealer

lemmin
・1 min read

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).

Discussion (0)