window.addEventListener('load', function() { gsap.registerPlugin(ScrollTrigger) const component = document.querySelector('[fc-image-scrubbing = component]') if (!component) return const imageURLs = component .getAttribute('fc-image-scrubbing-urls') .split('; ') const canvas = document.querySelector('[fc-image-scrubbing = component] canvas') const ctx = canvas.getContext('2d') let curFrame = -1 let playhead = { frame: 0 } // Canvas Größe setzen const resizeCanvas = () => { const dpr = window.devicePixelRatio || 1 const rect = canvas.getBoundingClientRect() canvas.width = (rect.width || 770) * dpr canvas.height = (rect.height || 998) * dpr ctx.setTransform(1, 0, 0, 1, 0, 0) ctx.scale(dpr, dpr) } const drawFrame = (index) => { const img = images[index] if (!img || !img.complete) return const cw = canvas.clientWidth const ch = canvas.clientHeight const ir = img.naturalWidth / img.naturalHeight const cr = cw / ch let dw, dh if (ir > cr) { dw = cw; dh = cw / ir } else { dh = ch; dw = ch * ir } ctx.clearRect(0, 0, cw, ch) ctx.drawImage(img, (cw - dw) / 2, (ch - dh) / 2, dw, dh) curFrame = index } // Alle Bilder laden let loaded = 0 const images = imageURLs.map((url, i) => { const img = new Image() img.onload = () => { loaded++ // Ersten Frame sofort zeichnen sobald er da ist if (i === 0) { resizeCanvas() drawFrame(0) console.log('Erster Frame gezeichnet') } // ScrollTrigger starten sobald erste 10 Frames geladen if (loaded === 10) { startScrollTrigger() console.log('ScrollTrigger gestartet') } } img.src = url return img }) function startScrollTrigger() { gsap.to(playhead, { frame: images.length - 1, ease: 'none', duration: images.length / 30, onUpdate: () => { const index = Math.round(playhead.frame) if (index !== curFrame) drawFrame(index) }, scrollTrigger: { trigger: component, start: 'top top', end: 'bottom bottom', scrub: 1 } }) } new ResizeObserver(() => { resizeCanvas() if (curFrame >= 0) drawFrame(curFrame) }).observe(canvas) })