3D

Turn a group or frame into a 3D scene and its layers can be placed in space and seen through a camera, the way CSS preserve-3d works. Each layer is a flat card in space, drawn back to front. To everything outside, the scene is still an ordinary layer.

1. 1.Select the 3D scene, then open + in the timeline0:00
2. 2.On the Camera tab, pick Orbit0:01
3. 3.Press Home, then Space0:03

Description

A 3D title card in Animate. The title scene group is a 3D scene with a camera and lights. With it selected, + in the timeline opens the presets; on the Camera tab, Orbit swings the camera around the card. Space plays the move: the card turns in perspective as the camera circles it.

How to

Swing the camera around a title

1. Select the group or frame. In the Design panel's 3D section, turn on 3D scene. (The recording's template, Title card 3D, already is one.)
2. Click + in the transport bar, open the Camera tab and pick Orbit. The camera circles the point of interest by the preset's Angle.
3. Press Home, then Space.

Truck, Crane and Pan move the camera the same way. Push in, Pull out, Dolly, Drift and Zoom through work on any group or frame, 3D or not.

Tilt a card toward the viewer

Select a layer inside the scene. In its 3D layer section, set X° (tilt about its horizontal axis), Y° (turn about its vertical axis) and Z (depth toward you). Key them like anything else. Rotation is still the turn in the picture plane, and the anchor is the pivot for all three.

Light it

In the scene's Lights, click + and add an Ambient, Directional, Point or Spot light. Give it a colour and Intensity. Point, directional and spot lights have a position (X, Y, Z); directional and spot lights aim at a target (→X, →Y, →Z); a spot has a Cone angle and Soft edge. Hide light compares with and without.

Make a part of a 3D object interactive

A layer in a scene is a flat card, and an instance is one card too. To build an object from parts that react (the Burger reveal template's burger: each layer lifts on hover and comes forward on a click), make each part a component whose layers are its pieces in 3D, turn on Keep 3D in scenes in the component's 3D section (preserve3d), and give it a hover variant with Change to (While hovering). Its instances then stay solid: their layers are the scene's own 3D layers, placed through the instance, in whichever variant it shows. A component that draws a fill, stroke or effect of its own, or clips, is still one card.

Turn it with a drag

Add an On drag interaction with Orbit in 3D to the scene (see actions) and choose the group to turn. In present mode, and in the exported page, dragging turns it.

Reference

The camera

The perspective origin and the point of interest are set by the agent (edit_3d_scene).

Materials

Takes lights decides whether a layer answers the scene's lights at all. Amb, Diff and Spec are how much ambient, diffuse and specular light it shows (as %), and Shine (1 to 512) how tight its highlight is. With no lights, layers draw exactly as they look flat.

What's keyable

Every placement, material, camera and light field: see what can be animated.

Limits

Layers are flat cards sorted by depth, so two cards that cross don't cut through each other. Web export keeps the 3D placement, the parts' interactions and the orbiting drag (see code and web export), but not the lights: shade parts with their own colours. Lottie can't carry 3D, so a 3D scene blocks a Lottie export.