INSYNC Experimental: Scroll 3D Animationen auf WIX Studio - geht das?

Spline-Modell vorbereiten

Damit wir einzelne Layer gezielt animieren konnten, mussten die Objekte im Spline-Editor sauber benannt und hierarchisch strukturiert werden. Nur so war es möglich, sie später per JS anzusprechen.

import { Application } from "https://cdn.skypack.dev/@splinetool/runtime@1.9.6";
import gsap from "https://cdn.skypack.dev/gsap@3.12.2";

const canvas = document.getElementById("canvas3d");
const spline = new Application(canvas);

spline.load("https://prod.spline.design/mbdclc4vu9uYXlcm/scene.splinecode")
      .then(() => {
            const elementR = spline.findObjectByName("RightElement");
            const elementL = spline.findObjectByName("LeftElement");
            const serviceLayer = spline.findObjectByName("SERVICE LAYER");
            ...

Canvas in Sticky-Container einbinden

Damit die Szene beim Scrollen auf der Seite „mitscrollt“, haben wir ein canvas in einen Container gepackt - mit position: sticky.

#container {
  position: sticky;
  top: 0;
  height: 100vh;
}

Scrolltracking - das größte Problem

WIX kann nativ kein Scrolltracking. Das einzige, was es gibt, ist ein Polling über Timeouts (z. B. alle 200ms die Scrollposition abfragen). Performance-technisch ein Albtraum. Also haben wir GSAP + ScrollTrigger integriert:

document.addEventListener('scroll', function () {
  const scrollTop = document.documentElement.scrollTop;
  const sectionTop = sectionElement.offsetTop;
  const progress = (scrollTop - sectionTop) / sectionElement.offsetHeight * 100;
  
  iframe.contentWindow.postMessage({ scrollProgress: progress }, "*");
});

Kommunikation zwischen Custom Code und Iframe

Da WIX Studio keine direkte Kommunikation zwischen Inline-Code und iFrame erlaubt, haben wir uns mit der postMessage API beholfen. Damit konnten wir die aktuelle Scroll-Position und Trigger-Events an das Spline-Script weiterreichen.

iframe.contentWindow.postMessage({
  scrollProgress: scrollProgress.toFixed(2),
  triggers: triggerPositions.map(pos => pos.toFixed(2))
}, "*");

Dynamische Trigger & Interpolation

Um das Ganze responsiv zu machen, mussten die Triggerpunkte bei jedem Reload neu berechnet werden. Anschließend haben wir eine Interpolation zwischen den Steps vorgenommen - damit die Bewegung wirklich smooth wirkt.

function interpolateProperty(start, end, progress) {
  return {
    x: gsap.utils.interpolate(start.x, end.x, progress),
    y: gsap.utils.interpolate(start.y, end.y, progress),
    z: gsap.utils.interpolate(start.z, end.z, progress)
  };
}

Das Ergebnis

Das Resultat war eine Scroll-3D-Experience, die vorher auf WIX Studio für „unmöglich“ erklärt wurde. Komplexe Bewegungen, Layer-Animationen und Interaktionen - alles synchronisiert mit dem Scroll.

Aber: Es war brutal aufwendig.

Über 2000 Zeilen Code

Wochen an Debugging

Unzählige Fixes für Browser-Kompatibilität

Und die Wahrheit ist: Auf Webflow wäre das Ganze heute mit nativen Integrationen und viel weniger Aufwand möglich. Trotzdem: Dieser Workshop hat uns gezeigt, dass es immer spannend ist, Limits auszutesten - und dass selbst in einem eingeschränkten System noch Raum für radikale Experimente steckt.