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 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) {
|
||||||
|
|||||||
Reference in New Issue
Block a user