Product Animations

Bring your products to life with dynamic animations that showcase functionality, demonstrate features, and create compelling user experiences. Product animations are essential for modern e-commerce, allowing customers to understand complex products, visualize functionality, and engage with your brand in meaningful ways.

The Power of Product Animation

In today's competitive digital marketplace, static product images are no longer sufficient. Animations provide the dynamic storytelling element that helps customers understand your products better, leading to increased engagement, reduced returns, and higher conversion rates.

Why Product Animations Matter:

• Increased Understanding - Show how products work, move, or transform
• Enhanced Engagement - Keep users interested and exploring longer
• Reduced Returns - Clear functionality demonstration sets proper expectations
• Premium Perception - Animated products appear more sophisticated and valuable
• Competitive Advantage - Stand out from static product presentations

Control animations within your 3D product models to create engaging product demonstrations and interactive experiences. Perfect for showing product functionality, assembly processes, or highlighting features.

getAnimations

getAnimations(callback: Function)

Returns the list of all animations available for the product. Use this to build interactive animation controls for product demonstrations.

Product Demo Example:

// Get all product animations (e.g., door opening, drawer sliding)
api.getAnimations(function(animations){
  console.log('Product animations:', animations); // Result: [{ name: 'door_open', speedRatio: 1 }]
  // Build animation control buttons for product demo
});

---

playAnimation

playAnimation(animationId: string, callback: Function)

Plays a specific product animation by animationId. Perfect for demonstrating product functionality or features. Get the animationId from the getAnimations list.

Product Feature Demo:

// Play a product feature animation (e.g., car door opening)
api.playAnimation('door_open', function(){
  console.log('Product feature animation playing');
  // Update UI to show animation is active
});

---

pauseAnimation

pauseAnimation(animationId: string, callback: Function)

Pauses the animation by animationId. Get the animationId from the getAnimations list.

api.pauseAnimation('walk', function(){
  console.log('Animation paused');
});

---

stopAnimation

stopAnimation(animationId: string, callback: Function)

Stops the animation by animationId. Get the animationId from the getAnimations list.

api.stopAnimation('walk', function(){
  console.log('Animation stopped');
});

---

stopAnimations

stopAnimations(callback: Function)

Stops all the animations.

api.stopAnimations(function(){
  console.log('All animations stopped');
});

---

setAnimationCycleMode

setAnimationCycleMode(animationId: string, mode: 'loop' | 'once' , callback: Function)

Sets the animation cycle mode. (Default is once). Get the animationId from the getAnimations list.

api.setAnimationCycleMode('walk', 'loop', function(){
  console.log('Animation cycle mode changed');
});

---

setAnimationSpeed

setAnimationSpeed(speed: number, callback: Function)

Sets the global animation speed.

speed is a speed factor (a number, default is 1). A negative value will play the animation in reverse.

api.setAnimationSpeed(1.5, function(){
  console.log('Animation speed changed');
});

---