# Upload Custom Sequences

Motion Flow lets you upload your own videos and turn them into scroll-controlled animations.

Once uploaded, your video is automatically prepared for smooth scroll playback - no manual processing required.

***

### Step 1: Open the Custom Tab

Select the Motion Flow widget on your page to open the app panel.

At the top of the panel, click on the **Custom** tab.

Here you will find the **Upload** button for adding your own video.

***

### Step 2: Upload Your Video

Click the **Upload** button and select a video file from your computer.

#### Supported Formats

* **MP4**
* **MOV**

#### Recommended File Size

For best results, keep your video under:

* **15 MB (Max. supported File Size is 30MB)**

{% hint style="info" %}
Higher quality is always better, but very large files can cause slower loading on the live site, which may result in less smooth scroll playback.

Try to balance good visual quality with reasonable file size.
{% endhint %}

***

### Step 3: Wait While the Video Is Processed

After selecting your video, Motion Flow will automatically:

* upload the file to our servers
* split it into optimized image sequences
* compress the frames
* prepare everything for scroll playback

This process usually takes around **20 seconds**, but may take longer depending on:

* your internet connection
* video length
* file size

{% hint style="warning" %}
**Important:**\
Please **stay on this tab and do not click away** while the upload and processing is running.\
Leaving the tab may interrupt the process.
{% endhint %}

***

### Step 4: Finish the Setup

Once processing is complete, you will see a **Finish** button.

Click **Finish** to confirm and activate the video sequence.

Your video is now ready and will play based on scroll inside the section.

***

### Step 5: Preview Scroll Playback

After finishing:

* publish your site
* scroll the page on the live site
* watch how the video reacts to scroll
* adjust section height or layout if needed

Just like with templates, your video is now fully connected to scroll and ready to use.

***

### Adjusting Scroll Area (Optional)

Click the **Settings (gear) icon** to open the scroll settings.

Here you can adjust the **Animation Area**, which controls where in the section the video plays.

#### Animation Area

This controls **where in the section the video plays**.

Default:

* Start: **0%**
* End: **100%**

Meaning the video plays across the full section height. \
You can change this if you want the video to start later or finish earlier within the section.

{% hint style="info" %}
**Example:**

* Start: **20%** → video starts after the first part of the section
* End: **80%** → video finishes before the section ends

This is useful if you want to combine the video with other content before or after the animation.
{% endhint %}

***

### Layout Tips for Best Results

For smooth scroll video experiences, we recommend:

* using **sticky positioning** for the widget or its container
* setting section height to **300vh–600vh** or **3000px–6000px**

This gives the video enough space to play naturally while staying visible.

***

### What’s Next?

Now that your own video is connected, you can:

* fine-tune scroll timing
* combine scroll video with text and UI elements
* build multi-section storytelling layouts


---

# 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/motion-flow/get-started/upload-custom-sequences.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.
