{"version":3,"file":"PrimaryHero.js","names":["define","gsap","ScrollTrigger","InitAnimation","args","registerPlugin","media","scope","querySelector","body","bodyContainer","timeline","id","scrollTrigger","trigger","start","end","scrub","pin","pinSpacing","to","width","left","isExperienceEditor","mql","window","matchMedia","matches","addEventListener","event","setTimeout","getById","disable","set","clearProps","control","videoElement","parentElement","playButton","pauseButton","currentTime","paused","ended","readyState","pause","style","display","play","initVideoControls","initPrimaryHero"],"sources":["site/Components/TGSHero/PrimaryHero.js"],"mappings":"AAAAA,OAAO,CAAC,OAAO,sBAAsB,UAAUC,KAAEA,IAAQC,cAAEA,IAyBvD,SAASC,EAAcC,GACnBH,EAAKI,eAAeH,GAEpB,IAAII,EAAQF,EAAKG,MAAMC,cAAc,kCACjCC,EAAOL,EAAKG,MAAMC,cAAc,uBAChCE,EAAgBN,EAAKG,MAAMC,cAAc,iCAGpCP,EAAKU,SAAS,CACnBC,GAAI,gBACJC,cAAe,CACXD,GAAI,cACJE,QAASV,EAAKG,MACdQ,MAAO,iBACPC,IAAK,QACLC,OAAO,EACPC,IAAKR,EACLS,YAAY,KAKjBC,GAAGd,EAAO,CAAEe,MAAO,QAAU,GAC7BD,GAAGX,EAAM,CAAEa,KAAM,QAAU,EAClC,CA+BA,OAAO,SAAclB,GACZA,EAAKmB,oBAhFd,SAAyBnB,GACrB,IACIoB,EAAMC,OAAOC,WADC,sBAGdF,EAAIG,SACJxB,EAAcC,GAGlBoB,EAAII,iBAAiB,UAAWC,IAC5B,GAAIA,EAAMF,QACNG,YAAW,KAAO3B,EAAcC,EAAK,GAAI,SACtC,CAEH,IAAIE,EAAQF,EAAKG,MAAMC,cAAc,kCACjCC,EAAOL,EAAKG,MAAMC,cAAc,uBAEpCN,EAAc6B,QAAQ,eAAeC,UACrC/B,EAAKgC,IAAI,CAAC3B,EAAOG,GAAO,CAAEyB,YAAY,GAC1C,KAgCR,SAA2B9B,GAC7B,MAAM+B,EAAU/B,EAAKG,MAAMC,cAAc,2BAE9B2B,GAILA,EAAQP,iBAAiB,SAAS,KAC9B,IAAIQ,EAAeD,EAAQE,cAAc7B,cAAc,SACnD8B,EAAaH,EAAQ3B,cAAc,gCACnC+B,EAAcJ,EAAQ3B,cAAc,iCAGnC4B,EAAaI,YAAc,IACpBJ,EAAaK,SACbL,EAAaM,OACdN,EAAaO,WAAa,GACjCP,EAAaQ,QACbN,EAAWO,MAAMC,QAAU,QAC3BP,EAAYM,MAAMC,QAAU,SAG5BV,EAAaW,OACbT,EAAWO,MAAMC,QAAU,OAC3BP,EAAYM,MAAMC,QAAU,QAChC,GAER,CAxDIE,CAAkB5C,EACtB,CA2DQ6C,CAAgB7C,EAExB,CACA","sourcesContent":["define([\"gsap\",\"gsapScrollTrigger\"], function ({ gsap }, { ScrollTrigger }) {\r\n    function initPrimaryHero(args) {\r\n        let tablet_plus = '(min-width: 992px)';\r\n        let mql = window.matchMedia(tablet_plus);\r\n\r\n        if (mql.matches) {\r\n            InitAnimation(args);\r\n        } \r\n\r\n        mql.addEventListener(\"change\", (event) => {\r\n            if (event.matches) {\r\n                setTimeout(() => {InitAnimation(args);}, 500)\r\n            } else {\r\n                // stop gsap animations on mobile\r\n                let media = args.scope.querySelector('.primary-hero__media-container');\r\n                let body = args.scope.querySelector('.primary-hero__body');\r\n\r\n                ScrollTrigger.getById('primaryHero').disable(); //disable scrolltrigger\r\n                gsap.set([media, body], { clearProps: true }); //remove inline styles and reset css \r\n            }\r\n        });\r\n        \r\n        initVideoControls(args);\r\n    }\r\n    \r\n    function InitAnimation(args) {\r\n        gsap.registerPlugin(ScrollTrigger);\r\n        \r\n        let media = args.scope.querySelector('.primary-hero__media-container');\r\n        let body = args.scope.querySelector('.primary-hero__body');\r\n        let bodyContainer = args.scope.querySelector('.primary-hero__body-container');\r\n\r\n        // set start prop dynamically based on where `media` is in the viewport\r\n        let tl = gsap.timeline({\r\n            id: \"primaryHeroTl\",\r\n            scrollTrigger: {\r\n                id: 'primaryHero',\r\n                trigger: args.scope,\r\n                start: 'top top+=120px',\r\n                end: \"+=250\",\r\n                scrub: true,\r\n                pin: bodyContainer,\r\n                pinSpacing: false,\r\n                // markers: true\r\n            }\r\n        })\r\n\r\n        tl.to(media, { width: '100%' }, 0) // animate media \r\n          .to(body, { left: '50vw' }, 0); // animate body text\r\n    }\r\n\r\n    function initVideoControls(args) {\r\n\t\tconst control = args.scope.querySelector('.primary-hero__controls');\r\n\r\n        if (!control) {\r\n            return;\r\n        }\r\n\r\n        control.addEventListener('click', () => {\r\n            var videoElement = control.parentElement.querySelector('video');\r\n            var playButton = control.querySelector('.primary-hero__controls-play');\r\n            var pauseButton = control.querySelector('.primary-hero__controls-pause');\r\n\r\n            //Check if video is currently playing\r\n            if ((videoElement.currentTime > 0\r\n                    && !videoElement.paused\r\n                    && !videoElement.ended\r\n                    && videoElement.readyState > 2)) {\r\n                videoElement.pause();\r\n                playButton.style.display = 'block';\r\n                pauseButton.style.display = 'none';\r\n            }\r\n            else {\r\n                videoElement.play();\r\n                playButton.style.display = 'none';\r\n                pauseButton.style.display = 'block';\r\n            }\r\n        });\r\n    }\r\n\r\n    return function init(args) {\r\n        if (!args.isExperienceEditor) {\r\n            initPrimaryHero(args);\r\n        }\r\n    };\r\n    } \r\n);"]}