Scroll and Swap Text
A text component that swaps the letters vertically on scroll.
SCROLL SLOWLY
Source code
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 framer-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 framer's documentation for more details.
Make sure that the container has a non-static position, like relative, fixed, or absolute to ensure scroll offset is calculated correctly.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| label* | string | - | The text to be displayed and animated |
| containerRef * | React.RefObject<HTMLSpanElement> | - | Reference to the container element for scroll tracking |
| offset | [string, string] | ["0 0", "0 1"] | The scroll offset range for the animation |
| className | string | - | Additional CSS classes for styling |