React Scroll Text Highlighter

A React component that creates a smooth text highlighting animation triggered by scroll position using GSAP.

Demo example

Installation

npm install react-scroll-text-highlighter

Requirements

This package requires the following peer dependencies:

React >= 16.8.0
GSAP >= 3.13.0

Usage

import TextHighlight from "react-scroll-text-highlighter";

function App() {
  return (
    <h1>
      Check this:
      <TextHighlight textColor="#000000" highlightColor="#ffeb3b">
        This text will be highlighted on scroll
      </TextHighlight>
      This text will not.
    </h1>
  );
}

Props

Prop	Type	Default	Description
`textColor`	`string`	`#FFFFFF`	Color of the text
`highlightColor`	`string`	`#6D00C7`	Color of the highlight effect
`start`	`string`	`bottom 98%`	GSAP ScrollTrigger start position
`end`	`string`	`bottom 65%`	GSAP ScrollTrigger end position

Example Project

Check out the example-project directory for a complete working example using Next.js.

To run the example:

# Clone the repository
git clone https://github.com/pablo-zafra/npm-react-scroll-text-highlighter.git

# Install dependencies
npm install

# Link the package locally
npm link

# Move to example project
cd example-project

# Install dependencies
npm install

# Link to local package
npm link react-scroll-text-highlighter

# Run the development server
npm run dev

License

Contributing

Contributions, issues and feature requests are welcome. Feel free to check issues page if you want to contribute.

Made with ❤️ by Pablo Zafra. ⭐ Star this repository if you like it!

Package detail

react-scroll-text-highlighter

readme