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
});
2
3
4
5
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
});
2
3
4
5
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');
});
2
3
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');
});
2
3
stopAnimations
stopAnimations(callback: Function)
Stops all the animations.
api.stopAnimations(function(){
console.log('All animations stopped');
});
2
3
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');
});
2
3
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');
});
2
3