Animations settings
What this covers
Section titled “What this covers”This page describes every setting in the Animations tab of the 3D scene editor. Use this tab to control how named animations from your 3D scene file play when visitors view the showcase.
How animations are detected
Section titled “How animations are detected”The Animations tab lists every animation track that has a non-empty name in your 3D scene file. Unnamed animations are not shown and cannot be configured.
Each animation is shown as its own section, with its name and total duration (in seconds) displayed in the section header.
Per-animation settings
Section titled “Per-animation settings”Each named animation has its own Mode setting, and additional properties depending on the mode chosen.
Controls when and how the animation plays.
| Mode | Description |
|---|---|
| Do not play | The animation is ignored. It will not play at any point during the showcase. |
| Play once | The animation plays from start to finish a single time when the showcase loads. |
| Play on loop | The animation plays continuously, looping back to the start each time it ends. |
| Sync with scroll | The animation position is tied to how far the visitor has scrolled down the page. See Sync with scroll below. |
Play rate
Section titled “Play rate”Available when Mode is Play once or Play on loop.
A multiplier for the animation’s playback speed. 1 plays at the original speed. 2 plays at double speed. 0.5 plays at half speed. Negative values are not supported.
Sync with scroll
Section titled “Sync with scroll”When Mode is set to Sync with scroll, the animation does not play on its own — instead, its position advances as the visitor scrolls down the page. This lets you create storytelling experiences where the 3D scene reacts to the user’s reading progress.
Keyframes
Section titled “Keyframes”A list that maps specific scroll positions (anchors) to specific points in the animation (at time). This lets you synchronize the animation to elements on your page rather than relying on raw pixel distances.
| Property | Description |
|---|---|
| Anchor | Where in the page scroll this keyframe activates. Enter a pixel value (e.g. 500), a percentage (e.g. 50%), or a CSS selector (e.g. #my-section) to anchor to the position of a specific element on the page. |
| At time | The point in the animation, in seconds, that corresponds to this anchor. Clamped to the animation’s total duration. |
You can add as many keyframes as needed. The animation interpolates smoothly between them.
Viewer scroll size
Section titled “Viewer scroll size”Shown at the top of the Animations tab whenever at least one animation is set to Sync with scroll. This setting is not tied to any individual animation — it applies to the showcase as a whole.
The total number of pixels the visitor needs to scroll for the animation to travel from its start to its end. Larger values mean the animation unfolds more slowly as the user scrolls; smaller values mean it completes more quickly.