Timeline & Animations

Timelines and animations allow you to create dynamic video templates where elements can appear, disappear, move, or change over time.

Overview

Animations in heycreo templates use a timeline-based system where each element can have:

• In Animation: How the element appears (fade in, slide in, scale in, etc.)
• Out Animation: How the element disappears (fade out, slide out, scale out, etc.)
• Continuous Animation: Ongoing animation while the element is visible (e.g., Ken Burns effect)

Animations are defined with a start time and duration, and the platform automatically interpolates between states.

Animation Structure

Each element can have an animations object with three types of animations:

interface AnimationState {
  in?: Animation;              // Animation when element appears
  out?: Animation;              // Animation when element disappears
  continuous?: ContinuousAnimation;  // Ongoing animation while visible
}

In Animation

Controls how an element appears in the video:

interface Animation {
  type: AnimationType;         // Animation type (see below)
  startTime: number;            // Start time in milliseconds (0 = video start)
  duration: number;             // Duration in milliseconds
  easing?: 'linear' | 'ease' | 'ease-in' | 'ease-out' | 'ease-in-out';
  from?: {                      // Optional: custom start state
    opacity?: number;
    x?: number;
    y?: number;
    scale?: number;
  };
  to?: {                        // Optional: custom end state
    opacity?: number;
    x?: number;
    y?: number;
    scale?: number;
  };
}

Out Animation

Controls how an element disappears from the video:

interface Animation {
  type: AnimationType;         // Animation type
  startTime: number;            // Start time in milliseconds
  duration: number;             // Duration in milliseconds
  easing?: 'linear' | 'ease' | 'ease-in' | 'ease-out' | 'ease-in-out';
  from?: {                      // Optional: custom start state
    opacity?: number;
    x?: number;
    y?: number;
    scale?: number;
  };
  to?: {                        // Optional: custom end state
    opacity?: number;
    x?: number;
    y?: number;
    scale?: number;
  };
}

Continuous Animation

Ongoing animation that runs while the element is visible:

interface ContinuousAnimation {
  type: 'ken-burns';           // Currently only Ken Burns is supported
  duration: number;             // Duration of one cycle in milliseconds
  intensity?: number;           // Intensity (0-1, default: 0.5)
}

Animation Types

In Animations

Elements can appear using these animation types:

Type	Description	Effect
fade	Fade in	Opacity goes from 0 to 1
scale-in	Scale in	Element grows from scale 0 to 1, with fade
slide-in-left	Slide from left	Element comes from left side
slide-in-right	Slide from right	Element comes from right side
slide-in-up	Slide from above	Element comes from top
slide-in-down	Slide from below	Element comes from bottom

Out Animations

Elements can disappear using these animation types:

Type	Description	Effect
fade	Fade out	Opacity goes from 1 to 0
scale-out	Scale out	Element shrinks from scale 1 to 0, with fade
slide-out-left	Slide to left	Element exits to the left
slide-out-right	Slide to right	Element exits to the right
slide-out-up	Slide upward	Element exits upward
slide-out-down	Slide downward	Element exits downward

Continuous Animations

Type	Description	Effect
ken-burns	Ken Burns effect	Continuous zoom and pan on images

Easing Functions

Easing controls how the animation accelerates and decelerates:

• linear: Constant speed throughout
• ease: Slow start, fast middle, slow end (default)
• ease-in: Slow start, fast end
• ease-out: Fast start, slow end
• ease-in-out: Slow start and end, fast middle

Example: Element with Animations

{
  "id": "headline",
  "type": "text",
  "content": "Welcome",
  "x": 100,
  "y": 100,
  "animations": {
    "in": {
      "type": "slide-in-down",
      "startTime": 0,
      "duration": 800,
      "easing": "ease-out"
    },
    "out": {
      "type": "fade",
      "startTime": 4000,
      "duration": 500,
      "easing": "ease-in"
    }
  }
}

What happens:

• At 0ms: Element starts sliding in from below, fading in
• At 800ms: Element reaches its final position, fully visible
• At 4000ms: Element starts fading out
• At 4500ms: Element is completely invisible

Example: Image with Ken Burns Effect

{
  "id": "background-image",
  "type": "image",
  "content": "https://example.com/image.jpg",
  "x": 0,
  "y": 0,
  "width": 1080,
  "height": 1080,
  "animations": {
    "in": {
      "type": "fade",
      "startTime": 0,
      "duration": 1000,
      "easing": "ease-in-out"
    },
    "continuous": {
      "type": "ken-burns",
      "duration": 10000,
      "intensity": 0.5
    }
  }
}

The image fades in during the first second, then continuously zooms and pans (Ken Burns effect) while visible.

Timeline Best Practices

Timing

• Start animations early: Begin in animations at 0ms or shortly after
• Stagger animations: Offset start times for multiple elements (0ms, 200ms, 400ms) for visual flow
• End before video duration: Ensure out animations complete before the video ends
• Appropriate durations: 500-1500ms for most animations works well

Animation Selection

• Use fade for subtlety: Fade in/out is gentle and professional
• Use slide for movement: Slide animations add dynamic energy
• Use scale for emphasis: Scale-in draws attention to important elements
• Combine animations: Use different in/out types for variety

Performance

• Limit simultaneous animations: Too many elements animating at once can impact performance
• Use continuous animations sparingly: Ken Burns is computationally intensive
• Keep durations reasonable: Very long animations (5+ seconds) may feel slow

Multi-Element Coordination

Coordinate multiple elements for complex sequences:

{
  "elements": [
    {
      "id": "headline",
      "animations": {
        "in": {
          "type": "slide-in-down",
          "startTime": 0,
          "duration": 800
        }
      }
    },
    {
      "id": "subheadline",
      "animations": {
        "in": {
          "type": "fade",
          "startTime": 500,
          "duration": 600
        }
      }
    },
    {
      "id": "cta-button",
      "animations": {
        "in": {
          "type": "scale-in",
          "startTime": 1000,
          "duration": 500
        }
      }
    }
  ]
}

The subheadline starts 500ms after the headline, and the button appears 1000ms after the headline, creating a cascading reveal effect.

See also

• Template Structure - Template format overview
• Video Support - Enabling video in templates