3D scenes
Click the 3D scene button on the toolbar to add a 3D item. Select it and open the 3D tab to set it up. A 3D item can be a single spinning object, or a full scene with many objects, lights and scroll-driven motion.
Two kinds of 3D item
| Simple 3D object | Pinned scroll scene | |
|---|---|---|
| What it is | One model in a box on the page. | A scene that stays on screen while the page scrolls past it, with objects moving as you scroll. |
| Objects | One model. | Up to 20: models, 3D text, clouds and bubbles. |
| Motion | Behaviours: orbit, float, scroll spin, scroll zoom, parallax, fade and scale in. | Keyframes against the scroll or time, load-in, idle motion, whole-scene moves. |
| Switch | Make it a pinned scroll scene | Use as a simple 3D object instead |
Your own models
Every model picker offers:
Simple 3D object
Pick the model and its Model size, then add Behaviours. Each behaviour has its own settings - for example Orbit's speed or “seconds per turn”, Scroll zoom's size entering and leaving. Behaviours combine: Orbit plus Scroll zoom turns slowly while it grows.
Pinned scroll scene
Scene
Objects
Everything in the scene is listed under Objects. Click one to open its settings, or click the object itself in the canvas. The ↑ ↓ arrows set drawing order (later objects draw in front) and × removes it. Use + Add to the scene… to add:
| Object | Settings |
|---|---|
| Model | Model, model size, position, rotation, scale, opacity. |
| 3D text | Text, colour, font, and either a letter size or a width to stretch it to. |
| Clouds | A field of soft puffs: number of puffs, spread (width, height, depth), pattern (Shuffle for a new arrangement), opacity. |
| Single cloud | One flat cloud: width, opacity. |
| Bubbles | Rising bubbles: count, speed, size, opacity, and a colour that can shift as you scroll. |
Lights
A scene has up to 8 lights: Ambient (soft, everywhere), Sun (from one direction) and Point (a bulb, with “Fade with distance”). Each object can also have up to 4 lights on this object that travel with it - a glow behind a logo, a light inside a lantern. Their position is measured from the object's centre.
Placing objects
Type positions and rotations, or use Move things in the scene: pick Move, Rotate or Scale and drag the round handle on the object. Hold Shift to move toward or away from the camera, or to roll.
Animating a scene
In Objects, click the object, then open Animation over scroll.
+ Animate… lists what can move: left/right, up/down, toward/away from the camera, tilt, spin, roll, size and fade. Each can be animated once per object, so the list only shows what isn't animated yet.
Each keyframe is a point in the scroll (0-100%) and a value. Drag the Preview slider to a moment and press + Add a keyframe here, or drag the object with the Move handle - it sets a keyframe at that moment. Pick an easing into each keyframe. Drag the diamonds to retime.
Set Driven by to Time and choose how long one loop takes - it plays by itself, without scrolling.
Each object also has:
| Section | What it does |
|---|---|
| When the page loads | A one-time arrival: fly in from any side or far away, pop in, spin in - or Customise where it starts (moved by, turned by, starting size) and its easing. |
| Idle motion | Float gently, bob or sway forever, with speed, bob and wobble amounts. |
| Tilt | Tilts the whole path the object moves along, so its animation travels on the slant too. |
| Model changes with a value | Up to 12 models, chosen by a value from the Interact tab (a flavour picker), with an optional spin each time it changes. |
Whole-scene motion moves, turns or scales everything in the scene together, like a camera move.
On phones
3D scenes keep working on phones and keep the framing you designed. To leave a decorative scene out of the phone version, use Properties → Layout → Hide on phone.