Text

Stacking Words

Splits text into lines and slides each line's words in from the right on scroll. Framework-agnostic Custom Element.

Preview

↓ Scroll to reveal

Hell yeah!

Each line's words slide in from the right as you scroll. Scroll the preview below.

Attributes

Installation

pnpm dlx motion-blocks add stacking-words

npx motion-blocks add stacking-words

bunx --bun motion-blocks add stacking-words

yarn dlx motion-blocks add stacking-words

Usage

---import "@/components/motion-blocks/stacking-words-element.ts";--- <motion-stacking-words  text="Every word arrives on its own."  start="top 90%"  end="top 30%"></motion-stacking-words>

import "@/components/motion-blocks/stacking-words-element.ts"; export default function Page() {  return (    <motion-stacking-words      text="Every word arrives on its own."      start="top 90%"      end="top 30%"    />  );}

<script setup>import "@/components/motion-blocks/stacking-words-element.ts";</script> <template>  <motion-stacking-words    text="Every word arrives on its own."    start="top 90%"    end="top 30%"  /></template>

<script>  import "@/components/motion-blocks/stacking-words-element.ts";</script> <motion-stacking-words  text="Every word arrives on its own."  start="top 90%"  end="top 30%"/>

<script type="module" src="/components/motion-blocks/stacking-words-element.js"></script> <motion-stacking-words  text="Every word arrives on its own."  start="top 90%"  end="top 30%"></motion-stacking-words>

API Reference

Attribute	Type	Default
`text`	`string`	`""`
`start`	`string`	`"top 90%"`
`end`	`string`	`"top 30%"`
`scrub`	`number`	`1.234`
`stagger`	`number`	`0.21`
`ease`	`string`	`"power3.out"`
`scroll-element`	`string`	`""`