Animations
Create dynamic motion by changing properties over time.
Animations allow you to create dynamic effects by changing clip properties over time. All clips (text, images, videos, shapes) can be animated.
Basic Animation
import { Studio, Text } from "@designcombo/video";
const text = new Text("Hello");
// Animate a property (keyframe-based)
text.setAnimation({
'0%': { left: 0, opacity: 0 },
'100%': { left: 500, opacity: 1 },
}, {
duration: 1e6, // 1 second in microseconds
easing: 'easeOut'
});Control animation timing with easing functions:
text.animate({
property: "left",
fromValue: 0,
toValue: 1920,
startFrame: 0,
duration: 120,
easing: "easeInOut", // smooth acceleration and deceleration
});Available Easing Options
linear- Constant speedeaseIn- Slow start, fast endeaseOut- Fast start, slow endeaseInOut- Slow start and end, fast middleeaseInQuad,easeOutQuad,easeInOutQuadeaseInCubic,easeOutCubic,easeInOutCubic
Multi-Property Animations
Animate multiple properties with synchronized keyframes:
const imageClip = await Image.fromUrl("photo.jpg");
// Animate position with keyframes
imageClip.animate({
property: "left",
keyframes: [
{ frame: 0, value: 0 },
{ frame: 45, value: 960 },
{ frame: 90, value: 1920 },
],
});
// Animate opacity in sync
imageClip.animate({
property: "opacity",
keyframes: [
{ frame: 0, value: 0 },
{ frame: 30, value: 1 },
{ frame: 60, value: 1 },
{ frame: 90, value: 0 },
],
});Animation Presets
DesignCombo includes various presets for common animations like fades, slides, and zooms.
const imageClip = await Image.fromUrl("photo.jpg");
// Enter with fade and zoom
imageClip.setAnimation("fadeIn", {
duration: 1e6,
});
imageClip.setAnimation("zoomIn", {
duration: 1e6,
delay: 0.5e6, // Delay by 0.5 seconds
});