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.
Each frame you create is like a new state of your design. You can switch to any frame at any time to edit that state. Use the Frames list or flick the non-dominant hand’s stick left/right to navigate between frames quickly. For example, Frame 1 might be your “Home Screen” state, Frame 2 could be an “Options Menu” state, Frame 3 a “Settings Panel” state, etc. Once you have multiple frames set up, you’re ready to create animations between them.
As your project grows, keep your frames organized. Use clear names for each frame (e.g., “Intro Scene”, “Menu Opened”, “Menu Option 1 Selected”, etc.). This will help you manage transitions and interactive triggers without confusion.
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.
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.
Want to fade an object in? Set its visibility to 0% in Frame 1 and 100% in Frame 2. Animate a pop-in? Set scale to 0 in Frame 1 and 1 in Frame 2.
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.
Combine Back + InOut + 500ms to create a fun bounce-in effect. Use Dissolve for clean state changes, like onboarding screens.
Step 4: Preview and Iterate
Enter Play mode (controller stick press or toolbar button). Use the thumbstick to navigate frames and preview animations.
Test with different transition settings to see what feels best. The same movement can feel snappy or soft depending on the easing.
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.
If the transition doesn’t look quite right or something isn’t as expected, exit Play mode to make adjustments. Test in Play Mode often! The way things animate in Play mode is sometimes hard to judge just by scrubbing through frames in edit mode. It’s a good habit to frequently jump into Play mode and experience the transitions as a user would from the viewpoints. This lets you catch if something feels too fast, too slow, or jarring, and then you can adjust accordingly (either by changing transition settings or altering the frame content).
Remember, you can always add more frames for additional steps in a sequence or remove frames if you want to simplify the animation.
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
Combine Autoplay with Dissolve to create ambient loop sequences or dynamic backgrounds.
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:
Select an object and open the Interactivity tab.
Add a trigger (e.g., On click).
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.
Combine with Back easing to give UI a lively, responsive motion.
Instant Transitions for Specific Cases: If you want certain frame changes to be immediate (maybe as a stylistic choice or for usability), set their transition type to Instant (for example, if you want instant frame switches for utility buttons (e.g., closing modal windows).
A common use case: you might have a looping autoplay animation but want to give the user the option to jump abruptly to a specific frame — like a main menu — without having to watch the entire animation. By using an interactive trigger with “Go to frame” and setting the transition to Instant, you create a direct cut.
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.
Turn off the toggle when setting up or populating complex layouts.
Turn it on when refining animations, so you can preview the motion without switching to Play mode.
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