Advanced
Animation Magic
Bring your configurators to life
Animation Basics
Add motion and interactivity to your configurators.
Move Objects
Animate along paths
Rotate Elements
Spin over time
State Transitions
Morph between states
Interactive Demos
Showcase products
Timer-Based Animations
Use timers to create time-based motion.
Timer Element
Type | Duration | Loop | Autostart timer | 2000 | true | true
Parameter
Description
Example
type
Element type
timer
duration
Animation length (ms)
2000
loop
Repeat animation
true
autostart
Start automatically
true
Animated Properties
Animate any numeric property using formulas.
Sine Wave Motion
Type | X | Y | Z cube | =50 + SIN(Timer*0.01)*100 | 0 | 0
Moves a cube back and forth along the X-axis based on the timer value.
Camera Flights
Create cinematic camera paths.
Camera Path
Parameter
Description
Example
type
Element type
cameraflight
positions
Array of camera positions
[[0,0,100],[100,0,100]]
duration
Flight duration (ms)
5000
loop
Repeat flight
true
Transitions
Smoothly animate between values.
Value Transition
Type | Property | From | To | Duration | Easing transition | opacity | 0 | 1 | 500 | easeInOut
Easing Functions
Control the feel of your animations.
Linear
Constant speed
Ease In
Start slow
Ease Out
End slow
Ease In/Out
Start and end slow
Bounce
Bouncy effect
Elastic
Springy effect
Triggered Animations
Start animations on user interaction.
Button Trigger
Type | Label | OnClick button | Animate | startAnimation
Performance Tips
Keep your animations smooth and fast.
Limit Objects
Too many animations slow performance
Simple Paths
Complex calculations reduce frame rate
Test Devices
Ensure smooth playback everywhere
Loop Settings
Infinite loops use more resources
Example: Rotating Showcase
Type | Name | RY timer | Rotate | 0 cube | Box | =Rotate * 0.1
Creates a slowly rotating cube for product showcase.