{"version":3,"sources":["webpack://@verndale/toolkit/./src/js/helpers/createScrollShapes.js","webpack://@verndale/toolkit/./src/js/helpers/variables.js","webpack://@verndale/toolkit/./src/js/modules/IconGrid.js"],"names":[],"mappings":"yKAIA,KAAM,GAAuB,CAAC,CAC5B,cACA,iBACA,SAAS,EACT,WACI,CAEJ,KAAM,GAAW,aAAe,CAC9B,OAAQ,cACR,SAAU,IACV,SAAU,KAGZ,CAAC,GAAG,EAAe,YAAY,QAAQ,CAAC,EAAO,IAAU,CACvD,EAAS,IACP,CACE,QAAS,EACT,WAAY,CAAC,GAAI,GACjB,QAAS,CAAC,EAAG,IAEd,IAAO,EAAS,KAKrB,KAAM,GAAa,GAAI,iBACvB,GAAI,YAAkB,CACpB,eAAgB,EAChB,SAAU,OAAO,YAAc,GAC/B,SACA,YAAa,IAEZ,GAAG,WAAY,GAAS,CACvB,EAAS,KAAK,EAAS,SAAW,EAAM,YAEzC,MAAM,IAGL,EAAiB,CAAC,CAAE,iBAAgB,WAAY,CAEpD,KAAM,GAAW,aAAe,CAC9B,OAAQ,cACR,SAAU,MAGZ,CAAC,GAAG,EAAe,YAAY,QAAQ,CAAC,EAAO,IAAU,CACvD,EAAS,IACP,CACE,QAAS,EACT,WAAY,CAAC,GAAI,GACjB,QAAS,CAAC,EAAG,IAEd,IAAM,EAAS,MAKhB,EAAqB,CAAC,CAC1B,cACA,QACA,SAAS,GACT,gBAAgB,GAChB,SAAS,KACL,CACJ,KAAM,GAAa,OAAO,WAAW,eAAe,kBAC9C,EAAiB,SAAS,cAAc,OAC9C,EAAe,UAAU,IAAI,GAAG,qBAEhC,OAAS,GAAI,EAAG,EAAI,EAAO,IAAK,CAC9B,KAAM,GAAQ,SAAS,cAAc,QACrC,EAAM,UAAU,IAAI,SAAS,EAAI,KACjC,EAAe,OAAO,GAKxB,EAFY,OAAO,GAEf,CAAC,GAAW,SAEZ,GACF,EAAqB,CAAE,cAAa,iBAAgB,SAAQ,UAE5D,EAAe,CAAE,iBAAgB,YAIrC,IAAe,G,6ECtFR,KAAM,GAAU,CACrB,IAAK,EACL,OAAQ,GACR,IAAK,GACL,MAAO,GACP,OAAQ,GACR,SAAU,GACV,IAAK,GACL,KAAM,GACN,KAAM,GACN,GAAI,GACJ,MAAO,GACP,KAAM,IAMK,EAAc,CACzB,OAAQ,IACR,OAAQ,IACR,gBAAiB,KACjB,QAAS,KACT,KAAM,O,uDCvBR,eAAgC,KAAU,CACxC,eAAgB,CACd,KAAK,IAAM,CACT,MAAO,KAAK,GAAG,cAAc,qCAG/B,KAAK,cAGP,aAAc,CACZ,KAAM,CAAE,gBAAiB,KAAK,GAgB9B,GAdA,KAAK,IAAI,OAAS,QAAmB,CACnC,YAAa,KAAK,GAClB,MAAO,EACP,OAAQ,kBACR,OAAQ,EAAe,KAGzB,KAAK,IAAI,OAAS,QAAmB,CACnC,YAAa,KAAK,GAClB,MAAO,EACP,OAAQ,qBACR,OAAQ,EAAe,KAGrB,KAAK,IAAI,MAAO,CAClB,KAAM,CAAE,aAAc,GAAgB,KAAK,IAAI,MAE/C,KAAK,IAAI,OAAS,QAAmB,CACnC,YAAa,KAAK,IAAI,MACtB,MAAO,EACP,OAAQ,oBACR,OAAQ,EAAc,OAM9B,UAAe","file":"scripts/74.870d84c3b36bf9614241.js","sourcesContent":["import anime from 'animejs/lib/anime.es';\r\nimport ScrollMagic from 'scrollmagic';\r\nimport { breakpoints } from './variables';\r\n\r\nconst _scrollAnimateShapes = ({\r\n  containerEl,\r\n  shapeContainer,\r\n  offset = 0,\r\n  count\r\n}) => {\r\n  // Create animation timeline\r\n  const timeline = anime.timeline({\r\n    easing: 'easeOutExpo',\r\n    duration: 1000,\r\n    autoplay: false\r\n  });\r\n\r\n  [...shapeContainer.childNodes].forEach((shape, index) => {\r\n    timeline.add(\r\n      {\r\n        targets: shape,\r\n        translateY: [80, 0],\r\n        opacity: [0, 1]\r\n      },\r\n      (1000 / count) * index\r\n    );\r\n  });\r\n\r\n  // Add scrollmagic scene\r\n  const controller = new ScrollMagic.Controller();\r\n  new ScrollMagic.Scene({\r\n    triggerElement: containerEl,\r\n    duration: window.innerHeight * 0.7,\r\n    offset,\r\n    triggerHook: 1 // 0 = onLeave, 1 = onEnter\r\n  })\r\n    .on('progress', event => {\r\n      timeline.seek(timeline.duration * event.progress);\r\n    })\r\n    .addTo(controller);\r\n};\r\n\r\nconst _animateShapes = ({ shapeContainer, count }) => {\r\n  // Create animation timeline\r\n  const timeline = anime.timeline({\r\n    easing: 'easeOutExpo',\r\n    duration: 600\r\n  });\r\n\r\n  [...shapeContainer.childNodes].forEach((shape, index) => {\r\n    timeline.add(\r\n      {\r\n        targets: shape,\r\n        translateY: [80, 0],\r\n        opacity: [0, 1]\r\n      },\r\n      (600 / count) * index\r\n    );\r\n  });\r\n};\r\n\r\nconst createScrollShapes = ({\r\n  containerEl,\r\n  count,\r\n  prefix = '',\r\n  scrollAnimate = true,\r\n  offset = 0\r\n}) => {\r\n  const breakpoint = window.matchMedia(`(min-width: ${breakpoints.desktop}px)`);\r\n  const shapeContainer = document.createElement('div');\r\n  shapeContainer.classList.add(`${prefix}shapes-container`);\r\n\r\n  for (let i = 0; i < count; i++) {\r\n    const shape = document.createElement('span');\r\n    shape.classList.add(`shape-${i + 1}`);\r\n    shapeContainer.append(shape);\r\n  }\r\n\r\n  containerEl.append(shapeContainer);\r\n\r\n  if (!breakpoint.matches) return;\r\n\r\n  if (scrollAnimate) {\r\n    _scrollAnimateShapes({ containerEl, shapeContainer, offset, count });\r\n  } else {\r\n    _animateShapes({ shapeContainer, count });\r\n  }\r\n};\r\n\r\nexport default createScrollShapes;\r\n","// /**\r\n// * Key code list object\r\n// */\r\nexport const keyCode = {\r\n  TAB: 9,\r\n  RETURN: 13,\r\n  ESC: 27,\r\n  SPACE: 32,\r\n  PAGEUP: 33,\r\n  PAGEDOWN: 34,\r\n  END: 35,\r\n  HOME: 36,\r\n  LEFT: 37,\r\n  UP: 38,\r\n  RIGHT: 39,\r\n  DOWN: 40\r\n};\r\n\r\n// /**\r\n// * Key code list object\r\n// */\r\nexport const breakpoints = {\r\n  mobile: 360,\r\n  tablet: 768,\r\n  tabletLandscape: 1024,\r\n  desktop: 1280,\r\n  wide: 1600\r\n};\r\n","import { Component } from '@verndale/core';\r\nimport createScrollShapes from '../helpers/createScrollShapes';\r\n\r\nclass IconGridWithImage extends Component {\r\n  setupDefaults() {\r\n    this.dom = {\r\n      image: this.el.querySelector('.two-column-content-media__media')\r\n    };\r\n\r\n    this.buildShapes();\r\n  }\r\n\r\n  buildShapes() {\r\n    const { offsetHeight } = this.el;\r\n\r\n    this.dom.shapes = createScrollShapes({\r\n      containerEl: this.el,\r\n      count: 3,\r\n      prefix: 'icon-grid__top-',\r\n      offset: offsetHeight * 0.2\r\n    });\r\n\r\n    this.dom.shapes = createScrollShapes({\r\n      containerEl: this.el,\r\n      count: 2,\r\n      prefix: 'icon-grid__bottom-',\r\n      offset: offsetHeight * 0.7\r\n    });\r\n\r\n    if (this.dom.image) {\r\n      const { offsetHeight: imageHeight } = this.dom.image;\r\n\r\n      this.dom.shapes = createScrollShapes({\r\n        containerEl: this.dom.image,\r\n        count: 4,\r\n        prefix: 'icon-grid__image-',\r\n        offset: imageHeight * 0.6\r\n      });\r\n    }\r\n  }\r\n}\r\n\r\nexport default IconGridWithImage;\r\n"],"sourceRoot":""}