fix: pure DOM scroll in RAF loop, drop framer scroll dependency

This commit is contained in:
2026-07-30 23:49:34 +03:00
parent 0ae16f2963
commit 37d37b44b0
+8 -10
View File
@@ -26,7 +26,6 @@ export default function CloudRevealSection() {
const sectionRef = useRef<HTMLDivElement>(null) const sectionRef = useRef<HTMLDivElement>(null)
const canvasRef = useRef<HTMLCanvasElement>(null) const canvasRef = useRef<HTMLCanvasElement>(null)
const framesRef = useRef<(HTMLImageElement | null)[]>([]) const framesRef = useRef<(HTMLImageElement | null)[]>([])
const scrollProgressRef = useRef(0)
const [loaded, setLoaded] = useState(false) const [loaded, setLoaded] = useState(false)
const [loadProgress, setLoadProgress] = useState(0) const [loadProgress, setLoadProgress] = useState(0)
const [activeUnit, setActiveUnit] = useState<{ id: string; label: string; sub: string } | null>(null) const [activeUnit, setActiveUnit] = useState<{ id: string; label: string; sub: string } | null>(null)
@@ -72,25 +71,24 @@ export default function CloudRevealSection() {
return () => window.removeEventListener('resize', resize) return () => window.removeEventListener('resize', resize)
}, []) }, [])
// scrollYProgress → ref (RAF loop için) // RAF loop: DOM scroll → frame index → canvas (Framer Motion bağımsız)
useEffect(() => {
return scrollYProgress.on('change', (v) => { scrollProgressRef.current = v })
}, [scrollYProgress])
// RAF loop: scroll progress + yüklü frame → canvas
useEffect(() => { useEffect(() => {
const canvas = canvasRef.current const canvas = canvasRef.current
if (!canvas) return const section = sectionRef.current
if (!canvas || !section) return
const ctx = canvas.getContext('2d') const ctx = canvas.getContext('2d')
if (!ctx) return if (!ctx) return
let rafId: number let rafId: number
const loop = () => { const loop = () => {
const progress = scrollProgressRef.current const totalHeight = section.offsetHeight - window.innerHeight
const scrolled = window.scrollY - section.offsetTop
const progress = Math.max(0, Math.min(1, scrolled / totalHeight))
const targetIdx = Math.min( const targetIdx = Math.min(
Math.floor(progress * (TOTAL_FRAMES - 1)), Math.floor(progress * (TOTAL_FRAMES - 1)),
TOTAL_FRAMES - 1 TOTAL_FRAMES - 1
) )
// En yakın yüklü frame'i bul
for (let i = targetIdx; i >= 0; i--) { for (let i = targetIdx; i >= 0; i--) {
const img = framesRef.current[i] const img = framesRef.current[i]
if (img && canvas.width > 0) { if (img && canvas.width > 0) {