2. Main text elements

The main text elements transition into view one word at a time. To generate this effect, we'll create a component set with a pair of variants for each word, one for the "hidden" state and one for the "shown" state, with an interaction established between them.

Create component set from pair of identical text columns

Create individual text elements for each word in the design, organized in a single column . Set the font size, duplicate the column, then create a component set from both columns by selecting "Create component set" from the design panel.

Set "Shown" variant property & hide text elements in first column

With the main component selected, create a new variant property called "Shown" and set the value to True. Then select the first column of your design and set the "Shown" property to "False" by creating a new value.

With the variants in the hidden column is still selected, navigate down one level in the layer tree to the text elements by pressing enter button and set the opacity value in the Appearance section to 0%. This will hide the element from view.

Establish interaction between hidden & shown variants

Select the first column of "hidden" variants, open the Prototype panel and create a new interaction.

Set the trigger to after-delay, the action to change-to, then set the "Shown" toggle to true (variant property you created above).

This will automatically establish a connection from the hidden to the shown variants. Set the Animation type to smart animate, curve to ease in, and the duration to 300ms.

Don't worry about the after-delay duration yet, we'll configure start timing for all the elements at once as the last step.