Scroll and Swap Text
A text component that swaps the letters vertically on scroll.
SCROLL SLOWLY
Installation
1pnpm dlx shadcn@latest add "https://fancycomponents.dev/r/scroll-and-swap-text.json"
Understanding the component
The trick here is similar to the Letter Swap Hover component—duplicate the text, then wrapping the them in a container with relative position, then stack the elements vertically. We use useScroll hook from motion to track the scroll position of the container, and use the scrollYProgress value to offset the vertical position of the elements (by setting the y property of the element).
Notes
-
In order to achieve a nice effect, you likely have to play with the container (where to track the scroll) and its offset. Please refer to motion's documentation for more details.
-
Make sure that the container has a non-static position, like
relative,fixed, orabsoluteto ensure scroll offset is calculated correctly.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| children* | React.ReactNode | - | The content to be displayed and animated |
| as | ElementType | "span" | HTML Tag to render the component as |
| containerRef* | React.RefObject<HTMLElement> | - | Reference to the container element for scroll tracking |
| offset | [string, string] | ["0 0", "0 1"] | Offset configuration for when the animation should start and end relative to the scroll container |
| className | string | - | Additional CSS classes for styling the component |
| springConfig | { stiffness?: number, damping?: number, mass?: number } | { stiffness: 200, damping: 30 } | Spring animation configuration for smoothing the scroll-based animation |