feat: implement Lenis smooth scroll and animated stat counters
- Add Lenis smooth scroll library (Landing page only) - Create SmoothScroll wrapper component with GSAP integration - Implement animated stat counters with scroll-triggered count-up - Add GSAP animations for stats section (40%, 5yrs, 15m) - Update package.json with lenis dependency
This commit is contained in:
@@ -0,0 +1,59 @@
|
||||
import { useEffect } from 'react';
|
||||
import { useLocation } from 'react-router-dom';
|
||||
import Lenis from 'lenis';
|
||||
import { gsap } from 'gsap';
|
||||
import { ScrollTrigger } from 'gsap/ScrollTrigger';
|
||||
|
||||
gsap.registerPlugin(ScrollTrigger);
|
||||
|
||||
/**
|
||||
* SmoothScroll - Conditional Lenis smooth scroll wrapper
|
||||
*
|
||||
* Provides buttery-smooth momentum scrolling for the Landing page only.
|
||||
* Integrates seamlessly with GSAP ScrollTrigger animations.
|
||||
*
|
||||
* Usage: Wrap your app routes with <SmoothScroll>
|
||||
*/
|
||||
export default function SmoothScroll({ children }) {
|
||||
const location = useLocation();
|
||||
|
||||
// Only enable smooth scroll on Landing page
|
||||
const isLandingPage = location.pathname === '/';
|
||||
|
||||
useEffect(() => {
|
||||
// Skip initialization if not on Landing page
|
||||
if (!isLandingPage) return;
|
||||
|
||||
// Initialize Lenis with optimal settings
|
||||
const lenis = new Lenis({
|
||||
duration: 1.2, // Scroll duration (higher = smoother but slower)
|
||||
easing: (t) => Math.min(1, 1.001 - Math.pow(2, -10 * t)), // Easing function
|
||||
orientation: 'vertical', // Vertical scrolling
|
||||
gestureOrientation: 'vertical',
|
||||
smoothWheel: true, // Smooth mouse wheel scrolling
|
||||
wheelMultiplier: 1, // Mouse wheel sensitivity
|
||||
smoothTouch: false, // Disable on touch devices (better native feel)
|
||||
touchMultiplier: 2,
|
||||
infinite: false,
|
||||
});
|
||||
|
||||
// Integrate Lenis with GSAP ScrollTrigger
|
||||
lenis.on('scroll', ScrollTrigger.update);
|
||||
|
||||
// Add Lenis to GSAP ticker for smooth updates
|
||||
gsap.ticker.add((time) => {
|
||||
lenis.raf(time * 1000); // Convert GSAP time to milliseconds
|
||||
});
|
||||
|
||||
// Disable GSAP's lag smoothing to prevent conflicts
|
||||
gsap.ticker.lagSmoothing(0);
|
||||
|
||||
// Cleanup on unmount or route change
|
||||
return () => {
|
||||
lenis.destroy();
|
||||
gsap.ticker.remove(lenis.raf);
|
||||
};
|
||||
}, [isLandingPage]); // Re-run when route changes
|
||||
|
||||
return <>{children}</>;
|
||||
}
|
||||
Reference in New Issue
Block a user