{
  "$mulmocast": {
    "version": "1.1"
  },
  "lang": "en",
  "title": "html_tailwind coverZoom/coverPan test",
  "canvasSize": {
    "width": 1792,
    "height": 1024
  },
  "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_in_from_to_alias",
      "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', { from: 1.0, to: 1.5, start: 0, end: 'auto', easing: 'linear' });"
        ],
        "animation": true
      }
    },
    {
      "id": "landscape_zoom_in_container_selector",
      "duration": 5,
      "image": {
        "type": "html_tailwind",
        "html": [
          "<div class='h-full w-full overflow-hidden relative bg-black'>",
          "  <div id='photo_outer' style='position:absolute;inset:0;overflow:hidden'>",
          "    <div id='photo_inner' style='position:absolute;inset:0'>",
          "      <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>",
          "  </div>",
          "</div>"
        ],
        "script": [
          "const animation = new MulmoAnimation();",
          "animation.coverZoom('#photo_img', { zoomFrom: 1.0, zoomTo: 1.5, start: 0, end: 'auto', easing: 'linear', containerSelector: '#photo_outer' });"
        ],
        "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.2, 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.0, 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
      }
    }
  ]
}