Image flickering problem in ScrollStack of tsx and tailwind version

[ronishpaudel]

`import React, { ReactNode, useLayoutEffect, useRef, useCallback } from "react";
import Lenis from "lenis";

export interface ScrollStackItemProps {
itemClassName?: string;
children: ReactNode;
}

export const ScrollStackItem: React.FC = ({
children,
itemClassName = "",
}) => (

{children}

);

interface ScrollStackProps {
className?: string;
children: ReactNode;
itemDistance?: number;
itemScale?: number;
itemStackDistance?: number;
stackPosition?: string;
scaleEndPosition?: string;
baseScale?: number;
scaleDuration?: number;
rotationAmount?: number;
blurAmount?: number;
useWindowScroll?: boolean;
onStackComplete?: () => void;
}

const ScrollStack: React.FC = ({
children,
className = "",
itemDistance = 100,
itemScale = 0.03,
itemStackDistance = 30,
stackPosition = "20%",
scaleEndPosition = "10%",
baseScale = 0.85,
scaleDuration = 0.5,
rotationAmount = 0,
blurAmount = 0,
useWindowScroll = false,
onStackComplete,
}) => {
const scrollerRef = useRef(null);
const stackCompletedRef = useRef(false);
const animationFrameRef = useRef<number | null>(null);
const lenisRef = useRef<Lenis | null>(null);
const cardsRef = useRef<HTMLElement[]>([]);
const lastTransformsRef = useRef(new Map<number, any>());
const isUpdatingRef = useRef(false);

const calculateProgress = useCallback(
(scrollTop: number, start: number, end: number) => {
if (scrollTop < start) return 0;
if (scrollTop > end) return 1;
return (scrollTop - start) / (end - start);
},
[]
);

const parsePercentage = useCallback(
(value: string | number, containerHeight: number) => {
if (typeof value === "string" && value.includes("%")) {
return (parseFloat(value) / 100) * containerHeight;
}
return parseFloat(value as string);
},
[]
);

const getScrollData = useCallback(() => {
if (useWindowScroll) {
return {
scrollTop: window.scrollY,
containerHeight: window.innerHeight,
scrollContainer: document.documentElement,
};
} else {
const scroller = scrollerRef.current;
return {
scrollTop: scroller ? scroller.scrollTop : 0,
containerHeight: scroller ? scroller.clientHeight : 0,
scrollContainer: scroller,
};
}
}, [useWindowScroll]);

const getElementOffset = useCallback(
(element: HTMLElement) => {
if (useWindowScroll) {
const rect = element.getBoundingClientRect();
return rect.top + window.scrollY;
} else {
return element.offsetTop;
}
},
[useWindowScroll]
);

const updateCardTransforms = useCallback(() => {
if (!cardsRef.current.length || isUpdatingRef.current) return;

isUpdatingRef.current = true;

const { scrollTop, containerHeight, scrollContainer } = getScrollData();
const stackPositionPx = parsePercentage(stackPosition, containerHeight);
const scaleEndPositionPx = parsePercentage(
  scaleEndPosition,
  containerHeight
);

const endElement = useWindowScroll
  ? (document.querySelector(".scroll-stack-end") as HTMLElement | null)
  : (scrollerRef.current?.querySelector(
      ".scroll-stack-end"
    ) as HTMLElement | null);

const endElementTop = endElement ? getElementOffset(endElement) : 0;

cardsRef.current.forEach((card, i) => {
  if (!card) return;

  const cardTop = getElementOffset(card);
  const triggerStart = cardTop - stackPositionPx - itemStackDistance * i;
  const triggerEnd = cardTop - scaleEndPositionPx;
  const pinStart = cardTop - stackPositionPx - itemStackDistance * i;
  const pinEnd = endElementTop - containerHeight / 2;

  const scaleProgress = calculateProgress(
    scrollTop,
    triggerStart,
    triggerEnd
  );
  const targetScale = baseScale + i * itemScale;
  const scale = 1 - scaleProgress * (1 - targetScale);
  const rotation = rotationAmount ? i * rotationAmount * scaleProgress : 0;

  let blur = 0;
  if (blurAmount) {
    let topCardIndex = 0;
    for (let j = 0; j < cardsRef.current.length; j++) {
      const jCardTop = getElementOffset(cardsRef.current[j]);
      const jTriggerStart =
        jCardTop - stackPositionPx - itemStackDistance * j;
      if (scrollTop >= jTriggerStart) {
        topCardIndex = j;
      }
    }

    if (i < topCardIndex) {
      const depthInStack = topCardIndex - i;
      blur = Math.max(0, depthInStack * blurAmount);
    }
  }

  let translateY = 0;
  const isPinned = scrollTop >= pinStart && scrollTop <= pinEnd;

  if (isPinned) {
    translateY =
      scrollTop - cardTop + stackPositionPx + itemStackDistance * i;
  } else if (scrollTop > pinEnd) {
    translateY = pinEnd - cardTop + stackPositionPx + itemStackDistance * i;
  }

  const newTransform = {
    translateY: Math.round(translateY * 100) / 100,
    scale: Math.round(scale * 1000) / 1000,
    rotation: Math.round(rotation * 100) / 100,
    blur: Math.round(blur * 100) / 100,
  };

  const lastTransform = lastTransformsRef.current.get(i);
  const hasChanged =
    !lastTransform ||
    Math.abs(lastTransform.translateY - newTransform.translateY) > 0.1 ||
    Math.abs(lastTransform.scale - newTransform.scale) > 0.001 ||
    Math.abs(lastTransform.rotation - newTransform.rotation) > 0.1 ||
    Math.abs(lastTransform.blur - newTransform.blur) > 0.1;

  if (hasChanged) {
    const transform = `translate3d(0, ${newTransform.translateY}px, 0) scale(${newTransform.scale}) rotate(${newTransform.rotation}deg)`;
    const filter =
      newTransform.blur > 0 ? `blur(${newTransform.blur}px)` : "";

    card.style.transform = transform;
    card.style.filter = filter;

    lastTransformsRef.current.set(i, newTransform);
  }

  if (i === cardsRef.current.length - 1) {
    const isInView = scrollTop >= pinStart && scrollTop <= pinEnd;
    if (isInView && !stackCompletedRef.current) {
      stackCompletedRef.current = true;
      onStackComplete?.();
    } else if (!isInView && stackCompletedRef.current) {
      stackCompletedRef.current = false;
    }
  }
});

isUpdatingRef.current = false;

}, [
itemScale,
itemStackDistance,
stackPosition,
scaleEndPosition,
baseScale,
rotationAmount,
blurAmount,
useWindowScroll,
onStackComplete,
calculateProgress,
parsePercentage,
getScrollData,
getElementOffset,
]);
const isAnimating = useRef(false);

const handleScroll = useCallback(() => {
if (!isAnimating.current) {
isAnimating.current = true;
requestAnimationFrame(() => {
updateCardTransforms();
isAnimating.current = false;
});
}
}, [updateCardTransforms]);

const setupLenis = useCallback(() => {
if (useWindowScroll) {
const lenis = new Lenis({
duration: 1.2,
easing: (t) => Math.min(1, 1.001 - Math.pow(2, -10 * t)),
smoothWheel: true,
touchMultiplier: 2,
infinite: false,
wheelMultiplier: 1,
lerp: 0.1,
syncTouch: true,
syncTouchLerp: 0.075,
});
lenis.on("scroll", handleScroll);

  const raf = (time: number) => {
    lenis.raf(time);
    animationFrameRef.current = requestAnimationFrame(raf);
  };
  animationFrameRef.current = requestAnimationFrame(raf);

  lenisRef.current = lenis;
  return lenis;
} else {
  const scroller = scrollerRef.current;
  if (!scroller) return;

  const lenis = new Lenis({
    wrapper: scroller,
    content: scroller.querySelector(".scroll-stack-inner") as HTMLElement,
    duration: 1.2,
    easing: (t) => Math.min(1, 1.001 - Math.pow(2, -10 * t)),
    smoothWheel: true,
    touchMultiplier: 2,
    infinite: false,
    gestureOrientation: "vertical",
    wheelMultiplier: 1,
    lerp: 0.1,
    syncTouch: true,
    syncTouchLerp: 0.075,
  });

  lenis.on("scroll", handleScroll);

  const raf = (time: number) => {
    lenis.raf(time);
    animationFrameRef.current = requestAnimationFrame(raf);
  };
  animationFrameRef.current = requestAnimationFrame(raf);

  lenisRef.current = lenis;
  return lenis;
}

}, [handleScroll, useWindowScroll]);

useLayoutEffect(() => {
if (!useWindowScroll && !scrollerRef.current) return;

const cards = Array.from(
  useWindowScroll
    ? document.querySelectorAll(".scroll-stack-card")
    : (scrollerRef.current?.querySelectorAll(".scroll-stack-card") ?? [])
) as HTMLElement[];
cardsRef.current = cards;
const transformsCache = lastTransformsRef.current;
cards.forEach((card, i) => {
  if (i < cards.length - 1) {
    card.style.marginBottom = `${itemDistance}px`;
  }

  card.style.willChange = "transform";
  card.style.transformOrigin = "top center";
  card.style.backfaceVisibility = "hidden";
  card.style.transform = "translateZ(0)";
  card.style.webkitTransform = "translateZ(0)";
  card.style.perspective = "1000px";
  card.style.webkitPerspective = "1000px";
});

setupLenis();

updateCardTransforms();

return () => {
  if (animationFrameRef.current) {
    cancelAnimationFrame(animationFrameRef.current);
  }
  if (lenisRef.current) {
    lenisRef.current.destroy();
  }
  stackCompletedRef.current = false;
  cardsRef.current = [];
  transformsCache.clear();
  isUpdatingRef.current = false;
};

}, [
itemDistance,
itemScale,
itemStackDistance,
stackPosition,
scaleEndPosition,
baseScale,
scaleDuration,
rotationAmount,
blurAmount,
useWindowScroll,
onStackComplete,
setupLenis,
updateCardTransforms,
]);

return (
<div
className={relative w-full h-full overflow-y-auto overflow-x-visible ${className}.trim()}
ref={scrollerRef}
style={{
overscrollBehavior: "contain",
WebkitOverflowScrolling: "touch",
scrollBehavior: "smooth",
WebkitTransform: "translateZ(0)",
transform: "translateZ(0)",
willChange: "scroll-position",
}}
>

{children}
{/* Spacer so the last pin can release cleanly */}

);
};

export default ScrollStack;`

this is my scrollstack version and not much issue and im using it to display image in here "use client";

`import React from "react";
import ScrollStack, { ScrollStackItem } from "./ScrollStack";
import { Button } from "./ui/button";
import { ArrowRight } from "lucide-react";
import Image from "next/image";

export const ImageStack: React.FC<{ className?: string }> = ({ className }) => {
return (

Start Learning Today

Master every part of React and Next.js

Learn the tools companies actually hire for with real-world projects,
step-by-step guidance, and zero confusion.

Start Building Free Today

<Image
src="/static/img/pic1.jpeg"
alt="React Course Preview"
className="object-cover shadow-lg"
width={1920}
height={1080}
style={{
transform: "translateZ(0)",
backfaceVisibility: "hidden",
willChange: "transform",
borderRadius: "40px",
}}
priority
/>

      <ScrollStackItem itemClassName="bg-gradient-to-br from-blue-50 to-indigo-100 dark:from-blue-900/20 dark:to-indigo-900/20 border border-blue-200 dark:border-blue-800 rounded-[40px] shadow-lg">
        <div
          className="relative w-full h-screen overflow-hidden"
          style={{
            transform: "translateZ(0)",
            backfaceVisibility: "hidden",
            willChange: "transform",
            borderRadius: "40px",
          }}
        >
          <Image
            src="/static/img/pic2.jpeg"
            alt="React Course Preview"
            className="object-cover shadow-lg"
            width={1920}
            height={1080}
            style={{
              transform: "translateZ(0)",
              backfaceVisibility: "hidden",
              willChange: "transform",
              borderRadius: "40px",
            }}
            priority
          />
        </div>
      </ScrollStackItem>

      <ScrollStackItem itemClassName="bg-gradient-to-br from-blue-50 to-indigo-100 dark:from-blue-900/20 dark:to-indigo-900/20 border border-blue-200 dark:border-blue-800 rounded-[40px] shadow-lg">
        <div
          className="relative w-full h-screen overflow-hidden"
          style={{
            transform: "translateZ(0)",
            backfaceVisibility: "hidden",
            willChange: "transform",
            borderRadius: "40px",
          }}
        >
          <Image
            src="/static/img/pic3.jpeg"
            alt="React Course Preview"
            className="object-cover shadow-lg"
            width={1920}
            height={1080}
            style={{
              transform: "translateZ(0)",
              backfaceVisibility: "hidden",
              willChange: "transform",
              borderRadius: "40px",
            }}
            priority
          />
        </div>
      </ScrollStackItem>

      <ScrollStackItem itemClassName="bg-gradient-to-br from-blue-50 to-indigo-100 dark:from-blue-900/20 dark:to-indigo-900/20 border border-blue-200 dark:border-blue-800 rounded-[40px] shadow-lg">
        <div
          className="relative w-full h-screen overflow-hidden"
          style={{
            transform: "translateZ(0)",
            backfaceVisibility: "hidden",
            willChange: "transform",
            borderRadius: "40px",
          }}
        >
          <Image
            src="/static/img/pic4.jpeg"
            alt="React Course Preview"
            className="object-cover shadow-lg"
            width={1920}
            height={1080}
            style={{
              transform: "translateZ(0)",
              backfaceVisibility: "hidden",
              willChange: "transform",
              borderRadius: "40px",
            }}
            priority
          />
        </div>
      </ScrollStackItem>
    </ScrollStack>
  </div>
</section>

);
};`
but when i scroll up or down i face image flickering issue if someone faced issue like this hlepmme