Word by Word Animation Video Tutorial

In this tutorial I suggest you discover how to create a title appearance effect word by word.

Principle of animation

Animation is not necessarily the most complex aspect of this video. We will start by surrounding each word with 2 elements.

• The first element will serve as a mask and will allow us to give a text appearance effect.
• The second element will be used to create the slide animation using a translation on the Y axis.

Separate words

The heart of the problem here is to separate the different words from the title. Here, several approaches are possible but we will start with a manipulation of the DOM in order to keep the elements and event listeners already present. We start by browsing the set of children of the element in search of text type elements. We then replace these elements with a series of and spaces.