INSYNC Experimental: scroll 3D animations on WIX Studio - is it possible?

Preparing the Spline model

To animate individual layers precisely, the objects in the Spline editor had to be cleanly named and hierarchically structured. Only then could we address them later via JS.

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

Embedding the canvas in a sticky container

To make the scene “travel” with the page while scrolling, we wrapped a canvas in a container - with position: sticky.

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

Scroll tracking - the biggest problem

WIX has no native scroll tracking. The only thing available is polling via timeouts (e.g. querying the scroll position every 200ms). A performance nightmare. So we integrated GSAP + ScrollTrigger:

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

Communication between custom code and iframe

Since WIX Studio doesn’t allow direct communication between inline code and an iframe, we used the postMessage API. That let us pass the current scroll position and trigger events on to the Spline script.

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

Dynamic triggers & interpolation

To make everything responsive, the trigger points had to be recalculated on every reload. We then interpolated between the steps - so the movement feels truly smooth.

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)
  };
}

The result

The result was a scroll 3D experience previously declared “impossible” on WIX Studio. Complex movements, layer animations, and interactions - all synchronized with the scroll.

But: it was brutally labor-intensive.

Over 2,000 lines of code

Weeks of debugging

Countless fixes for browser compatibility

And the truth is: on Webflow, all of this would be possible today with native integrations and far less effort. Still: this workshop showed us that testing limits is always exciting - and that even within a constrained system, there’s room for radical experiments.