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 canvasRef = useRef<HTMLCanvasElement>(null)
const framesRef = useRef<(HTMLImageElement | null)[]>([])
const scrollProgressRef = useRef(0)
const [loaded, setLoaded] = useState(false)
const [loadProgress, setLoadProgress] = useState(0)
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)
}, [])
// scrollYProgress → ref (RAF loop için)
useEffect(() => {
return scrollYProgress.on('change', (v) => { scrollProgressRef.current = v })
}, [scrollYProgress])
// RAF loop: scroll progress + yüklü frame → canvas
// RAF loop: DOM scroll → frame index → canvas (Framer Motion bağımsız)
useEffect(() => {
const canvas = canvasRef.current
if (!canvas) return
const section = sectionRef.current
if (!canvas || !section) return
const ctx = canvas.getContext('2d')
if (!ctx) return
let rafId: number
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(
Math.floor(progress * (TOTAL_FRAMES - 1)),
TOTAL_FRAMES - 1
)
// En yakın yüklü frame'i bul
for (let i = targetIdx; i >= 0; i--) {
const img = framesRef.current[i]
if (img && canvas.width > 0) {