# Scroll Settings

Scroll settings control **how and when your Spline objects move while the user scrolls**.

These settings work the same way whether you are using:

* a **template scene**, or
* a **custom Spline scene**

As long as a scene is loaded, you can start setting up scroll animations.

***

### Step 1: Open the Scroll Settings

Select the Spline Control widget on your page.

Then:

1. Click the **blue gear icon (Settings)** in the top-right of the app panel
2. Enable the **Scroll Animation** toggle

Once enabled, the animation controls become active.

***

### Step 2: Select the Object You Want to Animate

After enabling scroll animation, you will see an **Animated Element** dropdown.

This list is generated automatically and contains **all animatable objects from your current Spline scene**.

1. Open the dropdown
2. Select the object you want to animate

As soon as you select an object, the animation settings for that object will appear below.

You can repeat this process later to animate additional objects.

***

### Animation Settings Overview

After selecting an object, you will see three main groups of settings:

1. **Animation Area** (when the animation plays)
2. **Move** (how the object moves in space)
3. **Rotate** (how the object rotates)

You can combine all of them to create fully custom animations.

***

### 1. Animation Area

Animation Area defines **which part of the section controls the animation**.

By default, it is set to:

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

This means the animation runs across the **entire height of the section**.

#### Example

If you set:

* Start: **20%**
* End: **80%**

Then:

* the animation will **not start immediately**
* it will begin only after the user scrolls through the first 20% of the section
* it will finish when the user reaches 80% of the section

This is useful if you want:

* the scene to stay still at first
* then animate only in the middle of the scroll
* and stop before the section ends

***

### 2. Move (Position)

Move controls how the object shifts in 3D space while scrolling.

You can move objects on three axes:

* **X** (left / right)
* **Y** (up / down)
* **Z** (forward / backward)

These axes match the positioning inside your Spline file, so testing movement in Spline can help you understand directions better.

#### General Direction Guide

* **Move X**\
  Positive → moves right\
  Negative → moves left
* **Move Y**\
  Positive → moves up\
  Negative → moves down
* **Move Z**\
  Positive → moves closer (zoom in)\
  Negative → moves away (zoom out)

{% hint style="info" %}

#### Tip: Creating a Zoom Effect

If you want an object to feel like it is growing/shrinking while scrolling, use **Move Z**.

* Positive values → object moves toward the camera (appears larger)
* Negative values → object moves away (appears smaller)
  {% endhint %}

***

### 3. Rotate (Rotation)

Rotate controls how the object spins while scrolling.

Rotation is also applied on three axes:

* **X**
* **Y**
* **Z**

All rotation values are measured in **degrees (°)**.

#### Rotation Examples

* **360°** → one full rotation
* **720°** → two full rotations
* **180°** → half rotation

#### General Rotation Behavior

* **Rotate X**\
  Positive → tilts forward\
  Negative → tilts backward
* **Rotate Y**\
  Positive → rotates to the right\
  Negative → rotates to the left
* **Rotate Z**\
  Positive → tilts left\
  Negative → tilts right

Exact behavior can vary depending on how the object is oriented in your Spline scene, so testing is always recommended.

***

### Combining Move and Rotate

All Move and Rotate values can be combined to create more complex animations.

#### Example: Cinematic Scroll Animation

Try this setup:

* Move Y: **100** (slightly moves up)
* Move Z: **500** (moves closer for zoom effect)
* Rotate Y: **360** (full rotation)

Result:

As the user scrolls, the object:

* moves slightly upward
* zooms toward the camera
* rotates at the same time

This creates a smooth, cinematic reveal effect that feels very dynamic.

***

### Best Practices

* Start with small values, then increase gradually
* Make sure your section height is large enough (300vh–600vh recommended)
* Use sticky positioning so the object stays visible while scrolling
* The Scroll Animations are only visible on the live site

***

### What’s Next?

Now that you understand scroll settings, you can:

* animate multiple objects in the same scene
* layer different motions for storytelling
* combine Spline Control with [Motion Flow](/interactive-studio/motion-flow/introduction.md) or [Aura Suite](/interactive-studio/aura-suite/introduction.md)


---

# 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/scroll-settings.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.