{
  "version": 3,
  "sources": ["../../src/scripts/layered-animation.js"],
  "sourcesContent": ["/*globals jQuery:false */\n// import gsap from \"gsap\";\n// import { ScrollTrigger } from \"gsap/ScrollTrigger\";\n\n// gsap.registerPlugin(ScrollTrigger);\n\nconst DEFAULT_TOP_OFFSET = -40;\n\nclass LayeredAnimtion {\n\tconstructor(el) {\n\t\tconst mobileTest = window.matchMedia(\"(max-width: 767px)\");\n\n\t\tthis.isMobile = mobileTest.matches;\n\n\t\t// if at mobile size on js init\n\t\t// add class just for this special case\n\t\t// abort. no need to do any more js (no animations)\n\t\tif (this.isMobile && \"ontouchstart\" in window) {\n\t\t\tel.classList.add(\"layered-animation-section--mobile-init\");\n\t\t\treturn;\n\t\t}\n\n\t\tthis.el = el;\n\n\t\t// store references to our dom elements\n\t\tthis.dom = {\n\t\t\tel,\n\t\t\t//bounds: el.getBoundingClientRect(),\n\t\t\tbottom: el.querySelectorAll(\".layered-animation__background-bottom\"),\n\t\t\ttop: el.querySelectorAll(\".layered-animation__background-top\"),\n\t\t\tcontent: el.querySelectorAll(\".layered-animation__content\"),\n\t\t};\n\n\t\tthis.topOffset = DEFAULT_TOP_OFFSET;\n\n\t\t// check el for top offset override data prop\n\t\tif (Object.prototype.hasOwnProperty.call(this.el.dataset, \"topOffset\")) {\n\t\t\tconst to = parseInt(this.el.dataset.topOffset, 10);\n\t\t\tif (!isNaN(to)) {\n\t\t\t\tthis.topOffset = to;\n\t\t\t}\n\t\t\t//console.log('el to prop', this.el.dataset.topOffset, to, this.topOffset);\n\t\t}\n\n\t\t// set wether or not the content should be immediately visible or fade in at end of animation\n\t\tthis.fadeContent = true;\n\n\t\t// check el for fade-content data prop and override default fadeContent value\n\t\tif (Object.prototype.hasOwnProperty.call(this.el.dataset, \"fadeContent\")) {\n\t\t\tthis.fadeContent = this.el.dataset.fadeContent === \"true\";\n\t\t}\n\n\t\t// the anime\n\t\tthis.animeTl = gsap.timeline({\n\t\t\tpaused: true,\n\t\t\t//scrollTrigger: this.scrollTrigger,\n\t\t\tease: \"sine.inOut\",\n\t\t});\n\n\t\t// the scrollTrigger\n\t\t// timeline is added to trigger, then tweens are added to tl\n\t\tthis.scrollTrigger = ScrollTrigger.create({\n\t\t\tanimation: this.animeTl,\n\t\t\ttrigger: el,\n\t\t\t//toggleActions: 'restart pause reverse pause',\n\t\t\tstart: \"top bottom\", // triggerpos viewportpos\n\t\t\tend: \"bottom bottom\", // triggerpos viewportpos\n\t\t\t//markers: true, // debug only\n\t\t\tscrub: 3, // 1s delay buffer,\n\t\t});\n\n\t\tif (this.isMobile) {\n\t\t\tthis.scrollTrigger.disable();\n\t\t} else {\n\t\t\tthis.runAnime();\n\t\t}\n\n\t\t// event listeners\n\t\tmobileTest.addListener(this.mobileTestUpdate.bind(this));\n\t}\n\n\t// if we have inited our animation js but the browser goes mobile or vice versa\n\t// clear anime and disable or enable scrollTrigger\n\tmobileTestUpdate(test) {\n\t\tthis.isMobile = test.matches;\n\n\t\tconsole.log(\"mobileTestUpdate\", this.isMobile);\n\n\t\t// on change to mobile size\n\t\t// disable scrollTrigger\n\t\t// complete the animation to set everything in natural position, props\n\t\t// remove anime tweens\n\t\tif (this.isMobile) {\n\t\t\tthis.scrollTrigger.disable(true, true);\n\t\t\tthis.animeTl.progress(1);\n\t\t\tthis.animeTl.clear();\n\n\t\t\t// on change to desktop\n\t\t\t// enable scrollTrigger\n\t\t\t// add tweens to timeline\n\t\t} else {\n\t\t\tthis.animeTl.clear();\n\t\t\tthis.scrollTrigger.enable();\n\t\t\tthis.runAnime();\n\t\t}\n\t}\n\n\t// add tweens to timeline\n\trunAnime() {\n\t\tif (this.fadeContent) {\n\t\t\tthis.animeTl\n\t\t\t\t.fromTo(this.dom.bottom, { opacity: 0.2 }, { opacity: 1, duration: 5, delay: 2 }, \"bg\")\n\t\t\t\t.fromTo(this.dom.top, { yPercent: this.topOffset }, { yPercent: 0, duration: 5, delay: 1 }, \"bg\")\n\t\t\t\t.fromTo(this.dom.content, { display: \"block\", opacity: 0, duration: 1 }, { opacity: 1 });\n\t\t} else {\n\t\t\tthis.animeTl\n\t\t\t\t.set(this.dom.content, { display: \"block\", opacity: 1 })\n\t\t\t\t.fromTo(this.dom.bottom, { opacity: 0.2 }, { opacity: 1, duration: 5, delay: 2 }, \"bg\")\n\t\t\t\t.fromTo(this.dom.top, { yPercent: this.topOffset }, { yPercent: 0, duration: 5, delay: 1 }, \"bg\");\n\t\t}\n\t}\n}\n\njQuery(document).ready(function () {\n\tlet i;\n\n\tlet layeredAnimes = document.querySelectorAll(\".layered-animation-section\");\n\n\tfor (i = 0; i < layeredAnimes.length; i++) {\n\t\tnew LayeredAnimtion(layeredAnimes[i]);\n\t}\n});\n"],
  "mappings": "MAQA,IAAMA,EAAN,KAAsB,CACrB,YAAYC,EAAI,CACf,IAAMC,EAAa,OAAO,WAAW,oBAAoB,EAOzD,GALA,KAAK,SAAWA,EAAW,QAKvB,KAAK,UAAY,iBAAkB,OAAQ,CAC9CD,EAAG,UAAU,IAAI,wCAAwC,EACzD,MACD,CAgBA,GAdA,KAAK,GAAKA,EAGV,KAAK,IAAM,CACV,GAAAA,EAEA,OAAQA,EAAG,iBAAiB,uCAAuC,EACnE,IAAKA,EAAG,iBAAiB,oCAAoC,EAC7D,QAASA,EAAG,iBAAiB,6BAA6B,CAC3D,EAEA,KAAK,UAAY,IAGb,OAAO,UAAU,eAAe,KAAK,KAAK,GAAG,QAAS,WAAW,EAAG,CACvE,IAAME,EAAK,SAAS,KAAK,GAAG,QAAQ,UAAW,EAAE,EAC5C,MAAMA,CAAE,IACZ,KAAK,UAAYA,EAGnB,CAGA,KAAK,YAAc,GAGf,OAAO,UAAU,eAAe,KAAK,KAAK,GAAG,QAAS,aAAa,IACtE,KAAK,YAAc,KAAK,GAAG,QAAQ,cAAgB,QAIpD,KAAK,QAAU,KAAK,SAAS,CAC5B,OAAQ,GAER,KAAM,YACP,CAAC,EAID,KAAK,cAAgB,cAAc,OAAO,CACzC,UAAW,KAAK,QAChB,QAASF,EAET,MAAO,aACP,IAAK,gBAEL,MAAO,CACR,CAAC,EAEG,KAAK,SACR,KAAK,cAAc,QAAQ,EAE3B,KAAK,SAAS,EAIfC,EAAW,YAAY,KAAK,iBAAiB,KAAK,IAAI,CAAC,CACxD,CAIA,iBAAiBE,EAAM,CACtB,KAAK,SAAWA,EAAK,QAErB,QAAQ,IAAI,mBAAoB,KAAK,QAAQ,EAMzC,KAAK,UACR,KAAK,cAAc,QAAQ,GAAM,EAAI,EACrC,KAAK,QAAQ,SAAS,CAAC,EACvB,KAAK,QAAQ,MAAM,IAMnB,KAAK,QAAQ,MAAM,EACnB,KAAK,cAAc,OAAO,EAC1B,KAAK,SAAS,EAEhB,CAGA,UAAW,CACN,KAAK,YACR,KAAK,QACH,OAAO,KAAK,IAAI,OAAQ,CAAE,QAAS,EAAI,EAAG,CAAE,QAAS,EAAG,SAAU,EAAG,MAAO,CAAE,EAAG,IAAI,EACrF,OAAO,KAAK,IAAI,IAAK,CAAE,SAAU,KAAK,SAAU,EAAG,CAAE,SAAU,EAAG,SAAU,EAAG,MAAO,CAAE,EAAG,IAAI,EAC/F,OAAO,KAAK,IAAI,QAAS,CAAE,QAAS,QAAS,QAAS,EAAG,SAAU,CAAE,EAAG,CAAE,QAAS,CAAE,CAAC,EAExF,KAAK,QACH,IAAI,KAAK,IAAI,QAAS,CAAE,QAAS,QAAS,QAAS,CAAE,CAAC,EACtD,OAAO,KAAK,IAAI,OAAQ,CAAE,QAAS,EAAI,EAAG,CAAE,QAAS,EAAG,SAAU,EAAG,MAAO,CAAE,EAAG,IAAI,EACrF,OAAO,KAAK,IAAI,IAAK,CAAE,SAAU,KAAK,SAAU,EAAG,CAAE,SAAU,EAAG,SAAU,EAAG,MAAO,CAAE,EAAG,IAAI,CAEnG,CACD,EAEA,OAAO,QAAQ,EAAE,MAAM,UAAY,CAClC,IAAIC,EAEAC,EAAgB,SAAS,iBAAiB,4BAA4B,EAE1E,IAAKD,EAAI,EAAGA,EAAIC,EAAc,OAAQD,IACrC,IAAIL,EAAgBM,EAAcD,CAAC,CAAC,CAEtC,CAAC",
  "names": ["LayeredAnimtion", "el", "mobileTest", "to", "test", "i", "layeredAnimes"]
}