fix: pure DOM scroll in RAF loop, drop framer scroll dependency
This commit is contained in:
@@ -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) {
|
||||
|
||||
Reference in New Issue
Block a user