Motion Core

Typography

Split Hover

A text effect that splits characters and animates stacked layers on hover for a seamless swap.

gsap

Installation

Install the component

Run the following command to install the component and its dependencies: 
npx @motion-core/cli add split-hover
npx @motion-core/cli add split-hover
pnpm dlx @motion-core/cli add split-hover
pnpm dlx @motion-core/cli add split-hover
bunx @motion-core/cli add split-hover
bunx @motion-core/cli add split-hover
yarn dlx @motion-core/cli add split-hover
yarn dlx @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 

<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>

<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
HTMLElementnull null
class
string ""