51:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"FilesView"] 52:T1811,'use client'; import { type MotionProps, motion, useMotionValueEvent, useScroll, useTransform, } from 'motion/react'; // * based on: https://gist.github.com/coleturner/34396fb826c12fbd88d6591173d178c2 import { useEffect, useRef, useState } from 'react'; export function throttle(fn: (...args: any[]) => any, wait: number) { let shouldWait = false; return function throttledFunction(this: any, ...args: any[]) { if (!shouldWait) { fn.apply(this, args); shouldWait = true; setTimeout(() => (shouldWait = false), wait); } }; } export const items = [ { id: 1, url: 'https://images.unsplash.com/photo-1709949908058-a08659bfa922?q=80&w=1200&auto=format', }, { id: 2, url: 'https://images.unsplash.com/photo-1548192746-dd526f154ed9?q=80&w=1200&auto=format', }, { id: 3, url: 'https://images.unsplash.com/photo-1693581176773-a5f2362209e6?q=80&w=1200&auto=format', }, { id: 4, url: 'https://images.unsplash.com/photo-1584043204475-8cc101d6c77a?q=80&w=1200&auto=format', }, { id: 5, url: 'https://images.unsplash.com/photo-1709949908058-a08659bfa922?q=80&w=1200&auto=format', }, { id: 7, url: 'https://images.unsplash.com/photo-1518599904199-0ca897819ddb?q=80&w=1200&auto=format', }, { id: 8, url: 'https://images.unsplash.com/photo-1706049379414-437ec3a54e93?q=80&w=1200&auto=format', }, { id: 91, url: 'https://images.unsplash.com/photo-1709949908219-fd9046282019?q=80&w=1200&auto=format', }, { id: 92, url: 'https://images.unsplash.com/photo-1462989856370-729a9c1e2c91?q=80&w=1200&auto=format', }, { id: 10, url: 'https://images.unsplash.com/photo-1475727946784-2890c8fdb9c8?q=80&w=1200&auto=format', }, { id: 11, url: 'https://images.unsplash.com/photo-1546942113-a6c43b63104a?q=80&w=1200&auto=format', }, { id: 12, url: 'https://images.unsplash.com/photo-1726551195764-f98a8e8a57c3?q=80&w=1200&auto=format', }, { id: 13, url: 'https://images.unsplash.com/photo-1726551195795-612ca47c0b7d?q=80&w=1200&auto=format', }, { id: 14, url: 'https://images.unsplash.com/photo-1532423622396-10a3f979251a?q=80&w=1200&auto=format', }, { id: 15, url: 'https://images.unsplash.com/photo-1490750967868-88aa4486c946?q=80&w=1200&auto=format', }, { id: 16, url: 'https://images.unsplash.com/photo-1496861083958-175bb1bd5702?q=80&w=1200&auto=format', }, ]; // * based on: https://gist.github.com/coleturner/34396fb826c12fbd88d6591173d178c2 function useElementViewportPosition(ref: React.RefObject) { const [position, setPosition] = useState<[number, number]>([0, 0]); useEffect(() => { if (!ref || !ref.current) return; const pageHeight = document.body.scrollHeight; const start = ref.current.offsetTop; const end = start + ref.current.offsetHeight; setPosition([start / pageHeight, end / pageHeight]); }, []); return { position }; } const slideAnimation: MotionProps = { variants: { full: { backgroundColor: '#008299' }, partial: { backgroundColor: '#ffffff' }, }, initial: 'partial', whileInView: 'full', viewport: { amount: 1, once: false }, }; export default function FramerHorizontalScroll() { const mainRef = useRef(null); const carouselRef = useRef(null); const { position } = useElementViewportPosition(mainRef); // const { ref, start, end } = useRefScrollProgress(mainRef) const [carouselEndPosition, setCarouselEndPosition] = useState(0); const { scrollYProgress, scrollY } = useScroll(); const x = useTransform(scrollYProgress, position, [0, carouselEndPosition]); console.log(carouselEndPosition); useMotionValueEvent(scrollY, 'change', (latest) => { console.log('Page scroll: ', latest); }); useEffect(() => { window.addEventListener('scroll', () => console.log(carouselEndPosition)); }, []); useEffect(() => { if (!carouselRef || !carouselRef.current) return; const parent = carouselRef.current.parentElement; const scrollbarWidth = window.innerWidth - document.documentElement.clientWidth; const resetCarouselEndPosition = () => { if (carouselRef && carouselRef.current) { const newPosition = carouselRef.current.clientWidth - window.innerWidth + scrollbarWidth + (parent as HTMLElement).offsetLeft * 2; setCarouselEndPosition(-newPosition); } }; resetCarouselEndPosition(); const handleResize = throttle(resetCarouselEndPosition, 10); window.addEventListener('resize', handleResize); return () => window.removeEventListener('resize', handleResize); }, []); return ( <>

{items.map((item, index) => ( ))}

); } 50:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[null,["$","$L51",null,{"files":[{"path":"./registry/components/scroll-animation/framer-horizontal-scroll.tsx","content":"$52","type":"registry:component"}],"className":"h-[70svh] min-h-80"}]]}]