User Guide & Tips

This guide helps you bring your designs to life using ShapesXR's animation system. With just a few frames and simple edits, you can create smooth, dynamic transitions without needing to code.

Step 1: Create Frames

You need at least two frames to animate. How to add a new frame: read here.

Duplicate your frame when you want to preserve most content but animate just a few differences.

Step 2: Animate with Object Changes

With two or more frames prepared, ShapesXR can animate the transition from one frame to the next. The animation system will automatically interpolate changes in object properties between frames. Here’s how to set up and preview a simple animation step-by-step:

1. Design Frame 1 (Starting State): Begin by arranging your scene in the first frame. Place objects where you want them, and set any properties (position, rotation, scale, color, opacity, etc.) for this starting state.

Example: In Frame 1, you place a cube on the left side of your space and color it blue.

  1. Design Frame 2 (Ending State): Now add a second frame, which will be the next state in your animation. When you create Frame 2, it may start as a duplicate of Frame 1’s content (if you used the duplicate function) or as a blank slate (if you added a new empty frame). Modify this frame to create the ending state of your animation. Move or transform objects and change their properties as needed.

Continuing the example: In Frame 2, you take that same cube and move it to the right side of the space, and perhaps change its color to red. You can also decide to add new objects in Frame 2 or remove objects that were in Frame 1 – the system will handle those appearances/disappearances in the transition.

Step 3: Refine Transitions

Once you have two frames with differences between them, ShapesXR automatically generates an animation link. In the Frames menu, you’ll notice a line or connector between Frame 1 and Frame 2. This connector is usually labeled with a small time value like “0.3s”, indicating there is a 0.3-second transition animating the changes from Frame 1 to Frame 2. By default, ShapesXR might apply a standard easing (for example, a cubic ease-out) for this tween, giving you a basic smooth animation without any extra work.

You can see the available types of transitions and easing here.

Step 4: Preview and Iterate

Enter Play mode (controller stick press or toolbar button). Use the thumbstick to navigate frames and preview animations.

Continuing the example: In Play mode, advance to the next frame using your controller (for instance, flick the stick to the right to go from Frame 1 to Frame 2). You should see the cube move from the left side to the right side of your space smoothly over a fraction of a second. Its color will transition from blue to red during the move. Any other changes you made (such as objects appearing/disappearing or resizing) will also animate accordingly. This is the tweening in effect – the system is interpolating all the differences between the two frames over the duration of the transition. If you have Autoplay enabled (more on that later), the system would automatically play this transition without requiring you to flick the stick.

Step 5: Enable Autoplay

Autoplay is a feature that automatically plays through your frames in sequence, looping back to the beginning after the last frame, without requiring manual input for each transition. It’s useful for showcasing your prototype in a continuous loop (for instance, during a presentation or on a display).

With Autoplay on, as soon as you enter Play mode, the system will progress through Frame 1 to Frame 2 to Frame 3, and so on, using the defined transitions at each step. Upon reaching the final frame in the sequence, it will loop back to Frame 1 and continue. This looping will continue indefinitely until you stop it.

Perfect for:

  • Kiosks

  • Showcases

  • Background UI flows

Step 6: Add Interactive Transitions

You can use interactive triggers to navigate frames as well. For example, you might have an object with an “On click -> Go to frame” interaction. These triggered frame changes will utilize the transition you’ve set up for the interaction. It can differ from the transition set for the destination frame in the Frames tab. This is great for creating interactive menus or branching scenarios where the user’s choice leads to another frame with a nice, smooth transition.

Make your animation interactive by assigning frame jumps to objects:

  1. Select an object and open the Interactivity tab.

  2. Add a trigger (e.g., On click).

  3. Assign the Go to Frame action, select the destination frame, and set transition parameters like type, easing, and duration.

ShapesXR will play the specified transition if the frame switching is triggered via the object clicking, otherwise, when switching frames manually or autoplay, the transition specified in the Frames tab will be played.

Example: Create a button that slides in a menu by transitioning from the "Main" frame to the "Menu Open" frame.

Step 7: Animation Toggle in Edit Mode

In the Settings, there's a setting to toggle animation playback in Edit mode. This option controls whether transitions are animated when switching frames during editing.

  • When Enabled: Transitions play when switching frames in Edit mode — useful for fine-tuning motion timing and effects.

  • When Disabled: Frame switching becomes immediate — better for speed and efficiency when editing or adding content.

Bonus Effects and Tricks

  • Slide In from Side: Move an object far offscreen in Frame 1, bring it into place in Frame 2.

  • Fade Between UI States: Use Dissolve between frames where visibility/opacity differs.

  • Zoom In Effect: Set the camera or container object to scale up between frames.

  • Scene Switch: Fade everything out (set opacity 0) and fade in new content in the next frame.

  • Looping Element: Combine a few frames with slight object adjustments, enable Autoplay.

Last updated