{"id":4265,"date":"2024-04-14T08:47:30","date_gmt":"2024-04-14T00:47:30","guid":{"rendered":"https:\/\/webflow.tenten.co\/doc\/add-a-spline-scene-to-your-webflow-site\/"},"modified":"2024-04-15T04:01:17","modified_gmt":"2024-04-14T20:01:17","slug":"add-a-spline-scene-to-your-webflow-site","status":"publish","type":"post","link":"https:\/\/webflow.tenten.co\/en\/add-a-spline-scene-to-your-webflow-site\/","title":{"rendered":"Include a Curve backdrop to your Webflow website"},"content":{"rendered":"\n
\n

Spline<\/a> is a software for crafting dynamic 3D settings. The Spline connection lets you embed your Spline backdrop and its occurrences directly into Webflow. You can also bring to life your Spline entities in Webflow with the native interactions of Webflow.<\/p>\n

Throughout this guide, you will understand:<\/p>\n

    \n
  1. The process of forming a Spline backdrop<\/li>\n
  2. The method of attaching your Spline backdrop to your Webflow website<\/li>\n
  3. Animating your Spline backdrop in Webflow<\/li>\n<\/ol>\n

    Constructing and exporting a Spline backdrop<\/h2>\n

    Initially, you must establish<\/em> a backdrop in Spline. To begin, visit Spline<\/a>, create an account, and commence designing! Refer to Spline\u2019s manual<\/a> or instructional videos for further insights on designing.<\/p>\n

    Once your backdrop is ready, you may export it:<\/p>\n

      \n
    1. Press Export<\/strong> in the Spline Editor toolbar<\/li>\n
    2. Access Code Export<\/strong><\/li>\n
    3. Copy the link at the header of the Overview<\/strong> tab (the link will end with a \u201c.splinecode\u201d extension)<\/li>\n<\/ol>\n

      Adding your Spline backdrop to your Webflow website<\/h2>\n

      Upon creating and exporting your Spline backdrop, you can insert the backdrop to your Webflow website. Webflow comes with a built-in Spline backdrop<\/strong> component, which you can customize like any other element (e.g., positioning, sizing, etc.).<\/p>\n

      To embed your Spline backdrop into your Webflow site:<\/p>\n

        \n
      1. Navigate to Add panel<\/strong> > Media<\/strong>\u00a0<\/li>\n
      2. Drag a Spline backdrop<\/strong> component onto the design area<\/li>\n
      3. Proceed to Element settings panel <\/strong>> Spline backdrop settings<\/strong><\/li>\n
      4. Insert the Spline backdrop link (i.e., the link ending with a \u201c.splinecode\u201d extension) into the URL<\/strong> field<\/li>\n<\/ol>\n

        Animating your Spline backdrop in Webflow<\/h2>\n

        Now that your backdrop is seamlessly integrated into your Webflow website, you have the flexibility to animate it using Webflow\u2019s inherent interactions.<\/p>\n

        To animate an object in the Spline backdrop:<\/p>\n

          \n
        1. Choose the Spline backdrop <\/strong>on the design area<\/li>\n
        2. Access the Interactions panel<\/strong><\/li>\n
        3. Select an Element trigger<\/strong> or Page trigger<\/strong><\/li>\n
        4. Proceed per the guidelines to configure a custom animation up to Step 6<\/li>\n
        5. Choose the Spline animation from the Actions dropdown<\/li>\n
        6. Select the entity from Spline<\/strong> > Object<\/strong> dropdown\u00a0<\/li>\n<\/ol>\n

          Subsequently, you can finely tune the Spline backdrop as you desire. Manipulate the position, rotation, and scale (in all X, Y, and Z axes) of the object in the animation timeline. You can also tailor your action targets to determine the elements or triggers influenced by the animation.<\/p>\n<\/div>\n","protected":false},"excerpt":{"rendered":"Add a Spline scene to your Webflow site and animate it with interactions.","protected":false},"author":2,"featured_media":5310,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"om_disable_all_campaigns":false,"inline_featured_image":false,"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"csco_display_header_overlay":false,"csco_singular_sidebar":"","csco_page_header_type":"","footnotes":""},"categories":[284],"tags":[],"class_list":{"0":"post-4265","1":"post","2":"type-post","3":"status-publish","4":"format-standard","5":"has-post-thumbnail","7":"category-layout-design","8":"cs-entry"},"acf":[],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/posts\/4265","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/comments?post=4265"}],"version-history":[{"count":0,"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/posts\/4265\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/media\/5203"}],"wp:attachment":[{"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/media?parent=4265"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/categories?post=4265"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/tags?post=4265"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}