@shuheen/smooth-scroller
v1.0.2
Published
A React wrapper using GSAP and smooth-scrollbar to get the Customizable smooth page scroll.
Downloads
31
Maintainers
Readme
@shuheen/smooth-scroller
A lightweight smooth scrolling wrapper for React, using gsap
and smooth-scrollbar
for fluid animations and scroll effects. This package simplifies the integration of smooth scrolling and scroll-triggered animations in your React projects.
Features
- Smooth Scrolling: Powered by
smooth-scrollbar
, delivering silky-smooth scrolling experience. - Scroll Animations: Seamless integration with
gsap
for scroll-triggered animations. - Customizable: Easily tweak scroll behavior and customize to your project's needs.
- React Support: Works out-of-the-box with React functional components.
Installation
To install the package, use npm or yarn:
npm install @shuheen/smooth-scroller gsap smooth-scrollbar
or
yarn add @shuheen/smooth-scroller gsap smooth-scrollbar
Usage
First, wrap your content with the SmoothScroller
component provided by the package:
import React from 'react';
import SmoothScroller from '@shuheen/smooth-scroller';
const App: React.FC = () => {
return (
<SmoothScroller>
<div className="scroller">
<h1>Welcome to the Smooth Scroller!</h1>
<p>Your content goes here...</p>
</div>
</SmoothScroller>
);
};
export default App;
CSS
To ensure proper scrolling behavior, add the following CSS to your main stylesheet after installation:
.scroller {
height: 100vh;
overflow-x: hidden;
}
Props
children
: The content or elements that need smooth scrolling functionality.options?
: A partial object of type ScrollbarOptions to customize scroll behavior. This can include properties like damping, speed, and renderByPixels.onScroll?
: A callback function triggered on every scroll event, receiving the scrollBarInstance and current status (position, velocity, etc.).
Example
import React from 'react';
import SmoothScroller from '@shuheen/smooth-scroller';
const Example: React.FC = () => {
return (
<SmoothScroller>
<div className="scroller">
<h1>Smooth Scroll Example</h1>
<p>
This is an example of how smooth scrolling works with GSAP animations.
</p>
{/* Add more content */}
</div>
</SmoothScroller>
);
};
export default Example;
Options
For additional options and customization, refer to the smooth-scrollbar documentation.
TypeScript Support
This package is fully typed for TypeScript projects. Here’s how you would use it in a TypeScript project:
import React from 'react';
import SmoothScroller from '@shuheen/smooth-scroller';
const App: React.FC = () => (
<SmoothScroller>
<div className="scroller">
<h1>Smooth Scroll with TypeScript</h1>
</div>
</SmoothScroller>
);
export default App;
Contributing
If you'd like to contribute to this package, feel free to fork the repository, make your changes, and submit a pull request. We welcome contributions that improve functionality, fix bugs, or enhance performance.
- Fork the repository
- Create a feature branch (
git checkout -b feature/your-feature
) - Commit your changes (
git commit -m 'Add some feature'
) - Push to the branch (
git push origin feature/your-feature
) - Open a pull request
License
This project is licensed under the MIT License. See the LICENSE file for more details.