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:
Satyam
2026-02-14 22:54:57 +05:30
parent 6d3b1c231a
commit e88e1e4da5
5 changed files with 230 additions and 52 deletions
+59
View File
@@ -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}</>;
}