Motion Core

Split Hover

SplitHover animates text by splitting characters and staggering them out/in with GSAP. Hovering reveals a cloned layer that rises from below, creating a seamless "text swap" effect.

Installation

Install the component

Run the following command to install the component and its dependencies:
npx @motion-core/cli add split-hover

Import the component

Import the component into your Svelte file: 
import { SplitHover } from "$lib/motion-core";
import { SplitHover } from "$lib/motion-core";

Usage

Orbit the future 
<script lang="ts">
	import { SplitHover } from "motion-core";

	let hoverTarget = $state<HTMLElement | null>(null);
</script>

<a bind:this={hoverTarget} class="text-lg font-medium" href="/docs/split-hover">
	<SplitHover {hoverTarget}>Orbit the future</SplitHover>
</a>

Props

SplitHover

PropTypeDefault
hoverTarget
HTMLElement | null null
class
string ""