Split Text: Scatter

Introduction

The Split Text: Scatter example shows how to create a dynamic text animation where individual characters scatter away from the pointer based on its movement speed and direction. This uses three Motion APIs: the splitText function from Motion+ to break text into individual characters, the hover function to detect when the pointer moves over each character, and the animate function to create smooth spring animations.

The splitText function automatically splits text into characters or words, making it easy to animate each piece independently. Combined with Motion's gesture detection and animation functions, we can create sophisticated interactive effects with minimal code.

Get started

Let's start with the basic HTML structure and styles:

<div class="container">
    <h1 class="h1">Move your pointer over the text to scatter.</h1>
</div>

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

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

The .split-char class is automatically applied by splitText to each character. We set will-change to hint to the browser that these elements will be animated.