Instruction

<script src="https://unpkg.com/lenis@1.3.4/dist/lenis.min.js"></script>

<script>
// Initialize Lenis with better settings
const lenis = new Lenis({
  duration: 1, // Animation duration in seconds
  easing: (t) => Math.min(1, 1.001 - Math.pow(2, -10 * t)), // Smooth easing
  direction: 'vertical', // vertical, horizontal
  gestureDirection: 'vertical', // vertical, horizontal, both
  smooth: true,
  mouseMultiplier: 1,
  smoothTouch: false, // Disable on touch devices if you prefer
  touchMultiplier: 2,
  infinite: false,
});

// Sync with ScrollTrigger if you're using GSAP animations
lenis.on('scroll', ScrollTrigger.update);

// Add scroll event listeners for any custom behaviors
lenis.on('scroll', (e) => {
  console.log(e); // Remove this in production
});

// RAF function
function raf(time) {
  lenis.raf(time);
  requestAnimationFrame(raf);
}

requestAnimationFrame(raf);

// Force Lenis to recalculate on resize
window.addEventListener('resize', () => {
  lenis.resize();
});

// Handle hash links (anchor links)
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
  anchor.addEventListener('click', function (e) {
    e.preventDefault();
    const targetId = this.getAttribute('href');
    if (targetId === '#') return;
    
    const targetElement = document.querySelector(targetId);
    if (targetElement) {
      lenis.scrollTo(targetElement, {
        offset: -100, // Adjust offset if you have fixed header
        duration: 1.2
      });
    }
  });
});
</script>