/w=32,quality=90,fit=scale-down){kind=logo}
/w=256,quality=90,fit=scale-down)
Getting started
System Requirements
Rendering
Vectary Dashboard
Account Settings
Roles
User Interface
Scene Orientation
Units
How To Get HelpImporting
/w=3840,quality=90,fit=scale-down)
Import formats
Figma frames import /w=3840,quality=90,fit=scale-down)
CAD filesLabsDesign process
Design mode
Materials and Textures
Animated Materials/w=3840,quality=90,fit=scale-down)
Decals
UV mapping
Camera
Lighting and Environment
Effects
Background
Ground plane
Control Bar/w=3840,quality=90,fit=scale-down)
Libraries
Edit mode3D Configurator
Variants/w=3840,quality=90,fit=scale-down)
Interactions/w=3840,quality=90,fit=scale-down)
Animations
Floating UI
Hotspots
Variables & Expressions (Beta)Scene and project settings
Version History/w=3840,quality=90,fit=scale-down)
Augmented Reality (WebAR)
WebXR (beta)
Loading screen
Mouse controls
Interaction prompt
Menu - SettingsSharing, exporting, embedding
Sharing/w=3840,quality=90,fit=scale-down)
Performance analyzer
Optimizing a shared project/w=3840,quality=90,fit=scale-down)
Project cloning
Embedding to other software
Export optionsOther
Figma Plugin - Vectary 3D Studio Lite
2D to 3D
Adding comments
Object Editing
Left bar 
ShortcutsModel API
/w=3840,quality=90,fit=scale-down)
Introduction/w=3840,quality=90,fit=scale-down)
Quick Start
Events & Listeners/w=3840,quality=90,fit=scale-down)
Floating UI Configurators/w=3840,quality=90,fit=scale-down)
EcommerceAnimations
Overview
Vectary’s animation system is based on keyframes, allowing for precise control over object transformations within a structured timeline. The animation workflow is built around a timeline where keyframes define changes over time.
To animate objects, switch to Animate mode.
Timeline
The timeline is the primary interface for managing animations in Vectary. It provides a visual representation of keyframes along a linear time axis, allowing precise control over animation timing and transitions. The timeline enables to set, move, and edit keyframes, adjust interpolation, playback type, and structure animations efficiently.
Master Handlers & Keyframes
The timeline displays only two keyframes by default - the first and last - called Master Handlers.
All intermediate keyframes are contained within the master group and can be accessed by clicking the expand icon or double-clicking the grey line.
Dragging a Master Handler scales all keyframes proportionally
Keyframes
- To record data into a keyframe, move the playhead to the desired position and transform the object on the canvas. Each transformation (position, rotation, scale) is automatically recorded into a keyframe at the playhead's position.
- To overwrite an existing keyframe, position the playhead over the keyframe and modify the object's transformation. The new transformation values will replace the previous ones in that keyframe.
- Keyframes can be moved individually or in groups. To select multiple keyframes, either hold Shift and click on them or drag with the left mouse button to select a range of keyframes.
Interpolation
Interpolation controls how animation transitions between keyframes.
To change interpolation, select at least one keyframe and choose the desired method.
Available interpolation types:
- Ease Auto — Automatically adjusts smoothing for the best transition.
- Ease In & Out — Starts slowly, accelerates, and then decelerates toward the end.
- Ease In — Starts slowly and then moves at a constant rate.
- Ease Out — Starts immediately and slows down toward the end.
- Linear — Moves at a constant speed without acceleration.
- Constant — Instantly switches states without transition.
Animation tabs
Multiple tabs can be created above the timeline, each representing a separate animation with its own timeline.
- Tabs can be rearranged by dragging them
- Right-clicking on a tab opens a context menu with options to duplicate, delete, or invert the animation
- Inverting reverses the order of keyframes, creating a mirrored animation
- Each animation tab can be controlled individually using the Animation interaction
- Tab can be renamed by double-clicking on it
Timeline scale
The timeline scale controls the level of detail in the animation timeline:
- 100% — 1 grid step = 0.1s
- 10% — 1 grid step = 0.01s
- 1000% — 1 grid step = 1s
Playhead (CTI)
The playhead is a movable indicator that represents the current position within the animation timeline. It determines where new keyframes are recorded and serves as a reference point for editing animation sequences.
- Moving the playhead allows previewing animation states at different points in time.
- Any transformation applied to an object while the playhead is positioned on the timeline automatically creates or updates a keyframe.
- The playhead can be dragged along the timeline to navigate through the animation.
- Clicking on the timeline moves the playhead to that position.
Mark In & Mark Out
Mark In and Mark Out define the playback range of an animation. This range determines which part of the animation is played, but it does not affect the placement or existence of keyframes - keyframes can exist outside the Mark In/Out range and remain unchanged.
- Mark In defines the start of the animation.
- Mark Out defines the end of the animation.
- Both can be moved independently by dragging.
- Adjusting Mark In/Out does not affect keyframes; keyframes outside this range simply won't play.
- Double-click on Mark In/Out to snap to the first or last keyframe.
- Hold Shift while dragging to scale the animation proportionally.
Playback type
Defines how the animation plays back.
Playback types:
- Single — Plays once and stops
- Loop — Repeats continuously
- Ping-pong — Plays forward, then reverses
Base state
The Base State represents the object's original transformation in Design Mode. Each keyframe modifies specific transformation parameters, but any parameters not animated will always follow the Base State.
Importing
Formats | Animation type |
GLTF | - Transform animations (position, rotation, scale)
- Skeletal animations |
GLB | - Transform animations (position, rotation, scale)
- Skeletal animations |
FBX | - Transform animations (position, rotation, scale)
- Skeletal animations |
Skeletal animations
Skeletal animations can be imported. Bones can be manipulated and modified, allowing for animation, interaction, and transformation. However, creating bones from scratch and linking them to geometry is not yet supported but planned for future updates.
Exporting
Supported export formats:
- GLTF
- GLB
Shortcuts
For shortcuts to function, the cursor must be in the timeline area.
Shortcut | Action |
Spacebar | Play/pause from the current position |
Enter | Play from the beginning |
Left Arrow | Move the playhead left |
Right Arrow | Move the playhead right |
Delete | Remove the selected keyframe |