export const CaseStudy = withVisualEditor<CaseStudyProps & MotionProps>(
({ partnerImg, title, categories, ctaLabel, ctaLink, studyImg, ...props }) => {
const controls = useAnimation();
const [scrolling, setScrolling] = useState(false);
const containerRef = useRef<HTMLDivElement | null>(null);
const calculateScrollEffect = () => {
if (!containerRef.current) return { opacity: 1, y: 0, height: "100vh" };
const articleTop = containerRef.current.getBoundingClientRect().top;
const viewportHeight = window.innerHeight;
// Calculate the scroll percentage based on the position of the div
const scrollPercentage = Math.min(1, Math.max(0, (viewportHeight - 200 - articleTop) / (viewportHeight - 200)));
// Calculate the height based on scroll percentage (from 40px to 100% of content height)
const contentHeight = containerRef.current.scrollHeight;
const height = `calc(40px + ${scrollPercentage * (contentHeight - 40)}px)`;
// const y = `calc(100vh - ${height})`;
const y = -100;
return { y };
};
const updateAnimations = () => {
const { y } = calculateScrollEffect();
controls.start({ y });
};
const handleScroll = () => {
setScrolling(true);
if (!scrolling) {
updateAnimations();
}
setTimeout(() => {
setScrolling(false);
}, 100);
};
useEffect(() => {
window.addEventListener("scroll", handleScroll, { passive: true });
return () => {
window.removeEventListener("scroll", handleScroll);
};
}, [controls, scrolling]);
return ( ....
