> 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/motion-flow/get-started/install-the-app.md).

# Install the App

This guide shows you how to install **Motion Flow** and place it correctly on your page so scroll video works smoothly.

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

***

### Step 1: Install Motion Flow from the App Marketplace

In the Wix Studio editor:

1. Open the **App Market**
2. Search for **Motion Flow**
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 **Motion Flow**
4. Drag it into the section where you want the video sequence to appear

The widget will display the scroll-controlled video inside that section.

***

### Step 3: How Scroll Trigger Works

Motion Flow automatically uses the **section where the widget is placed** as the scroll trigger.

This means:

* the video progresses while the user scrolls through that section
* the longer the section, the more control you have over pacing

You don’t need to set up any triggers manually - everything is handled automatically.

***

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

For most scroll-video experiences, the video should stay visible while the user scrolls.

We recommend using **sticky positioning** so the animation remains in view.

You can do this in two ways:

#### Option A: Make the Widget Sticky

Select the Motion Flow 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 is useful if you want to keep text or UI elements scrolling while the video stays fixed.

***

### Step 5: Set Enough Section Height

Scroll video needs enough vertical space to feel smooth and cinematic.

We recommend:

* **300vh to 600vh**\
  or
* **3000px to 6000px**

This gives the video enough time to play naturally as users scroll.

If the section is too short, the video will advance too quickly and feel rushed.

***

### Step 6: Open the App Panel

Click on the Motion Flow widget.

You should now see the **Motion Flow app panel**, where you can:

* choose a video template
* upload your own video
* adjust scroll playback settings

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

***

### You’re Ready to Continue

Motion Flow is now installed and properly placed on your page.

Next, continue with:

* [**Use Template Sequences**](/interactive-studio/motion-flow/get-started/use-template-sequences.md) - fastest way to start
* [**Upload Custom Sequences**](/interactive-studio/motion-flow/get-started/upload-custom-sequences.md) - use your own footage