Creating a Sequence of Messages Using Appear and Text Effects

First, we select a row and add a standard appear effect. We set an offset Y of 20 pixels and adjust the damping to 25.

Adding and Customizing Text Effects

Next, we select the text within the row, head over to the effects panel, and choose the text option. This brings up the new text effect panel, which includes a preview that can be clicked to replay the animation. Below the preview, we find effect triggers such as appear, layer in view, and section in view. We keep the trigger set to appear.

Exploring Presets and Animation Options

Text effects come with a variety of presets, showing different combinations of properties to create unique effects. We can animate each character, word, line in a paragraph, or unique elements like headings versus paragraphs. For our first message, we animate each line and add a small delay to let part of the appear animation play out first.

Fine-Tuning the Text Effects

We can customize the effect by adjusting properties such as scale and blur. An inline preview allows us to see changes in real-time. We set the blur and offset Y to five pixels each. Once satisfied, we preview the entire page to ensure everything looks good.

Creating an Entire Sequence of Messages

Using this method, we create an entire sequence of message bubbles by adding delays to the appear and text effects and customizing each text effect. Combining these, we use the new text effect feature to design animated sequences.

Adapting for Mobile with Scroll Animation

For mobile designs where messages appear below the fold, we switch triggers from appear to layer in view. We select the row, convert the appear effect to a scroll animation, and set the text layer's trigger to layer in view. This ensures each message animates into view as we scroll past it.