Spline ✅

Goals

• Allow your Spline elements to be slotted, by making them components

• Allow that component to support bindable properties so that the Spline can be set per instance or via CMS Link binding, to a Link field

  • This encourages a valid URL

Properties

Technical Notes

NC Analysis

Webflow has a Spline native component, and I've done some experiements to see if it can be adapted directly.

Webflow's pre-JS render;

<div
  data-w-id="9da523ff-d351-71ca-bfc7-b6f306296a16"
  data-animation-type="spline"
  data-spline-url="https://prod.spline.design/yVDxdZWJmBEGK11j/scene.splinecode"
>
  <canvas></canvas>
</div>

Testing showed that a basic custom elements recreation of the Spline HTML has some problems;

• Doesn't render in the designer

• Appears to have rendering issues ( not investigated ) in the published HTML

• Requires script hacks

  • To generate the UUID ID

  • To pull the URL from a Link field