{"html":"<div id=\"{{uc_id}}\">\n    <canvas class=\"sequence\"\/>\n<\/div>","css":"#{{uc_id}} {\n\tposition: relative;\n \twidth: 100%;\n  \tmin-height: 1px;\n\tdisplay: flex;\n  \tjustify-content: center;\t\n}\n#{{uc_id}} .sequence {\n\tposition: absolute;\n\tdisplay: block;\n}\n#{{uc_id}} canvas{\n \tmax-width: 100%;\t\n}","js":"jQuery(document).ready(function(){\n  \n( () => {\n  \n  gsap.registerPlugin(ScrollTrigger);\n  const container = document.querySelector('#{{uc_id}}');\n  const canvas = document.querySelector(\"#{{uc_id}} .sequence\");\n  const context = canvas.getContext(\"2d\");\n  let images = [];\n  let frames = { frame: 0 };\n\n  function render() {\n      context.clearRect(0, 0, canvas.width, canvas.height);\n      context.drawImage(images[frames.frame], 0, 0); \n  }\n\n  function run(mode){\n\t\n    switch ( mode || elementorFrontend.getCurrentDeviceMode() ) {\n      case 'desktop':\n        initDesktop();\n        break;\n      case 'tablet':\n        {% if tablet_folder_url is not empty %}\n          initTablet();\n          break;\n        {% endif %}\t\n      case 'mobile':\n        {% if mobile_folder_url is not empty %}\n          initMobile();\n          break;\n        {% endif %}\t\n      default:\n        initDesktop();\n        break;\n    }\n  }\n\t\n  function initDesktop(){\n\t\t\n      images = [];\n      frames.frame = 0;\n      canvas.width = {{canvas_width}};\n      canvas.height = {{canvas_height}};\n      const frameCount = {{image_count}};\n      const currentFrame = index => (`{{folder_url|raw}}{{file_name|raw}}${(index + 1).toString().padStart({{file_name_prefix_padding}}, '0')}.{{image_extention|raw}}`);\n\n      for (let i = 0; i < frameCount; i++) {\n        const img = new Image();\n        img.src = currentFrame(i);\n        images.push(img);\n        if( i === 0 ) { images[0].onload = render; }\n      }\n\n      gsap.to(frames, {\n        frame: frameCount - 1,\n        snap: \"frame\",\n        scrollTrigger: {\n          scrub: {{scrub}},\n          pin: canvas, \n          start: \"top {{start_location}}%\",\n          end: \"bottom {{end_location}}%\",\n          markers: {{show_markers}},\n          id: \"{{marker_id|raw}}\"\n        },\n        onUpdate: render \n      });\n  }\n\n  function initMobile(){\n    \n      images = [];\n      frames.frame = 0;\n\n      canvas.width = {{mobile_canvas_width}};\n      canvas.height = {{mobile_canvas_height}};\n      const frameCount = {{mobile_image_count}};\n      const currentFrame = index => (`{{mobile_folder_url|raw}}{{file_name_mobile|raw}}${(index + 1).toString().padStart({{mobile_file_name_prefix_padding}}, '0')}.{{image_extention|raw}}`);\n\n      for (let i = 0; i < frameCount; i++) {\n        const img = new Image();\n        img.src = currentFrame(i);\n        images.push(img);\n\t\tif( i === 0 ) { images[0].onload = render; }\n      }\n\n      gsap.to(frames, {\n        frame: frameCount - 1,\n        snap: \"frame\",\n        scrollTrigger: {\n          scrub: {{mobile_scrub}},\n          pin: canvas, \n          start: \"top {{mobile_start_location}}%\",\n          end: \"bottom {{mobile_end_location}}%\",\n          markers: {{mobile_show_markers}},\n          id: \"{{mobile_marker_id|raw}}\"\n        },\n        onUpdate: render \n      });\n  }\n  \n  function initTablet(){\n\n\t  images = [];\n      frames.frame = 0;\n\n      canvas.width = {{tablet_canvas_width}};\n      canvas.height = {{tablet_canvas_height}};\n      const frameCount = {{tablet_image_count}};\n      const currentFrame = index => (`{{tablet_folder_url|raw}}{{file_name_tab|raw}}${(index + 1).toString().padStart({{tablet_file_name_prefix_padding}}, '0')}.{{image_extention|raw}}`);\n\n      for (let i = 0; i < frameCount; i++) {\n        const img = new Image();\n        img.src = currentFrame(i);\n        images.push(img);\n\t\tif( i === 0 ) { images[0].onload = render; }\n      }\n\n      gsap.to(frames, {\n        frame: frameCount - 1,\n        snap: \"frame\",\n        scrollTrigger: {\n          scrub: {{tablet_scrub}},\n          pin: canvas, \n          start: \"top {{tablet_start_location}}%\",\n          end: \"bottom {{tablet_end_location}}%\",\n          markers: {{tablet_show_markers}},\n          id: \"{{tablet_marker_id|raw}}\"\n        },\n        onUpdate: render \n      });\n  }\n\n  function observePreview(){\n\n\tconst config = { attributes: true };\n\tconst callback = function(mutationsList, observer) {\n    console.log(mutationsList);\n      for(let mutation of mutationsList) {\n         if ( mutation.attributeName === 'class' ) {\n\t\t\tif ( mutation.target.classList.contains('elementor-device-desktop') ) { return run('desktop') };\n\t\t\tif ( mutation.target.classList.contains('elementor-device-tablet') ) { return run('tablet') };\n\t\t\tif ( mutation.target.classList.contains('elementor-device-mobile') ) { return run('mobile') };\n\t\t\t\t\n\t\t\t}\n\t\t }\n\t};\n\n    const observer = new MutationObserver(callback)\n    observer.observe(elementor.$previewResponsiveWrapper.find('iframe').contents().find('body')[0], config);\n }\n\n\t\t\n  if ( elementorFrontend.config.environmentMode.edit && elementor.loaded ) {\n\tobservePreview();\n\trun(null);\n  }else{\n    run(null);\n  }\n\n\n}) ();\n\n});"}