Animation Basics

Frames

Animations are based on differences between frames (former scenes). The system interpolates changes to objects such as position, color, opacity, and visibility.

Objects persist across all frames, even if hidden in a particular one.

Creating Frames:

• Quick-Access Carousel: Use the + button to duplicate the current frame to the end of the list.

• Quick-Access Action Bar: Activate the action bar by touching the stick and use the + button to duplicate the current frame, or the Create empty frame button to add a new one.

• Frames Tab: Navigate to Menu > Space > Frames Tab. Frames can be renamed, duplicated, deleted, and reordered from this panel, too.

Frame switching is available through the carousel, the Frames list, or controller input. Object states are automatically preserved per frame.

Transitions

When you have at least two frames, ShapesXR can automatically animate (tween) the differences between one frame and the next or previous.

Transitions apply to any property difference, not just movement. You can animate color, materials, and even object presence.

Go to Space menu > Frames tab. You can see the created frames here. If you point and click between two frames, the Transition menu will open. It allows you to set the animation between these two frames, and you can use the default transition or set a custom.

Enter Play mode to see the tween in action. When you advance from one frame to another (using the controller or other trigger), the system smoothly animates the changes: objects will move to their new positions, colors will shift, visibility will toggle, and so on, all over the specified duration.

Transition Types (Easing Curves)

Transitions define how the changes between two frames are animated. ShapesXR provides several types of easing curves for transitions, which affect the timing and feel of the motion.

• Instant: No animation at all – the scene snaps to the next frame immediately (a hard cut).

• Linear: A straight, constant interpolation. The change happens at a steady, uniform rate from start to finish (no acceleration or deceleration).

• Cubic: A smooth cubic easing curve. This creates more natural motion, with acceleration or deceleration (depending on easing direction, e.g. ease-in or ease-out). It’s one of the commonly used easing types for pleasing animations.

• Expo (Exponential): An easing curve that starts or ends very gradually but changes speed dramatically. For example, an “ease-out expo” will start fast and then very slowly finish the last part of the animation

• Circ (Circular): A circular easing curve, which produces gentle, smooth motion that mimics the physics of objects moving in a circular path (slow start or finish with a natural feel).

• Back: An overshooting curve where the animation goes slightly beyond the target value and then “backs” into place. This creates a small rebound effect, adding a playful or dynamic overshoot to the motion.

• Dissolve: A crossfade transition. The outgoing frame fades out while the incoming frame fades in, instead of moving elements along a path. This is useful for smoothly transitioning when position movement isn’t desired, or for emphasizing a complete scene change.

Easing Direction

For transition types that involve easing (Cubic, Expo, Circ, Back), you can specify an easing direction to control the acceleration pattern.

• Ease In: The animation starts slowly and then speeds up towards the end (the motion eases into the transition).

• Ease Out: The animation starts quickly and then slows down as it completes (the motion eases out of the transition).

• Ease In-Out: A combination of both – the animation starts slow, accelerates in the middle, and then decelerates at the end. This gives a smooth start and finish.

Instant, Linear, and Dissolve transitions don’t use easing directions (since Instant has no motion, Linear is constant, and Dissolve is a uniform fade). In the UI, if those types are selected, the easing direction option will be disabled or not applicable.

Duration

The transition duration can be customized according to your preference. The default setting typically displays a duration, such as 300 ms or 0.3 s. Modifying this value enables you to achieve a slower or faster animation effect. For instance, setting the duration to 1000 ms (1 second) extends the transition, which can be effective for a dramatic effect, while a duration of 100 ms results in a swift transition.

After adjusting the type, easing, or duration, close the Transition Settings panel (click the X). The new settings are saved for that transition. You can immediately test the effect by going into Play mode and triggering the frame change again. The animation will now use your customized settings. If it’s still not perfect, you can tweak these settings further until you’re satisfied.

Autoplay

Autoplay cycles through frames automatically, simulating a continuous playback loop.

• Enable: Toggle in the Scenes toolbar. Applies at the space level.

• Behavior: When active, entering Play mode triggers sequential animation through all frames. Upon reaching the last frame, playback restarts from the first.

• When Disabled: User must advance frames manually using the controller, UI carousel, or interactive triggers.

Autoplay respects all transition types, durations, and easing settings.

Animation Toggle for Edit Mode

ShapesXR includes a toggle in the Settings Menu that controls whether transitions animate while switching frames in Edit mode.

• Enabled: Transitions will play in Edit mode when switching frames. Useful for adjusting animations without needing to enter Play mode.

• Disabled: Frame changes are immediate, with no animation. Ideal when speed is needed - for example, while building a layout or populating content.

Use this toggle to balance workflow speed and animation accuracy during editing.