Animation system

import gsap from "gsap";
import { ScrollTrigger } from "gsap/ScrollTrigger";

gsap.registerPlugin(ScrollTrigger);
ScrollTrigger.config({ ignoreMobileResize: true });

useLayoutEffect(() => {
  const ctx = gsap.context(() => {
    const letters = titleRef.current?.querySelectorAll(".char") || [];
    gsap.set(letters, { y: "120%", rotate: 10, opacity: 0 });
    gsap.set(textWrapperRef.current, { opacity: 0, y: 30 });
    if (buttonsRef.current?.children) {
      gsap.set(Array.from(buttonsRef.current.children), { y: 30, opacity: 0 });
    }
  }, containerRef);

  return () => ctx.revert();
}, []);

<div className="flex overflow-hidden pb-2 md:pb-4" 
     style={{transform: "translateZ(0)", willChange: "transform"}}>
  {"YERAY".split("").map((char, i) => (
    <span key={`first-${i}`} className="char inline-block">{char}</span>
  ))}
</div>
<div className="flex overflow-hidden pb-2 md:pb-4" 
     style={{transform: "translateZ(0)", willChange: "transform"}}>
  {"GARRIDO".split("").map((char, i) => (
    <span key={`last-${i}`} className="char inline-block">{char}</span>
  ))}
</div>

document.fonts.ready.then(() => {
  ctx = gsap.context(() => {
    const tl = gsap.timeline();

    const letters = titleRef.current?.querySelectorAll(".char") || [];
    tl.to(letters, {
      y: "0%",              // Translate from 120% to 0%
      rotate: 0,            // Rotate from 10deg to 0deg
      opacity: 1,           // Fade from 0 to 1
      duration: 1.2,        // 1.2 seconds per letter
      stagger: 0.03,        // 30ms delay between each letter
      ease: "power4.out",   // Aggressive deceleration curve
      delay: 0.2,           // Wait 200ms before starting
    });
  }, containerRef);
});

tl.to(
  textWrapperRef.current,
  { opacity: 1, y: 0, duration: 1, ease: "power3.out" },
  "-=0.8",  // Start 0.8s BEFORE previous animation ends (overlap)
);

tl.to(
  buttonsRef.current?.children || [],
  { y: 0, opacity: 1, duration: 0.8, stagger: 0.1, ease: "power3.out" },
  "-=0.6",  // Start 0.6s BEFORE previous animation ends (overlap)
);

// Promote container to GPU layer BEFORE parallax starts
gsap.set(containerRef.current, { willChange: "transform, opacity" });

gsap.to(containerRef.current, {
  yPercent: 20,        // Translate down 20% of element height
  scale: 0.95,         // Scale to 95% of original size
  opacity: 0.2,        // Fade to 20% opacity
  ease: "none",        // Linear progression (no easing)
  scrollTrigger: {
    trigger: containerRef.current,
    start: "top top",           // When trigger top hits viewport top
    end: "bottom top",          // When trigger bottom hits viewport top
    scrub: 1.5,                 // Smooth out scroll by 1.5 seconds
    invalidateOnRefresh: true,  // Recalculate on window resize
  },
});

requestAnimationFrame(() => {
  requestAnimationFrame(() => {
    ScrollTrigger.refresh();
  });
});

useEffect(() => {
  const io = new IntersectionObserver((entries) => {
    entries.forEach((e) => {
      if (e.isIntersecting) {
        e.target.querySelectorAll('[data-reveal]').forEach((el, i) => {
          (el as HTMLElement).style.transitionDelay = `${i * 0.04}s`;
          el.classList.add('in-view');
        });
        io.unobserve(e.target);  // Stop observing after animation
      }
    });
  }, { threshold: 0.1 });  // Trigger when 10% visible
  if (gridRef.current) io.observe(gridRef.current);
  return () => io.disconnect();
}, []);

useEffect(() => {
  const io = new IntersectionObserver((entries) => {
    entries.forEach((e) => {
      if (e.isIntersecting) { 
        e.target.classList.add('in-view'); 
        io.unobserve(e.target); 
      }
    });
  }, { threshold: 0.1 });
  sectionRef.current?.querySelectorAll('[data-reveal]').forEach((el) => io.observe(el));
  return () => io.disconnect();
}, []);

(el as HTMLElement).style.transitionDelay = `${i * 0.04}s`;
el.classList.add('in-view');

[data-reveal] {
  opacity: 0;
  transition-property: opacity, transform;
  transition-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
  transition-duration: 0.7s;
  will-change: opacity, transform;
  backface-visibility: hidden;  /* Prevent font anti-aliasing shift */
}

[data-reveal="up"] {
  transform: translate3d(0, 40px, 0);
}

[data-reveal].in-view {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

<div key={i} data-reveal="up" style={{transitionDelay:`${i*0.1}s`}}>
  {/* Timeline item content */}
</div>

const lenis = new Lenis({
  duration: 1.2,     // Scroll animation duration
  easing: (t) => Math.min(1, 1.001 - Math.pow(2, -10 * t)),
  smoothWheel: true,
});

lenis.on("scroll", ScrollTrigger.update);

const rafFn = (time: number) => lenis.raf(time * 1000);
gsap.ticker.add(rafFn);
gsap.ticker.lagSmoothing(0);

<div
  className="flex-1 overflow-y-auto modal-scroll"
  data-lenis-prevent="true"  // Disable Lenis for this element
>
  {/* Modal content */}
</div>