{
  "$mulmocast": {
    "version": "1.1"
  },
  "lang": "en",
  "title": "html_tailwind coverZoom/coverPan test (portrait canvas)",
  "canvasSize": {
    "width": 1024,
    "height": 1792
  },
  "audioParams": {
    "padding": 0,
    "introPadding": 0,
    "closingPadding": 0,
    "outroPadding": 0
  },
  "imageParams": {
    "images": {
      "qaLandscape": {
        "type": "image",
        "source": {
          "kind": "path",
          "path": "images/qa_landscape.jpg"
        }
      },
      "qaPortrait": {
        "type": "image",
        "source": {
          "kind": "path",
          "path": "images/qa_portrait.png"
        }
      }
    }
  },
  "beats": [
    {
      "id": "landscape_zoom_in",
      "duration": 5,
      "image": {
        "type": "html_tailwind",
        "html": [
          "<div class='h-full w-full overflow-hidden relative bg-black'>",
          "  <img id='photo_img' src='image:qaLandscape' style='position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);max-width:none;max-height:none' />",
          "</div>"
        ],
        "script": [
          "const animation = new MulmoAnimation();",
          "animation.coverZoom('#photo_img', { zoomFrom: 1.0, zoomTo: 1.5, start: 0, end: 'auto', easing: 'linear' });"
        ],
        "animation": true
      }
    },
    {
      "id": "landscape_zoom_out",
      "duration": 5,
      "image": {
        "type": "html_tailwind",
        "html": [
          "<div class='h-full w-full overflow-hidden relative bg-black'>",
          "  <img id='photo_img' src='image:qaLandscape' style='position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);max-width:none;max-height:none' />",
          "</div>"
        ],
        "script": [
          "const animation = new MulmoAnimation();",
          "animation.coverZoom('#photo_img', { zoomFrom: 1.5, zoomTo: 1.0, start: 0, end: 'auto', easing: 'linear' });"
        ],
        "animation": true
      }
    },
    {
      "id": "landscape_zoom_pan_bottom_to_top",
      "duration": 5,
      "image": {
        "type": "html_tailwind",
        "html": [
          "<div class='h-full w-full overflow-hidden relative bg-black'>",
          "  <img id='photo_img' src='image:qaLandscape' style='position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);max-width:none;max-height:none' />",
          "</div>"
        ],
        "script": [
          "const animation = new MulmoAnimation();",
          "animation.coverPan('#photo_img', { axis: 'y', direction: 1, distance: 100, zoom: 1.2, start: 0, end: 'auto', easing: 'linear' });"
        ],
        "animation": true
      }
    },
    {
      "id": "landscape_pan_left_to_right_direction",
      "duration": 5,
      "image": {
        "type": "html_tailwind",
        "html": [
          "<div class='h-full w-full overflow-hidden relative bg-black'>",
          "  <img id='photo_img' src='image:qaLandscape' style='position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);max-width:none;max-height:none' />",
          "</div>"
        ],
        "script": [
          "const animation = new MulmoAnimation();",
          "animation.coverPan('#photo_img', { axis: 'x', direction: -1, distance: 100, zoom: 1.2, start: 0, end: 'auto', easing: 'linear' });"
        ],
        "animation": true
      }
    },
    {
      "id": "landscape_pan_left_to_right_from_to_edge",
      "duration": 5,
      "image": {
        "type": "html_tailwind",
        "html": [
          "<div class='h-full w-full overflow-hidden relative bg-black'>",
          "  <img id='photo_img' src='image:qaLandscape' style='position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);max-width:none;max-height:none' />",
          "</div>"
        ],
        "script": [
          "const animation = new MulmoAnimation();",
          "animation.coverPan('#photo_img', { axis: 'x', from: 100, to: 0, zoom: 1.0, start: 0, end: 'auto', easing: 'linear' });"
        ],
        "animation": true
      }
    },
    {
      "id": "portrait_zoom_in",
      "duration": 5,
      "image": {
        "type": "html_tailwind",
        "html": [
          "<div class='h-full w-full overflow-hidden relative bg-black'>",
          "  <img id='photo_img' src='image:qaPortrait' style='position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);max-width:none;max-height:none' />",
          "</div>"
        ],
        "script": [
          "const animation = new MulmoAnimation();",
          "animation.coverZoom('#photo_img', { zoomFrom: 1.0, zoomTo: 1.5, start: 0, end: 'auto', easing: 'linear' });"
        ],
        "animation": true
      }
    },
    {
      "id": "portrait_zoom_out",
      "duration": 5,
      "image": {
        "type": "html_tailwind",
        "html": [
          "<div class='h-full w-full overflow-hidden relative bg-black'>",
          "  <img id='photo_img' src='image:qaPortrait' style='position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);max-width:none;max-height:none' />",
          "</div>"
        ],
        "script": [
          "const animation = new MulmoAnimation();",
          "animation.coverZoom('#photo_img', { zoomFrom: 1.5, zoomTo: 1.0, start: 0, end: 'auto', easing: 'linear' });"
        ],
        "animation": true
      }
    },
    {
      "id": "portrait_pan_bottom_to_top_direction",
      "duration": 5,
      "image": {
        "type": "html_tailwind",
        "html": [
          "<div class='h-full w-full overflow-hidden relative bg-black'>",
          "  <img id='photo_img' src='image:qaPortrait' style='position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);max-width:none;max-height:none' />",
          "</div>"
        ],
        "script": [
          "const animation = new MulmoAnimation();",
          "animation.coverPan('#photo_img', { axis: 'y', direction: 1, distance: 100, zoom: 1.2, start: 0, end: 'auto', easing: 'linear' });"
        ],
        "animation": true
      }
    },
    {
      "id": "portrait_pan_bottom_to_top_from_to_edge",
      "duration": 5,
      "image": {
        "type": "html_tailwind",
        "html": [
          "<div class='h-full w-full overflow-hidden relative bg-black'>",
          "  <img id='photo_img' src='image:qaPortrait' style='position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);max-width:none;max-height:none' />",
          "</div>"
        ],
        "script": [
          "const animation = new MulmoAnimation();",
          "animation.coverPan('#photo_img', { axis: 'y', from: 0, to: 100, zoom: 1.2, start: 0, end: 'auto', easing: 'linear' });"
        ],
        "animation": true
      }
    },
    {
      "id": "portrait_zoom_pan_left_to_right",
      "duration": 5,
      "image": {
        "type": "html_tailwind",
        "html": [
          "<div class='h-full w-full overflow-hidden relative bg-black'>",
          "  <img id='photo_img' src='image:qaPortrait' style='position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);max-width:none;max-height:none' />",
          "</div>"
        ],
        "script": [
          "const animation = new MulmoAnimation();",
          "animation.coverPan('#photo_img', { axis: 'x', direction: -1, distance: 100, zoom: 1.2, start: 0, end: 'auto', easing: 'linear' });"
        ],
        "animation": true
      }
    }
  ]
}