Intro

Demo

Components

• Spline-player

  This is the only component needed to enable Spline on your site. Simply insert the URL to your Spline animation in the  attributes and control how you want to render it. 
  
  Export your favorite scene from the Spline editor using the `Spline Viewer` export type.
  1. First click on the Export button from the toolbar.
  2. Click on the `Spline Viewer` tab on the sidebar of the export modal.
  3. Click on update and when export is done you can copy paste the code snippet or the exported URL.
  4. Insert the URL in the attributes section of your Spline Viewer component.

  Attributes

  url	The Spline url. ex: `https://prod.spline.design/6Wq1Q7YGyM-iab9i/scene.splinecode`.
  width	The desired width of the viewer in pixels. Ex: 400px.
  height	The desired width of the viewer in pixels. Ex: 400px.
  background	A css like color that will override the background color of your scene. Ex: #ff0000.
  loading	This option controls the agressiveness of the preload of your scene. Possible values are `auto`, `lazy` and `eager`. By default (`auto`) the behavior is to `lazy` load the scene and only start to preload when the tag enters the viewport. If you need to start loading immediately then you can set `loading="eager"` instead.
  loading-anim	When true (default is false), this option displays a simple spinner preloader during the loading of the spline file.
  loading-anim-type	The type of preloading animation to be displayed while the scene is loading. If undefined no animation is used. Value can be `spinner-small-dark`, `spinner-small-light` ,`spinner-big-dark`, `spinner-big-light` or undefined.
  unloadable	When true (default is false), this options makes the viewer unload the spline element when it leaves the viewport.
  events-target	Values can either be `local` (events listened on the canvas) or `global` (events listened on the window).
  hint	When true (default is false), this option displays an overlay animation suggesting the user should use dragging in order to interact with the scene. This animation disappears as soon as user interacts.
  intercept-scroll	When true (default is true), the Spline component stops scroll (wheel) events from scrolling the page when a user scrolls/zooms within the Spline viewer.

  Events

  viewport-intersection	Triggered when the viewer enters or leaves the viewport. Event contains a `intersection:boolean` detail value.
  context-loss	Triggered when the WebGL context of the canvas is lost.
  load-start	Triggered when the viewer starts loading a scene. Event contains a `url:string` detail value. Use This if you want to display a preloader during loading.
  load-complete	Triggered when the viewer finishes loading a scene. Event contains a `url:string` detail value. Use This if you want to display a preloader during loading.
  unload	Triggered when the current scene gets unloaded.