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

WIX Studio ist bekannt für seine Limitierungen, wenn es um komplexe Animationen geht. Scroll-Trigger? Fehlanzeige. 3D-Interaktionen? Nur mit sehr viel Fantasie. Genau deshalb haben wir uns gefragt: Können wir trotzdem eine Spline-basierte Scroll-3D-Experience auf WIX bauen?

Die kurze Antwort: Ja, wir konnten.
Die lange Antwort: Über 2000 Zeilen Custom Code, unzählige Debug-Sessions – und jede Menge Kaffee.
‍

‍

‍

Schritt 1: 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");
            ...

‍
‍

Schritt 2: 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;
}

‍
‍

Schritt 3: 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 }, "*");
});

‍
‍

Schritt 4: 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:

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

Damit konnten wir die aktuelle Scroll-Position und Trigger-Events an das Spline-Script weiterreichen.

‍
‍

Schritt 5: 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.