Spline

How to integrate Spline with Webflow

Webflow offers three integration methods with Spline. These include: a native Spline scene element for most use cases, custom code embeds for advanced viewer configurations, and APIs for programmatic control.

Use the native Spline scene element

Use this method for most implementations. The native element handles embedding, sizing, and responsive behavior through standard Webflow controls and integrates with Webflow's interactions panel.

Create your 3D scene in Spline, export to get a .splinecode URL, drag the Spline scene element onto your canvas, paste the URL, and publish.

This integration method enables:

• Scroll-based 3D animation: Control Spline object position, rotation, and scale through the dedicated Spline action in the Interactions panel  
• Hover and click triggers: Change 3D scene states through Webflow's interactions panel  
• Responsive 3D layouts: Apply breakpoint-specific sizing and positioning  
• CMS-driven 3D content: Place Spline elements in Collection items with dynamic URLs

Performance considerations:

• Scene limits: Keep to 3 Spline scenes or fewer per page  
• File optimization: Compress textures in Spline's export settings (up to 4x file size reduction) and reduce polygon counts  
• Mobile testing: Test thoroughly, as touch interactions require explicit configuration in Spline's Play Settings

Embed with Spline Viewer web component

Use this method when you need custom background RGBA values, global event handling across multiple scenes, or specific loading behavior controls not available in the native element.

<script type="module" src="https://unpkg.com/@splinetool/viewer@1.9.82/build/spline-viewer.js"></script>
<spline-viewer url="https://prod.spline.design/9951u9cumiw2Ehj8/scene.splinecode"></spline-viewer>

Viewer customization options:

• Background color override: Use background="rgba(218,81,221,0.2)" to match your site design  
• Global event handling: Use events-target="global" for interaction coordination across scenes  
• Loading behavior: Control through viewer attributes and export settings

Custom embeds require manual configuration for container dimensions, responsive behavior, and interaction conflicts.

Build with Webflow and Spline APIs

Use this approach for dynamic content updates based on external data, bidirectional communication with backend systems, or programmatic scene manipulation. This requires JavaScript proficiency.

Spline provides three APIs: the Runtime API (@splinetool/runtime), the Real-time API, and the Variables API. For Webflow, use a browser/ESM CDN build or bundle it externally and include it via a script tag in custom code.

The core API capabilities include:

• Object manipulation: Query elements via findObjectByName() and findObjectById()  
• Variable control: Create dynamic experiences through setVariable() and setVariables()  
• Animation control: Manage animations with play() and pause()  
• Event handling: Respond to interactions through addEventListener()

Sync 3D content with Webflow CMS

Connect Spline scenes to the Webflow CMS to create dynamic 3D implementations where scene properties update based on Collection items.

const canvas = document.getElementById('canvas3d');
const spline = new Application(canvas);
spline.load('YOUR_SCENE_URL').then(() => {
  spline.setVariables({
    color: cmsItemColor,
    productName: cmsItemTitle,
    price: cmsItemPrice
  });
});

Create real-time integrations with external systems

Use Spline's Real-time API for bidirectional communication between Spline scenes and external services. This requires bundling the runtime externally or using a CDN build, plus a backend or serverless function layer for real-time sync.

What you can build

Integrating Spline with Webflow lets you create production-grade 3D web experiences without custom WebGL development.

• Interactive product showcases: Build e-commerce pages with 3D models that rotate, change colors, and reveal features on click  
• Scroll-driven storytelling experiences: Create landing pages where 3D scenes animate as visitors scroll  
• Brand experiences with 3D throughout: Build websites with 3D integrated in navigation, content sections, and interactions  
• SaaS product demonstrations: Explain complex software features through interactive 3D visualization