# Install the App

This guide shows you how to install **Spline Control** and place it correctly on your page in Wix Studio so scroll animations work smoothly.

You only need a Wix Studio project - no extra setup is required.

***

### Step 1: Install Spline Control from the App Marketplace

In the Wix Studio editor:

1. Open the **App Market**
2. Search for **Spline Control**
3. Click **Add to Site**

After installation, the widget is usually added to your page automatically.

If you don’t see it on your page, you can add it manually (see next step).

***

### Step 2: Add the Widget Manually (Optional)

If you want to place the widget yourself or add it to another section:

1. Click the **Plus (+) icon** in the left toolbar
2. Go to **App Widgets**
3. Select **Spline Control**
4. Drag it into the section where you want the 3D scene to appear

The widget will render the Spline scene inside that section.

***

### Step 3: Understand How Scroll Trigger Works

Spline Control automatically uses the **section where the widget is placed** as the scroll trigger.

This means:

* the animation progresses while the user scrolls through that section
* the longer the section, the more room the animation has to play

You don’t need to define any scroll trigger manually - it is handled automatically by the app.

***

### Step 4: Use Sticky Position for Best Results

For most scroll-based animations, we recommend using **sticky positioning** so the 3D scene stays visible while the user scrolls.

You can do this in two ways:

#### Option A: Make the Widget Sticky

Select the Spline Control widget and set its position to **Sticky** in the layout settings.

#### Option B: Place the Widget Inside a Sticky Container

Place the widget inside a container and set the **container** to Sticky instead.

This gives you more layout flexibility and is useful if you want to combine the 3D scene with other elements like text or buttons.

***

### Step 5: Set Enough Section Height

For smooth scroll animations, the section must be tall enough to allow scrolling.

We recommend:

* **300vh to 600vh (best option for pixel-perfect responsiveness)**\
  or
* **3000px to 6000px**

This gives the animation enough space to play smoothly and feel natural.

If the section is too short, animations may feel rushed or jump too quickly.

***

### Step 6: Open the App Panel

Click on the Spline Control widget -> "Settings"

You should now see the **Spline Control app panel**, where you can:

* choose a template
* connect your own Spline scene
* select objects and adjust animation settings

If the panel opens, everything is installed correctly and ready to use.

***

### You’re Ready to Continue

Spline Control is now installed and properly placed on your page.

Next, continue with:

* [**Use Template Spline Scenes**](/interactive-studio/spline-control/get-started/use-template-spline-scenes.md) - fastest way to start
* [**Use Custom Spline Scenes**](/interactive-studio/spline-control/get-started/use-custom-spline-scenes.md) - connect your own Spline files
* [**Scroll Settings**](/interactive-studio/spline-control/get-started/scroll-settings.md) - set up animation behavior


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://insync.gitbook.io/interactive-studio/spline-control/get-started/install-the-app.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.