Webflow & Spline Canvas

Design help Webflow integrations
1

I’m loading in a Spline Scene via the Spline Scene element inside Webflow. It’s rendered as a canvas in the html. Is there a way to listen for when the scene is loaded?

I found this info but that is not working because Webflow is not using the

Any ideas?

2

We need a read-only.

But doesn’t seem too complex:

Make sure you run your scripts after the target div has been placed in the DOM (such as placing the spline code at the end of your <body> tag. Then, it’s just a matter of listening for that event:

const mySplineViewer = document.getElementById(`YOUR-CANVAS-ID`);
mySplineViewer.addEventListener('load-complete', (e) => {
	console.log('loading complete', e.detail);
});
3

Thanks for your help, I think this is not going to work because it’s a <canvas> element. (read-only deleted)

4

No official scene load event in Webflow for Spline yet, bummer! I’ve seen some folks using setInterval to check for specific elements within the scene appearing, which might indicate it’s loaded. Not ideal, but could be a workaround.

7

Annnnd… EUREKA: Just use the code below, and you will receive the load event.

<script>
  document.querySelector("#spline-bg").addEventListener("w-spline-load",(e)=>{
    console.log("Spline scene loaded through Webflow",e)
  })
</script>

Man I love reverse engineering minified code, such a fun puzzle :grin:

1 Like
8

True legend here! Can you give me any insights how you found out? Just checking Webflow JS minified code?

9

Sure, but yes, it was all reverse engineering, no docs or anything:

Basically, first I identified the custom attributes that webflow outputs in the source code of the website. (Basically, using view-source:{{URL_HERE}} → view-source is used so no scripts alter the page). I paid close attention to the attributes on the spline animation element.

Then, after identifying those attributes, I basically openend the .webflow.js file that webflow ships on your sites and searched for those attributes. From there, it was just a matter of reading the minified code around those attributes.

1 Like