A text component that swaps the letters vertically on hover.
motion-sv
Hover me chief! H Ho ov ve er r m me e c ch hi ie ef f! ! Awesome! A Aw we es so om me e! ! Good day! G Go oo od d d da ay y! ! More text? M Mo or re e t te ex xt t? ? oh, seriously?! o oh h, , s se er ri io ou us sl ly y? ?! !
There are two types of animations available for this component:
- Forward animation — plays the animation timeline once forward, when you hover over the text.
- Ping Pong animation — plays the animation timeline in a ping pong fashion. It plays once forward when you hover over the text, and once in the opposite direction when you hover away from the text.
Installation
Forward Animation
pnpm dlx shadcn-svelte@latest add http://sveltekit-prerender/f/letter-swap.json
Install dependencies
Install the required packages for this component:
pnpm add motion-sv
Copy the Source Code
Copy and paste the following code into your project:
letter-swap.svelte
index.ts
Folder Structure
Folder Structure
Ping Pong Animation
pnpm dlx shadcn-svelte@latest add http://sveltekit-prerender/f/letter-swap-ping-pong.json
Install dependencies
Install the required packages for this component:
pnpm add motion-sv
Copy the Source Code
Copy and paste the following code into your project:
letter-swap-ping-pong.svelte
index.ts
Folder Structure
Folder Structure
Visit Original Docs
For more deeper understaing visit fancy components documentation.
Examples
Stagger From
First F Fi ir rs st t Center C Ce en nt te er r Last L La as st t
Line Swap
By setting the staggerDelay prop to zero, you can create a line swap effect.
oh, wow! o oh h, , w wo ow w! ! nice! n ni ic ce e! !
Ping Pong
First F Fi ir rs st t Center C Ce en nt te er r Last L La as st t