Split Text: Wavy

Introduction

The Split Text: Wavy example shows how to create a wavy text animation where individual characters move up and down in a wave pattern. This example uses the splitText function from Motion+ to break text into individual characters, the animate function to create repeating animations, and the stagger function to create a sequential delay that produces the wave effect.

Motion+ is a premium add-on library that extends Motion with advanced features like text splitting. The splitText function automatically splits text into individual characters, words, or lines and wraps them in elements that can be animated independently.

Get started

Let's start with the basic HTML structure. We'll create a container with a heading that includes a span with the wavy class around the text we want to animate:

<div class="container">
    <h1 class="h1">That&rsquo;s <span class="wavy">waaaavy</span>.</h1>
</div>

<script type="module">
    // We'll add our JavaScript here
</script>

<style>
    /** Copy styles from example source code */
</style>

Notice that the container starts hidden with visibility: hidden. We'll make it visible once the text is split and ready to animate. This prevents a flash of unstyled content.

The .split-char class will be automatically applied to each character by the splitText function. We add will-change: transform, opacity to optimize rendering performance for the animated characters.