Animation system providing enter/exit transitions, morphing animations, and timeline-based keyframe animations.
Core animation system for adding transitions and motion to visualizations.
/**
* Configures animations for chart elements
* @param options - Animation configuration options
*/
animate(options: AnimationOptions): MarkNode;
interface AnimationOptions {
/** Enter animation configuration */
enter?: AnimationSpec;
/** Update animation configuration */
update?: AnimationSpec;
/** Exit animation configuration */
exit?: AnimationSpec;
/** Global animation duration */
duration?: number;
/** Global animation delay */
delay?: number;
/** Animation easing function */
easing?: string | ((t: number) => number);
}
interface AnimationSpec {
/** Animation type */
type: string;
/** Animation duration in milliseconds */
duration?: number;
/** Animation delay in milliseconds */
delay?: number;
/** Animation easing */
easing?: string | ((t: number) => number);
/** Animation-specific options */
[key: string]: any;
}Animations that scale elements during enter/exit transitions.
/**
* Scale-in animation along X axis
*/
animate(options: {
enter: {
type: "scaleInX";
duration?: number;
delay?: number;
};
}): MarkNode;
/**
* Scale-in animation along Y axis
*/
animate(options: {
enter: {
type: "scaleInY";
duration?: number;
delay?: number;
};
}): MarkNode;
/**
* Scale-out animation along X axis
*/
animate(options: {
exit: {
type: "scaleOutX";
duration?: number;
delay?: number;
};
}): MarkNode;
/**
* Scale-out animation along Y axis
*/
animate(options: {
exit: {
type: "scaleOutY";
duration?: number;
delay?: number;
};
}): MarkNode;Scale Animation Examples:
// Scale-in animation for bar chart
chart
.interval()
.data(salesData)
.encode("x", "category")
.encode("y", "sales")
.animate({
enter: {
type: "scaleInY",
duration: 1000,
delay: (d, i) => i * 100 // Staggered animation
}
});
// Scale-out on exit
chart
.point()
.data(scatterData)
.encode("x", "x")
.encode("y", "y")
.animate({
exit: {
type: "scaleOutX",
duration: 500
}
});Fade-in and fade-out animations for smooth element transitions.
/**
* Fade-in animation
*/
animate(options: {
enter: {
type: "fadeIn";
duration?: number;
delay?: number;
};
}): MarkNode;
/**
* Fade-out animation
*/
animate(options: {
exit: {
type: "fadeOut";
duration?: number;
delay?: number;
};
}): MarkNode;Opacity Animation Examples:
// Fade-in for new data points
chart
.point()
.data(dataset)
.encode("x", "height")
.encode("y", "weight")
.animate({
enter: {
type: "fadeIn",
duration: 800
},
exit: {
type: "fadeOut",
duration: 400
}
});Animations that grow elements from a specific direction or point.
/**
* Grow-in animation along X axis
*/
animate(options: {
enter: {
type: "growInX";
duration?: number;
delay?: number;
};
}): MarkNode;
/**
* Grow-in animation along Y axis
*/
animate(options: {
enter: {
type: "growInY";
duration?: number;
delay?: number;
};
}): MarkNode;Growth Animation Examples:
// Horizontal bar chart with growth animation
chart
.interval()
.data(data)
.coordinate("transpose")
.encode("x", "value")
.encode("y", "category")
.animate({
enter: {
type: "growInX",
duration: 1200,
easing: "ease-out"
}
});Unique animation effects for specific visualization types.
/**
* Wave-in animation effect
*/
animate(options: {
enter: {
type: "waveIn";
duration?: number;
delay?: number;
};
}): MarkNode;
/**
* Zoom-in animation effect
*/
animate(options: {
enter: {
type: "zoomIn";
duration?: number;
delay?: number;
};
}): MarkNode;
/**
* Zoom-out animation effect
*/
animate(options: {
exit: {
type: "zoomOut";
duration?: number;
delay?: number;
};
}): MarkNode;
/**
* Path drawing animation for lines
*/
animate(options: {
enter: {
type: "pathIn";
duration?: number;
delay?: number;
};
}): MarkNode;
/**
* Shape morphing animation for updates
*/
animate(options: {
update: {
type: "morphing";
duration?: number;
delay?: number;
};
}): MarkNode;Specialized Animation Examples:
// Line chart with path drawing animation
chart
.line()
.data(timeSeriesData)
.encode("x", "date")
.encode("y", "value")
.animate({
enter: {
type: "pathIn",
duration: 2000,
easing: "linear"
}
});
// Morphing animation for shape updates
chart
.area()
.data(areaData)
.encode("x", "x")
.encode("y", "y")
.animate({
update: {
type: "morphing",
duration: 1000,
easing: "ease-in-out"
}
});
// Wave animation for water-like effects
chart
.area()
.data(waveData)
.encode("x", "x")
.encode("y", "height")
.animate({
enter: {
type: "waveIn",
duration: 1500
}
});Precise control over animation timing and easing functions.
interface AnimationTiming {
/** Animation duration in milliseconds */
duration?: number;
/** Animation delay in milliseconds */
delay?: number | ((data: any, index: number) => number);
/** Easing function */
easing?: EasingFunction | string;
}
type EasingFunction = (t: number) => number;
// Built-in easing functions
type EasingName =
| "linear"
| "ease" | "ease-in" | "ease-out" | "ease-in-out"
| "bounce" | "bounce-in" | "bounce-out" | "bounce-in-out"
| "elastic" | "elastic-in" | "elastic-out" | "elastic-in-out"
| "back" | "back-in" | "back-out" | "back-in-out";Timing and Easing Examples:
// Staggered animation with custom delay
chart
.interval()
.data(data)
.encode("x", "category")
.encode("y", "value")
.animate({
enter: {
type: "scaleInY",
duration: 800,
delay: (d, i) => i * 150, // 150ms delay between each bar
easing: "ease-out"
}
});
// Bounce animation with custom timing
chart
.point()
.data(data)
.encode("x", "x")
.encode("y", "y")
.animate({
enter: {
type: "scaleInX",
duration: 1200,
easing: "bounce-out"
}
});
// Custom easing function
chart
.line()
.data(data)
.encode("x", "x")
.encode("y", "y")
.animate({
enter: {
type: "pathIn",
duration: 2000,
easing: (t) => t * t * (3 - 2 * t) // Smoothstep function
}
});Complex animations with multiple keyframes and states.
interface KeyframeAnimation {
/** Animation keyframes */
keyframes: AnimationKeyframe[];
/** Total animation duration */
duration: number;
/** Number of iterations */
iterations?: number | "infinite";
/** Animation direction */
direction?: "normal" | "reverse" | "alternate";
}
interface AnimationKeyframe {
/** Time offset (0-1) */
offset: number;
/** Visual properties at this keyframe */
[property: string]: any;
}Keyframe Animation Examples:
// Pulsing animation
chart
.point()
.data(data)
.encode("x", "x")
.encode("y", "y")
.animate({
enter: {
type: "keyframe",
keyframes: [
{ offset: 0, opacity: 0, size: 0 },
{ offset: 0.5, opacity: 1, size: 8 },
{ offset: 1, opacity: 0.7, size: 5 }
],
duration: 2000,
iterations: "infinite",
direction: "alternate"
}
});Event system for animation lifecycle management.
interface AnimationEvents {
/** Animation started */
"animation:start": (event: AnimationEvent) => void;
/** Animation ended */
"animation:end": (event: AnimationEvent) => void;
/** Animation iteration completed */
"animation:iteration": (event: AnimationEvent) => void;
/** Animation cancelled */
"animation:cancel": (event: AnimationEvent) => void;
}
interface AnimationEvent {
type: string;
target: any;
animationType: string;
currentTime: number;
totalTime: number;
}Animation Event Examples:
// Animation with event handling
chart
.interval()
.data(data)
.encode("x", "category")
.encode("y", "value")
.animate({
enter: {
type: "scaleInY",
duration: 1000
}
})
.on("animation:start", (event) => {
console.log("Animation started:", event.animationType);
})
.on("animation:end", (event) => {
console.log("Animation completed");
// Trigger next animation or update
});Animation performance considerations and optimization techniques.
interface AnimationPerformance {
/** Use GPU acceleration when available */
useGPU?: boolean;
/** Limit concurrent animations */
maxConcurrent?: number;
/** Skip frames for better performance */
skipFrames?: number;
/** Use low-quality rendering during animation */
lowQuality?: boolean;
}Performance Examples:
// Optimized animation for large datasets
chart
.point()
.data(largeDataset)
.encode("x", "x")
.encode("y", "y")
.animate({
enter: {
type: "fadeIn",
duration: 500,
performance: {
useGPU: true,
maxConcurrent: 100,
lowQuality: true
}
}
});Chaining multiple animations for complex motion sequences.
interface AnimationSequence {
/** Sequence of animations */
sequence: AnimationSpec[];
/** Timing between animations */
timing?: "sequential" | "parallel" | "staggered";
}Sequence Examples:
// Sequential animation chain
chart
.interval()
.data(data)
.encode("x", "category")
.encode("y", "value")
.animate({
enter: {
type: "sequence",
sequence: [
{ type: "fadeIn", duration: 500 },
{ type: "scaleInY", duration: 800 },
{ type: "bounce", duration: 300 }
],
timing: "sequential"
}
});