Use Animations

Learn how to bring your videos to life with animations.

Animation Types

Fade Animations

Fade elements in and out:

{
  "animations": [
    { "type": "fadeIn", "duration": 0.5 },
    { "type": "fadeOut", "duration": 0.5, "delay": 4.5 }
  ]
}

Type	Description
`fadeIn`	Fade from transparent to visible
`fadeOut`	Fade from visible to transparent

Slide Animations

Slide elements from a direction:

{
  "animations": [
    { "type": "slideIn", "direction": "up", "duration": 0.8 },
    { "type": "slideOut", "direction": "right", "duration": 0.5 }
  ]
}

Direction	Effect
`up`	From bottom to position
`down`	From top to position
`left`	From right to position
`right`	From left to position

Zoom Animations

Scale elements in and out:

{
  "animations": [
    { "type": "zoomIn", "duration": 0.5 },
    { "type": "zoomOut", "duration": 0.5 }
  ]
}

Custom Animations

Animate specific properties:

Scale Animation

{
  "animations": [
    { "type": "scale", "from": 1, "to": 1.2, "duration": 5 }
  ]
}

Great for Ken Burns effect on images.

Move Animation

{
  "animations": [
    { "type": "move", "from": { "x": 0, "y": 0 }, "to": { "x": 100, "y": 50 }, "duration": 3 }
  ]
}

Rotate Animation

{
  "animations": [
    { "type": "rotate", "from": 0, "to": 360, "duration": 2, "loop": true }
  ]
}

Easing Functions

Control the timing and feel of animations:

{
  "animations": [
    { "type": "zoomIn", "duration": 0.5, "easing": "easeOutBack" }
  ]
}

Available Easing Functions

Easing	Description	Best For
`linear`	Constant speed	Rotation, continuous motion
`easeInSine`	Slow start	Natural deceleration
`easeOutSine`	Slow end	Natural acceleration
`easeInOutSine`	Slow start and end	Smooth transitions
`easeInQuad`	Quadratic acceleration	Building momentum
`easeOutQuad`	Quadratic deceleration	Settling into place
`easeInOutQuad`	Smooth quad curve	General purpose
`easeInCubic`	Cubic acceleration	Strong buildup
`easeOutCubic`	Cubic deceleration	Soft landing
`easeInBack`	Pull back before start	Anticipation
`easeOutBack`	Overshoot then settle	Bouncy feel
`easeInOutBack`	Back easing both ways	Playful motion
`easeInElastic`	Elastic start	Cartoon style
`easeOutElastic`	Elastic end	Bouncy landing
`easeInBounce`	Bouncing start	Playful entrance
`easeOutBounce`	Bouncing end	Natural physics

Animation Properties

Duration

Animation length in seconds:

{ "duration": 0.5 }

Delay

Wait before starting (seconds):

{ "delay": 1.0 }

Loop

Repeat the animation:

{ "loop": true }        // Infinite loop
{ "loop": 3 }           // Loop 3 times

Combining Animations

Multiple animations run simultaneously:

{
  "animations": [
    { "type": "fadeIn", "duration": 0.5 },
    { "type": "slideIn", "direction": "up", "duration": 0.8 },
    { "type": "scale", "from": 0.8, "to": 1, "duration": 0.5 }
  ]
}

Keyframe Animation

For precise control, use keyframes:

{
  "keyframes": [
    {
      "property": "opacity",
      "frames": [
        { "time": 0, "value": 0 },
        { "time": 005, "value": 1, "easing": "easeOutCubic" },
        { "time": 4.5, "value": 1 },
        { "time": 5, "value": 0, "easing": "easeInCubic" }
      ]
    }
  ]
}

Common Patterns

Impactful Entrance

{
  "animations": [
    { "type": "zoomIn", "duration": 0.5, "easing": "easeOutBack" },
    { "type": "fadeIn", "duration": 0.3 }
  ]
}

Ken Burns Effect

{
  "type": "image",
  "animations": [
    { "type": "scale", "from": 1, "to": 1.1, "duration": 5 },
    { "type": "move", "from": { "x": 0, "y": 0 }, "to": { "x": 50, "y": 30 }, "duration": 5 }
  ]
}

Staggered List

{
  "clips": [
    { "text": "Item 1", "start": 0, "animations": [{ "type": "fadeIn", "duration": 0.3 }] },
    { "text": "Item 2", "start": 0.2, "animations": [{ "type": "fadeIn", "duration": 0.3 }] },
    { "text": "Item 3", "start": 0.4, "animations": [{ "type": "fadeIn", "duration": 0.3 }] }
  ]
}

Pulse Effect

{
  "animations": [
    { "type": "scale", "from": 1, "to": 1.05, "duration": 0.5, "loop": true, "easing": "easeInOutSine" }
  ]
}

Best Practices

Keep it subtle: Animations should enhance, not distract
Consistent timing: Use similar durations across elements
Stagger elements: Don't animate everything at once
Match the mood: Animations should fit the content's tone
Performance: Limit simultaneous animations on mobile

Use Animations

Use Animations

Animation Types

Fade Animations

Slide Animations

Zoom Animations

Custom Animations

Scale Animation

Move Animation

Rotate Animation

Easing Functions

Available Easing Functions

Animation Properties

Duration

Delay

Loop

Combining Animations

Keyframe Animation

Common Patterns

Impactful Entrance

Ken Burns Effect

Staggered List

Pulse Effect

Best Practices

Next Steps

On this page