{"version":3,"sources":["webpack:///./src/js/modules/visualStoryRow.js"],"names":["gsap","registerPlugin","ScrollTrigger","VisualStoryRow","this","dom","line","el","querySelector","triggerCont","innerContainer","img","picture","imgCont","copy","title","breakpoint","window","matchMedia","breakpoints","tablet","initImageScroll","initLineScroll","watchMainElement","addEventListener","debounce","refresh","update","style","animateLine","bind","ResizeObserver","entries","observe","document","animateImage","innerHeight","containerTop","offsetTop","containerHeight","offsetHeight","triggerContainerHeight","titleHeight","matches","lineStart","lineEnd","height","to","scrollTrigger","trigger","start","end","endTrigger","pin","pinSpacing","scrub","scale","transformOrigin","pageYOffset","transform","Component"],"mappings":"+lDAMAA,IAAKC,eAAeC,K,IACdC,E,sWACJ,WACEC,KAAKC,IAAM,CACTC,KAAMF,KAAKG,GAAGC,cAAc,2BAC5BC,YAAaL,KAAKG,GAAGC,cACnB,wCAEFE,eAAgBN,KAAKG,GAAGC,cAAc,4BACtCG,IAAKP,KAAKG,GAAGC,cAAc,OAC3BI,QAASR,KAAKG,GAAGC,cAAc,mCAC/BK,QAAST,KAAKG,GAAGC,cAAc,4BAC/BM,KAAMV,KAAKG,GAAGC,cAAc,mCAC5BO,MAAOX,KAAKG,GAAGC,cAAc,6BAG/BJ,KAAKY,WAAaC,OAAOC,WAAP,sBAAiCC,IAAYC,OAA7C,QAElBhB,KAAKiB,kBACLjB,KAAKkB,iBACLlB,KAAKmB,qB,0BAGP,WAAe,WACb,EAA8BnB,KAAKC,IAA3BI,EAAR,EAAQA,YAAaH,EAArB,EAAqBA,KACrBW,OAAOO,iBACL,SACAC,aAAS,WACPvB,IAAcwB,UACdxB,IAAcyB,SAEdlB,EAAYmB,MAAQ,KACpBtB,EAAKsB,MAAQ,KAEb,EAAKN,eAAe,KACnB,MAGLL,OAAOO,iBAAiB,SAAUpB,KAAKyB,YAAYC,KAAK1B,S,8BAG1D,WACyB,IAAI2B,gBAAe,SAAAC,GACxC9B,IAAcwB,UACdxB,IAAcyB,YAGDM,QAAQC,SAAS1B,cAAc,W,6BAGhD,WAAkB,I,MAAA,OAChBN,IAAcgB,Y,EAAd,G,EAAA,sBACkBC,IAAYC,OAAS,EADvC,O,EACgD,WAC5C,EAAKe,gB,+HAKX,WACE,IAAQC,EAAgBnB,OAAhBmB,YACR,EAAmEhC,KAAKG,GAArD8B,EAAnB,EAAQC,UAAuCC,EAA/C,EAAiCC,aACXC,EAA2BrC,KAAKC,IAAII,YAAlD+B,aACcE,EAAgBtC,KAAKC,IAAIU,MAAvCyB,aAEJpC,KAAKY,WAAW2B,SAClBvC,KAAKwC,UAAYP,EAA6B,GAAdD,EAChChC,KAAKyC,QAAUN,EAAkBnC,KAAKwC,YAEtCxC,KAAKwC,UAAYP,EAA6B,GAAdD,EAChChC,KAAKyC,QAAUzC,KAAKwC,UAAYH,EAAyBC,EAAc,IAGzEtC,KAAKyB,gB,0BAGP,WACE,MAAsDzB,KAAKC,IAAnDI,EAAR,EAAQA,YAAaE,EAArB,EAAqBA,IAAKE,EAA1B,EAA0BA,QAASH,EAAnC,EAAmCA,eAEnCD,EAAYmB,MAAMkB,OAAlB,UAA4D,EAA9BpC,EAAe8B,aAA7C,MAEAxC,IAAK+C,GAAGpC,EAAK,CACXqC,cAAe,CACbC,QAASxC,EACTyC,MAAO,UACPC,IAAK,aACLC,WAAYvC,EACZwC,IAAKxC,EACLyC,YAAY,EACZC,OAAO,GAETC,MAAO,IACPC,gBAAiB,SACjBF,MAAO,M,yBAIX,WACE,IAAQG,EAAgBzC,OAAhByC,YAEJA,GAAetD,KAAKwC,WAAac,GAAetD,KAAKyC,QACvDzC,KAAKC,IAAIC,KAAKsB,MAAM+B,UAApB,qBACED,EAActD,KAAKwC,UADrB,OAGSc,EAActD,KAAKyC,UAC5BzC,KAAKC,IAAIC,KAAKsB,MAAM+B,UAApB,qBACEvD,KAAKyC,QAAUzC,KAAKwC,UADtB,a,8BAvGuBgB,aA8GdzD","file":"87.75d4d3a41aae26743b95.js","sourcesContent":["import { Component } from '@verndale/core';\nimport { gsap } from 'gsap';\nimport { ScrollTrigger } from 'gsap/ScrollTrigger';\nimport { breakpoints } from '../helpers/constants';\nimport { debounce } from '../helpers';\n\ngsap.registerPlugin(ScrollTrigger);\nclass VisualStoryRow extends Component {\n  setupDefaults() {\n    this.dom = {\n      line: this.el.querySelector('.visual-story-row__line'),\n      triggerCont: this.el.querySelector(\n        '.visual-story-row__trigger-container'\n      ),\n      innerContainer: this.el.querySelector('.visual-story-row__inner'),\n      img: this.el.querySelector('img'),\n      picture: this.el.querySelector('.visual-story-row-img-container'),\n      imgCont: this.el.querySelector('.visual-story-row__image'),\n      copy: this.el.querySelector('.visual-story-content-row__copy'),\n      title: this.el.querySelector('.visual-story-row__title')\n    };\n\n    this.breakpoint = window.matchMedia(`(min-width: ${breakpoints.tablet}px)`);\n\n    this.initImageScroll();\n    this.initLineScroll();\n    this.watchMainElement();\n  }\n\n  addListeners() {\n    const { triggerCont, line } = this.dom;\n    window.addEventListener(\n      'resize',\n      debounce(() => {\n        ScrollTrigger.refresh();\n        ScrollTrigger.update();\n\n        triggerCont.style = null;\n        line.style = null;\n\n        this.initLineScroll(this);\n      }, 200)\n    );\n\n    window.addEventListener('scroll', this.animateLine.bind(this));\n  }\n\n  watchMainElement() {\n    const resizeObserver = new ResizeObserver(entries => {\n      ScrollTrigger.refresh();\n      ScrollTrigger.update();\n    });\n\n    resizeObserver.observe(document.querySelector('main'));\n  }\n\n  initImageScroll() {\n    ScrollTrigger.matchMedia({\n      [`(max-width: ${breakpoints.tablet - 1}px)`]: () => {\n        this.animateImage();\n      }\n    });\n  }\n\n  initLineScroll() {\n    const { innerHeight } = window;\n    const { offsetTop: containerTop, offsetHeight: containerHeight } = this.el;\n    const { offsetHeight: triggerContainerHeight } = this.dom.triggerCont;\n    const { offsetHeight: titleHeight } = this.dom.title;\n\n    if (this.breakpoint.matches) {\n      this.lineStart = containerTop - innerHeight * 0.5;\n      this.lineEnd = containerHeight + this.lineStart;\n    } else {\n      this.lineStart = containerTop - innerHeight * 0.7;\n      this.lineEnd = this.lineStart + triggerContainerHeight - titleHeight - 55;\n    }\n\n    this.animateLine();\n  }\n\n  animateImage() {\n    const { triggerCont, img, imgCont, innerContainer } = this.dom;\n\n    triggerCont.style.height = `${innerContainer.offsetHeight * 2}px`;\n\n    gsap.to(img, {\n      scrollTrigger: {\n        trigger: triggerCont,\n        start: 'top top',\n        end: 'bottom top',\n        endTrigger: imgCont,\n        pin: imgCont,\n        pinSpacing: false,\n        scrub: true\n      },\n      scale: 1.5,\n      transformOrigin: 'center',\n      scrub: 3\n    });\n  }\n\n  animateLine() {\n    const { pageYOffset } = window;\n\n    if (pageYOffset >= this.lineStart && pageYOffset <= this.lineEnd) {\n      this.dom.line.style.transform = `translateY(${\n        pageYOffset - this.lineStart\n      }px)`;\n    } else if (pageYOffset > this.lineEnd) {\n      this.dom.line.style.transform = `translateY(${\n        this.lineEnd - this.lineStart\n      }px)`;\n    }\n  }\n}\n\nexport default VisualStoryRow;\n"],"sourceRoot":""}