> For the complete documentation index, see [llms.txt](https://insync.gitbook.io/interactive-studio/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://insync.gitbook.io/interactive-studio/spline-control/get-started/install-the-app.md).

# 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