Text Slide

An effect component that applies sliding animations to alphanumeric strings when mounted.

Hover me

Compound Version

If you need more control over the children, you can use the compound version of the component.

Hover me 1

Use the group/text-slide class to apply the text slide effect within other components.

globals.css


:root {
  --ex-text-slide-delay: 0;
  --ex-text-slide-ease: var(--ease-out);
  --ex-text-slide-duration: 200ms;
}

Element	Selector
`TextSlide`	`.ex-text-slide`

Prop	Type	Default
`as`	`ElementType`	`div`
`asChild`	`boolean`	`false`

Element	Selector
`TextSlide.Track`	`.ex-text-slide-track`

Prop	Type	Default
`as`	`ElementType`	`div`
`asChild`	`boolean`	`false`

Element	Selector
`TextSlide.Item`	`.ex-text-slide-item`

Prop	Type	Default
`as`	`ElementType`	`div`
`asChild`	`boolean`	`false`