elements are empty, add 'display: none' to the .paraWrap\r\n\r\n document.querySelectorAll('.paraWrap').forEach(function (paraWrap) {\r\n const paragraphs = paraWrap.querySelectorAll('p');\r\n const areAllEmpty = Array.from(paragraphs).every(paragraph => paragraph.textContent.trim() === '');\r\n if (areAllEmpty) {\r\n paraWrap.style.display = 'none';\r\n }\r\n });\r\n\r\n\r\n\r\n if (horizontalDetail.length === 0) {\r\n console.error(\"The .horizontalDetail element was not found in the DOM.\");\r\n return;\r\n }\r\n mm.add(`(max-width: ${vpTablet991}px)`, () => {\r\n document.body.classList.remove('bgWhite')\r\n })\r\n\r\n mm.add(`(min-width: ${vpTablet1200}px)`, () => {\r\n\r\n if (!isPortrait) {\r\n if (section) {\r\n\r\n let totalWidth = 0;\r\n horizontalDetail.children('.tileWrapper').each(function () {\r\n totalWidth += $(this).outerWidth(true);\r\n });\r\n\r\n horizontalDetail.css({\r\n width: `${totalWidth}px`,\r\n overflow: 'hidden',\r\n });\r\n\r\n const tw1 = gsap.timeline({\r\n ease: \"none\",\r\n scrollTrigger: {\r\n trigger: tileid,\r\n scrub: 1,\r\n start: \"top top\",\r\n end: () => \"+=\" + section.outerWidth(),\r\n anticipatePin: window.matchMedia(`(max-width: ${vpTablet991}px)`).matches ? 1 : 0,\r\n onStart: () => {\r\n document.body.classList.remove('bgWhite')\r\n },\r\n },\r\n });\r\n\r\n if (topHeading) {\r\n tw1.fromTo(\r\n topHeading,\r\n {\r\n y: \"60vh\",\r\n scale: 1.8,\r\n transformOrigin: isRTL ? 'right bottom' : \"left bottom\",\r\n\r\n },\r\n {\r\n y: \"2.75rem\",\r\n scale: .9,\r\n duration: 5,\r\n force3D: true,\r\n onStart: () => {\r\n document.body.classList.remove('bgWhite');\r\n },\r\n },\r\n )\r\n }\r\n\r\n if (imgPattern) {\r\n tw1.fromTo(\r\n imgPattern,\r\n {\r\n // y: \"100vh\",\r\n x: isRTL ? \"-100vh\" : \"100vh\"\r\n },\r\n {\r\n // y: \"4rem\",\r\n x: isRTL ? \"0\" : \"0\",\r\n duration: 5,\r\n onStart: () => {\r\n document.body.classList.remove('bgWhite');\r\n },\r\n\r\n onReverseComplete: () => {\r\n document.body.classList.remove('bgWhite')\r\n\r\n },\r\n },\r\n \"<-=0.1\"\r\n )\r\n }\r\n\r\n\r\n\r\n\r\n // Timeline for the second animation\r\n const tw3 = gsap.timeline({\r\n ease: \"none\",\r\n scrollTrigger: {\r\n trigger: tileid3,\r\n scrub: 0,\r\n start: () =>\r\n \"top top-=\" +\r\n (totalWidth - window.innerWidth),\r\n end: () => \"+=\" + tileid3.offsetWidth,\r\n anticipatePin: window.matchMedia(`(max-width: ${vpTablet991}px)`).matches ? 1 : 0,\r\n onStart: () => {\r\n document.body.classList.add('bgWhite');\r\n },\r\n onReverseComplete: () => {\r\n document.body.classList.remove('bgWhite');\r\n },\r\n },\r\n });\r\n\r\n if (textBaseDetail) {\r\n tw3.to(\r\n textBaseDetail,\r\n {\r\n\r\n duration: .25,\r\n delay: 1,\r\n ease: \"none\",\r\n // transformOrigin: isRTL ? 'right bottom' : \"left bottom\",\r\n onStart: () => {\r\n gsap.delayedCall(0.5, () => {\r\n document.body.classList.add('bgWhite');\r\n });\r\n },\r\n onReverseComplete: () => {\r\n document.body.classList.remove('bgWhite')\r\n\r\n },\r\n\r\n\r\n },\r\n // \"<0.1\"\r\n )\r\n }\r\n\r\n\r\n const tl = gsap.timeline({\r\n ease: \"none\",\r\n scrollTrigger: {\r\n trigger: section,\r\n pin: true,\r\n scrub: 1,\r\n start: \"top top\",\r\n end: () => \"+=\" + totalWidth,\r\n anticipatePin: window.matchMedia(`(max-width: ${vpTablet991}px)`).matches ? 1 : 0,\r\n onStart: () => {\r\n document.body.classList.remove('bgWhite')\r\n },\r\n },\r\n });\r\n\r\n\r\n let topHeadingHeight = topHeading.clientHeight;\r\n const computedStyle = getComputedStyle(document.documentElement);\r\n const baseFontSizePx = parseFloat(computedStyle.fontSize);\r\n const topHeadingHeightRem = topHeadingHeight / baseFontSizePx;\r\n\r\n\r\n\r\n // Adjust x translation for RTL\r\n const xEndValue = isRTL\r\n ? `+${totalWidth - horizontalDetail.parent().width()}px`\r\n : `-${totalWidth - horizontalDetail.parent().width()}px`;\r\n\r\n\r\n\r\n\r\n tl\r\n .fromTo(\r\n horizontalDetail,\r\n {\r\n x: \"0\",\r\n\r\n },\r\n {\r\n x: xEndValue,\r\n ease: \"none\",\r\n duration: 3,\r\n\r\n onReverseComplete: () => {\r\n document.body.classList.remove('bgWhite')\r\n\r\n },\r\n },\r\n \"<+=2\"\r\n )\r\n\r\n\r\n\r\n }\r\n }\r\n });\r\n\r\n\r\n}\r\n\r\n// Statement Section Animation\r\nfunction statementSectionAltAnim(section) {\r\n const statementSec = section;\r\n const topHeading = statementSec.querySelector('.js-statement-section-flex-left-top-heading');\r\n let topHeadingHeight = topHeading.clientHeight;\r\n const computedStyle = getComputedStyle(document.documentElement);\r\n const baseFontSizePx = parseFloat(computedStyle.fontSize);\r\n const topHeadingHeightRem = topHeadingHeight / baseFontSizePx;\r\n const rightCenterElement = statementSec.querySelector(\".js-statement-section-flex-right-center\");\r\n\r\n\r\n const headingWrapper = statementSec.querySelector(\".js-statement-section-flex-left-top-heading-wrapper\");\r\n // const rightImg = statementSec.querySelector(\".js-statement-section-flex-right-img\");\r\n // const topDescription = statementSec.querySelector(\".js-statement-section-flex-left-top-description\");\r\n // const leftBottom = statementSec.querySelector(\".js-statement-section-flex-left-bottom\");\r\n // const rightQuote = statementSec.querySelector(\".js-flex-right-qoute\");\r\n // const quoteContainer = statementSec.querySelector(\".js-quote-figure-container\");\r\n\r\n let mm = gsap.matchMedia();\r\n mm.add(`(min-width: ${vpTablet1200}px)`, () => {\r\n if (!isPortrait) {\r\n if (statementSec) {\r\n const statementTl = gsap.timeline({\r\n scrollTrigger: {\r\n trigger: statementSec,\r\n pin: true,\r\n scrub: 1,\r\n end: \"+=300%\",\r\n anticipatePin: window.matchMedia(`(max-width: ${vpTablet991}px)`).matches ? 1 : 0,\r\n\r\n onLeaveBack: () => {\r\n document.body.classList.add('bgWhite')\r\n\r\n },\r\n },\r\n });\r\n\r\n if (window.matchMedia(`(max-width: ${vpTablet1200}px)`).matches) {\r\n\r\n if (headingWrapper) {\r\n statementTl.fromTo(headingWrapper, {\r\n opacity: 0,\r\n }, {\r\n opacity: 1,\r\n duration: 0.01,\r\n });\r\n }\r\n }\r\n if (headingWrapper) {\r\n statementTl.fromTo(headingWrapper, {\r\n y: \"65vh\",\r\n scale: 1.8,\r\n transformOrigin: isRTL ? 'right bottom' : \"left bottom\",\r\n }, {\r\n y: \"12.75rem\",\r\n scale: 1,\r\n onStart: () => {\r\n document.body.classList.remove('bgWhite');\r\n },\r\n });\r\n }\r\n statementTl.fromTo(\r\n statementSec.querySelector(\".js-statement-section-flex-right-img\"),\r\n\r\n {\r\n y: \"105vh\",\r\n },\r\n {\r\n y: \"-160vh\",\r\n duration: '1',\r\n onStart: () => {\r\n document.body.classList.remove('bgWhite');\r\n },\r\n\r\n },\r\n \"<+=0.4\"\r\n )\r\n .fromTo(\r\n statementSec.querySelector(\".js-statement-section-flex-left-top-description\"),\r\n // statementSec.querySelector(\".statementTxtWrap\"),\r\n\r\n {\r\n y: \"105vh\",\r\n // opacity: 0\r\n },\r\n {\r\n y: `${11.75 + 5.625 + topHeadingHeightRem}rem`,\r\n // opacity:1\r\n\r\n },\r\n \"<+=0.1\"\r\n )\r\n\r\n // statementSec.querySelector(\".js-statement-section-flex-right-img\"),\r\n\r\n // {\r\n // y: \"-160vh\",\r\n // duration: 0.7,\r\n // }\r\n // )\r\n\r\n // if (rightCenterElement) {\r\n\r\n if (rightCenterElement) {\r\n statementTl.fromTo(\r\n rightCenterElement,\r\n {\r\n y: \"100vh\",\r\n },\r\n {\r\n y: \"-80vh\",\r\n duration: 1,\r\n },\r\n \"<+=0.4\"\r\n )\r\n }\r\n\r\n\r\n\r\n statementTl.fromTo(\r\n statementSec.querySelector(\".js-statement-section-flex-left-bottom\"),\r\n {\r\n y: \"116.5vh\",\r\n top: \"50%\",\r\n },\r\n {\r\n y: \"-50%\",\r\n onReverseComplete: () => {\r\n document.body.classList.remove('bgWhite')\r\n\r\n },\r\n onStart: () => {\r\n gsap.delayedCall(0.5, () => {\r\n document.body.classList.add('bgWhite');\r\n });\r\n },\r\n },\r\n \"<+=0.4\"\r\n )\r\n .to(\r\n statementSec.querySelectorAll(\".js-statement-section-flex-left-top-heading-wrapper, .js-statement-section-flex-left-top-description\"),\r\n {\r\n y: \"-110vh\",\r\n\r\n },\r\n '<+0.1'\r\n )\r\n\r\n\r\n\r\n .fromTo(\r\n statementSec.querySelector(\".js-flex-right-qoute\")\r\n , {\r\n y: \"100vh\",\r\n }, {\r\n y: \"-50%\",\r\n }\r\n\r\n\r\n , \"<\")\r\n .fromTo(\r\n statementSec.querySelector(\".js-quote-figure-container\"),\r\n {\r\n scale: 0.51,\r\n transformOrigin: isRTL ? 'right' : \"left\",\r\n\r\n }, {\r\n scale: 1,\r\n }, '<'\r\n )\r\n\r\n .to(\r\n statementSec.querySelector(\".js-flex-right-qoute\")\r\n , {\r\n y: \"-100%\",\r\n duration: 0.5,\r\n\r\n\r\n }, '<+0.5');\r\n\r\n }\r\n }\r\n })\r\n\r\n}\r\n\r\n// Statement Section Animation\r\nfunction statementSectionBusinessAltAnim(section) {\r\n\r\n let mm = gsap.matchMedia();\r\n mm.add(`(min-width: ${vpTablet767}px)`, () => {\r\n // const statementSections = document.querySelectorAll('.js-statement-section-alt.js-business')\r\n\r\n // statementSections.forEach(statementSec => {\r\n const statementSec = section;\r\n\r\n const statementTl = gsap.timeline({\r\n scrollTrigger: {\r\n trigger: statementSec,\r\n pin: true,\r\n scrub: 0.75,\r\n end: \"+=300%\",\r\n\r\n },\r\n });\r\n\r\n const topHeading = statementSec.querySelector('.js-statement-section-flex-left-top-heading');\r\n let topHeadingHeight = topHeading?.clientHeight;\r\n\r\n // Get the computed style of the root element to determine the base font size\r\n const computedStyle = getComputedStyle(document.documentElement);\r\n const baseFontSizePx = parseFloat(computedStyle.fontSize); // Get the base font size in pixels\r\n\r\n // Convert pixels to rems using the dynamic base font size\r\n const topHeadingHeightRem = topHeadingHeight / baseFontSizePx;\r\n\r\n statementTl\r\n .fromTo(\r\n statementSec.querySelector(\".js-statement-section-flex-left-top-heading\"),\r\n {\r\n y: \"90vh\",\r\n scale: 1.2,\r\n transformOrigin: isRTL ? 'right bottom' : \"left bottom\",\r\n\r\n },\r\n {\r\n y: \"12.75rem\",\r\n scale: 1,\r\n onStart: () => {\r\n document.body.classList.remove('bgWhite');\r\n },\r\n }\r\n )\r\n .fromTo(\r\n statementSec.querySelector(\".js-statement-section-flex-right-img\"),\r\n\r\n {\r\n y: \"100vh\",\r\n },\r\n {\r\n y: \"10vh\",\r\n onStart: () => {\r\n document.body.classList.remove('bgWhite');\r\n },\r\n },\r\n \"-=0.2\"\r\n )\r\n .fromTo(\r\n statementSec.querySelector(\".js-statement-section-flex-left-top-description\"),\r\n\r\n {\r\n y: \"100vh\",\r\n },\r\n {\r\n y: `${12.75 + 5.625 + 4.375 + topHeadingHeightRem}rem`,\r\n },\r\n \"<\"\r\n )\r\n .to(\r\n statementSec.querySelectorAll(\".js-statement-section-flex-left-top-heading, .js-statement-section-flex-left-top-description\"),\r\n {\r\n y: \"-110vh\",\r\n }\r\n )\r\n .fromTo(\r\n statementSec.querySelector(\".js-statement-section-flex-right-center\"),\r\n {\r\n y: \"100vh\",\r\n\r\n }, {\r\n y: \"11.6875rem\",\r\n },\r\n '<'\r\n )\r\n .fromTo(\r\n statementSec.querySelector(\".js-statement-section-flex-left-bottom\"),\r\n {\r\n y: \"116.5vh\",\r\n top: \"50%\",\r\n },\r\n {\r\n y: \"-50%\",\r\n }, '-=0.3'\r\n )\r\n .to(\r\n statementSec.querySelector(\".js-statement-section-flex-right-center\")\r\n , {\r\n y: \"-80vh\",\r\n }\r\n , '-=0.1'\r\n )\r\n\r\n .fromTo(\r\n statementSec.querySelector(\".js-flex-right-qoute\")\r\n , {\r\n y: \"100vh\",\r\n }, {\r\n y: \"-50%\",\r\n\r\n }, '<')\r\n .fromTo(\r\n statementSec.querySelector(\".js-quote-figure-container\"),\r\n {\r\n scale: 0.51,\r\n transformOrigin: isRTL ? 'right bottom' : \"left bottom\",\r\n\r\n }, {\r\n scale: 1,\r\n }, '<'\r\n )\r\n .to(\r\n statementSec.querySelectorAll(\".js-statement-section-flex-left-bottom, .js-flex-right-qoute\"),\r\n\r\n {\r\n top: 0,\r\n y: \"-120%\",\r\n opacity: 0,\r\n }\r\n )\r\n .fromTo(\r\n statementSec.querySelector(\".js-outside-flex-box-bottom\")\r\n , {\r\n y: \"100vh\",\r\n }, {\r\n y: \"0vh\",\r\n onReverseComplete: () => {\r\n document.body.classList.remove('bgWhite')\r\n\r\n },\r\n }, \"<\").to(\r\n statementSec.querySelector(\".js-outside-flex-box-bottom\")\r\n , {\r\n opacity: 1,\r\n\r\n })\r\n })\r\n // })\r\n\r\n}\r\n\r\nfunction jsAnimFade() {\r\n let mm = gsap.matchMedia();\r\n\r\n const jsAnimFades = document.querySelectorAll('.js-anim-fade-dsk');\r\n\r\n\r\n jsAnimFades.forEach(jsAnimFade => {\r\n const animFadeTl = gsap.timeline({\r\n scrollTrigger: {\r\n trigger: jsAnimFade,\r\n start: \"top bottom\",\r\n },\r\n });\r\n\r\n animFadeTl.fromTo(jsAnimFade, {\r\n y: \"30vh\",\r\n opacity: 0\r\n }, {\r\n y: \"0vh\",\r\n opacity: 1\r\n })\r\n })\r\n\r\n mm.add(`(max-width: ${vpTablet991}px)`, () => {\r\n const jsAnimFades = document.querySelectorAll('.js-anim-fade-tab');\r\n\r\n jsAnimFades.forEach(jsAnimFade => {\r\n\r\n const animFadeTl = gsap.timeline({\r\n scrollTrigger: {\r\n trigger: jsAnimFade,\r\n start: \"top bottom\",\r\n\r\n },\r\n onComplete: () => { ScrollTrigger.refresh(true); }\r\n });\r\n\r\n animFadeTl.fromTo(jsAnimFade, {\r\n y: \"30vh\",\r\n opacity: 0,\r\n duration: .5\r\n }, {\r\n y: \"0vh\",\r\n opacity: 1,\r\n })\r\n })\r\n })\r\n mm.add(`(max-width: ${vpTablet1200}px)`, () => {\r\n const jsAnimFades = document.querySelectorAll('.js-anim-fade-tab-1220');\r\n\r\n jsAnimFades.forEach(jsAnimFade => {\r\n\r\n const animFadeTl = gsap.timeline({\r\n scrollTrigger: {\r\n trigger: jsAnimFade,\r\n start: \"top bottom\",\r\n\r\n },\r\n onComplete: () => { ScrollTrigger.refresh(true); }\r\n });\r\n\r\n animFadeTl.fromTo(jsAnimFade, {\r\n y: \"30vh\",\r\n opacity: 0\r\n }, {\r\n y: \"0vh\",\r\n opacity: 1\r\n })\r\n })\r\n })\r\n\r\n mm.add(`(max-width: ${vpTablet767}px)`, () => {\r\n const jsAnimFades = document.querySelectorAll('.js-anim-fade');\r\n\r\n jsAnimFades.forEach(jsAnimFade => {\r\n\r\n const animFadeTl = gsap.timeline({\r\n scrollTrigger: {\r\n trigger: jsAnimFade,\r\n start: \"top bottom\",\r\n\r\n },\r\n onComplete: () => { ScrollTrigger.refresh(true); }\r\n });\r\n\r\n animFadeTl.fromTo(jsAnimFade, {\r\n y: \"30vh\",\r\n opacity: 0\r\n }, {\r\n y: \"0vh\",\r\n opacity: 1\r\n })\r\n })\r\n })\r\n\r\n}\r\n\r\n// Check which language is active\r\nfunction checkActiveLanguage() {\r\n if (isRTL) {\r\n $('#js-lang-ar').addClass('active')\r\n $('#js-mobile-lang-ar').addClass('active')\r\n } else {\r\n $('#js-lang-en').addClass('active')\r\n $('#js-mobile-lang-en').addClass('active')\r\n }\r\n}\r\n\r\nlet heroScrollUp;\r\n// Footer scroll to top button\r\nfunction scrollTop() {\r\n let mm = gsap.matchMedia();\r\n $('#js-scroll-top').on('click', function () {\r\n $('html, body').animate({ scrollTop: heroScrollUp }, 'slow');\r\n $('html, body').animate({ scrollTop: -1 }, 'slow');\r\n });\r\n mm.add(`(max-width: ${vpTablet767}px)`, () => {\r\n $('#js-scroll-top').on('click', function () {\r\n $('html, body').animate({ scrollTop: -1 }, 'slow');\r\n });\r\n })\r\n}\r\nfunction scrollToTopOnLoad() {\r\n $('html, body').animate({ scrollTop: 0 }, 'fast');\r\n}\r\n\r\nconst openAndCloseStatmentDrawer = () => {\r\n const statementSections = document.querySelectorAll('.js-statement-section-main')\r\n const drawers = document.querySelectorAll('.js-statement-drawer')\r\n statementSections?.forEach(section => {\r\n // const drawer = section?.nextElementSibling;\r\n const sectionUid = section.getAttribute('data-sectionid')\r\n\r\n\r\n let readStatementCtas;\r\n readStatementCtas = section?.querySelectorAll('.js-read-statement-cta')\r\n // const closeCtas = drawer?.querySelectorAll('.js-close-ic')\r\n\r\n // if (window.matchMedia(`(min-width: ${vpTablet767}px)`).matches && !isPortrait) {\r\n // readStatementCtas = section?.querySelectorAll('.js-read-statement-cta')\r\n // }\r\n // else {\r\n // readStatementCtas = section?.querySelectorAll('.js-read-statement-cta-mob')\r\n // }\r\n const smoother = ScrollSmoother.get();\r\n readStatementCtas.forEach(readStatementCta => {\r\n\r\n readStatementCta?.addEventListener('click', () => {\r\n\r\n\r\n drawers.forEach(drawer => {\r\n\r\n const drawerUid = drawer.getAttribute('data-sectionid')\r\n\r\n if (sectionUid === drawerUid) {\r\n drawer?.classList.add('drawer--open')\r\n document.body?.classList.add(\"scrollHide\")\r\n if (smoother) {\r\n\r\n smoother.paused(true);\r\n }\r\n }\r\n })\r\n\r\n\r\n })\r\n })\r\n drawers.forEach(drawer => {\r\n\r\n const closeCtas = drawer?.querySelectorAll('.js-close-ic')\r\n const drawerUid = drawer.getAttribute('data-sectionid');\r\n const backDropBg = drawer?.querySelector('.backdropBG');\r\n closeCtas?.forEach(closeCta => {\r\n\r\n closeCta?.addEventListener('click', () => {\r\n if (sectionUid === drawerUid) {\r\n drawer?.classList.remove('drawer--open')\r\n document.body?.classList.remove(\"scrollHide\")\r\n if (smoother) {\r\n\r\n smoother.paused(false);\r\n }\r\n\r\n }\r\n\r\n })\r\n\r\n backDropBg?.addEventListener('click', () => {\r\n if (sectionUid === drawerUid) {\r\n drawer?.classList.remove('drawer--open')\r\n document.body?.classList.remove(\"scrollHide\")\r\n if (smoother) {\r\n\r\n smoother.paused(false);\r\n }\r\n\r\n }\r\n })\r\n\r\n $(document).keydown(function (e) {\r\n\r\n if (e.keyCode == 27) {\r\n if (sectionUid === drawerUid) {\r\n drawer?.classList.remove('drawer--open')\r\n document.body?.classList.remove(\"scrollHide\")\r\n if (smoother) {\r\n\r\n smoother.paused(false);\r\n }\r\n\r\n }\r\n }\r\n });\r\n\r\n })\r\n\r\n })\r\n })\r\n\r\n}\r\n\r\nfunction addNavLinksEvents() {\r\n const sections = document.getElementsByClassName('js-go-to-nav-section');\r\n // For header color change (Was an issue in last)\r\n const sectionsHeaders = document.getElementsByClassName('js-header-variant');\r\n const navMobItems = document.querySelectorAll('.js-nav-item');\r\n const timelines = document.getElementsByClassName('timelines');\r\n const sectionsArray = [...sections];\r\n const timelinesArray = [...timelines];\r\n const sectionsHeadersArray = [...sectionsHeaders];\r\n\r\n if (window.matchMedia(`(max-width: ${vpMobile600}px)`).matches) {\r\n navMobItems.forEach((timeline, i) => {\r\n timeline.addEventListener('click', function (e) {\r\n navMobItems.forEach((timeline, j) => {\r\n timeline?.classList.remove('active');\r\n });\r\n\r\n const targetAttr = e.currentTarget.getAttribute('data-sectionid');\r\n\r\n sectionsArray.forEach(section => {\r\n const secAttr = section?.getAttribute('data-sectionid')\r\n\r\n if (secAttr === targetAttr) {\r\n gsap.to(window, { duration: 1.5, scrollTo: { y: section, offsetY: secAttr === 'timelineScroll' ? 0 : -80 } });\r\n }\r\n })\r\n });\r\n })\r\n\r\n } else {\r\n timelinesArray.forEach((timeline, i) => {\r\n timeline.addEventListener('click', function (e) {\r\n // Remove the 'active' class from all timelines\r\n timelinesArray.forEach((timeline, j) => {\r\n timeline?.classList.remove('active');\r\n });\r\n\r\n const targetAttr = e.currentTarget.getAttribute('data-sectionid');\r\n\r\n sectionsArray.forEach(section => {\r\n const secAttr = section.getAttribute('data-sectionid');\r\n\r\n if (secAttr === targetAttr) {\r\n\r\n\r\n // Scroll to the section start\r\n gsap.to(window, {\r\n duration: 1.5,\r\n scrollTo: {\r\n y: section,\r\n offsetY: secAttr === 'timelineScroll' ? -3 : -15,\r\n },\r\n\r\n });\r\n }\r\n });\r\n });\r\n });\r\n\r\n }\r\n\r\n const navSections = document.getElementsByClassName('js-nav-section');\r\n const navSectionsArray = [...navSections];\r\n\r\n const mainTextContainerObserver = new IntersectionObserver((entries) => {\r\n entries.forEach((entry, i) => {\r\n if (entry.isIntersecting) {\r\n const sectionIdx = navSectionsArray.indexOf(entry.target);\r\n intersectingSection = entry.target;\r\n const dataId = intersectingSection.getAttribute('data-sectionId');\r\n\r\n if (window.matchMedia(`(max-width: ${vpMobile600}px)`).matches) {\r\n // navMobItems.forEach((timeline, i) => {\r\n // timeline.classList.remove('active');\r\n // });\r\n // navMobItems[sectionIdx]?.classList.add('active');\r\n\r\n\r\n navMobItems.forEach((timeline, j) => {\r\n const timelineDataId = timeline.getAttribute('data-sectionId')\r\n\r\n if (dataId === timelineDataId) {\r\n navMobItems.forEach((timeline, j) => {\r\n timeline.classList.remove('active')\r\n })\r\n timeline.classList.add('active');\r\n\r\n }\r\n });\r\n\r\n } else {\r\n\r\n timelinesArray.forEach((timeline, j) => {\r\n const timelineDataId = timeline?.getAttribute('data-sectionId')\r\n\r\n if (dataId === timelineDataId) {\r\n timelinesArray.forEach((timeline, j) => {\r\n timeline?.classList.remove('active')\r\n timeline?.classList.remove('hover')\r\n })\r\n setTimeout(() => {\r\n timeline?.classList.add('hover');\r\n }, 1000)\r\n\r\n timeline?.classList.add('active');\r\n setTimeout(() => {\r\n timeline?.classList.remove('hover');\r\n }, 5000)\r\n }\r\n });\r\n\r\n\r\n\r\n }\r\n\r\n // let isSectionDark = $(sectionsArray[sectionIdx]).hasClass('dark');\r\n // if (isSectionDark) {\r\n // $('#js-header-wrapper').addClass('dark');\r\n // $('.js-section-timeline-wrapper').addClass('dark');\r\n // } else {\r\n // $('#js-header-wrapper').removeClass('dark');\r\n // $('.js-section-timeline-wrapper').removeClass('dark');\r\n // }\r\n\r\n }\r\n });\r\n }, { rootMargin: \"0% 0px -90% 0px\", threshold: 0 });\r\n\r\n\r\n navSectionsArray.forEach((section, i) => {\r\n mainTextContainerObserver.observe(section);\r\n });\r\n // For header color change (Was an issue in last)\r\n const headerContainerObserver = new IntersectionObserver((entries) => {\r\n entries.forEach((entry, i) => {\r\n if (entry.isIntersecting) {\r\n\r\n const sectionIdx = sectionsHeadersArray.indexOf(entry.target);\r\n\r\n let isSectionDark = $(sectionsHeadersArray[sectionIdx]).hasClass('dark');\r\n const currentSection = sectionsHeadersArray[sectionIdx];\r\n\r\n if (isSectionDark) {\r\n $('#js-header-wrapper').addClass('dark');\r\n $('.js-section-timeline-wrapper').addClass('dark');\r\n } else {\r\n $('#js-header-wrapper').removeClass('dark');\r\n $('.js-section-timeline-wrapper').removeClass('dark');\r\n }\r\n\r\n const sectionId = $(currentSection).data('sectionid');\r\n if (sectionId === 'impact1' || sectionId === 'impact2' || sectionId === 'impact4' || sectionId === 'impact') {\r\n $('#js-header-wrapper').addClass('darkSec');\r\n $('.js-section-timeline-wrapper').addClass('darkSec');\r\n } else {\r\n $('#js-header-wrapper').removeClass('darkSec');\r\n $('.js-section-timeline-wrapper').removeClass('darkSec');\r\n }\r\n\r\n }\r\n });\r\n }, { rootMargin: \"0% 0px -98% 0px\", threshold: 0 });\r\n\r\n\r\n sectionsHeadersArray.forEach((section, i) => {\r\n headerContainerObserver.observe(section);\r\n });\r\n\r\n}\r\n\r\n// function lazyLoadingFunc(){\r\n// const lazyVideos = document.querySelectorAll(\".lazy-video\");\r\n// videoElement.load();\r\n// console.log({lazyVideos})\r\n// const videoObserver = new IntersectionObserver((entries, observer) => {\r\n// entries.forEach(entry => {\r\n// if (entry.isIntersecting) {\r\n// const video = entry.target;\r\n// const sources = video.querySelectorAll('source');\r\n\r\n// sources.forEach(source => {\r\n// source.src = source.dataset.src;\r\n// });\r\n\r\n// video.load(); // Start loading the video\r\n// video.classList.add(\"lazyloaded\");\r\n// observer.unobserve(video); // Stop observing once loaded\r\n// }\r\n// });\r\n// });\r\n\r\n// lazyVideos.forEach(video => {\r\n// videoObserver.observe(video);\r\n// });\r\n// }\r\n\r\nfunction impactSectionAnimation(section) {\r\n let mm = gsap.matchMedia();\r\n mm.add(`(min-width: ${vpTablet767}px)`, () => {\r\n // const impactSections = document.querySelectorAll('.js-impact-section')\r\n const impactSection = section\r\n // impactSections.forEach(impactSection => {\r\n const textContainer = impactSection.querySelector('.js-text-container')\r\n const newRightSection = impactSection.querySelector(\".js-stats-container\");\r\n\r\n const newRightSectionHeight = newRightSection?.clientHeight;\r\n\r\n\r\n const impactSectionTimeline = gsap.timeline({\r\n scrollTrigger: {\r\n trigger: impactSection,\r\n start: \"top top\",\r\n pin: true,\r\n end: () => window.matchMedia(`(max-width: ${vpTablet991}px)`).matches ? `${newRightSectionHeight}px` : `${newRightSectionHeight * 1.5}px`,\r\n pinContainer: textContainer,\r\n scrub: 1,\r\n anticipatePin: window.matchMedia(`(max-width: ${vpTablet991}px)`).matches ? 1 : 0\r\n\r\n // onUpdate: (self) => {\r\n // gsap.to(rightSection, {\r\n // y: `-${window.scrollY - impactSectionTop - window.innerHeight}`,\r\n\r\n // });\r\n // },\r\n },\r\n });\r\n\r\n\r\n impactSectionTimeline.to(\r\n newRightSection, {\r\n y: `-100%`,\r\n }, '')\r\n\r\n // })\r\n\r\n\r\n })\r\n mm.add(`(max-width: ${vpTablet767}px) and (min-width: ${vpMobile600 + 1}px)`, () => {\r\n\r\n const impactSection = section\r\n\r\n\r\n const textContainer = impactSection.querySelector('.js-text-container')\r\n const newRightSection = impactSection.querySelector(\".js-stats-container\");\r\n\r\n const newRightSectionHeight = newRightSection?.clientHeight;\r\n\r\n const pinTimeline = gsap.timeline({\r\n scrollTrigger: {\r\n trigger: impactSection,\r\n start: \"top top\",\r\n pin: true,\r\n end: () => `${newRightSectionHeight * 2}px`,\r\n scrub: 0.75,\r\n anticipatePin: window.matchMedia(`(max-width: ${vpTablet991}px)`).matches ? 1 : 0\r\n\r\n },\r\n })\r\n\r\n\r\n pinTimeline.fromTo(newRightSection, {\r\n y: `70vh`,\r\n\r\n },\r\n {\r\n y: `-80%`,\r\n duration: 10,\r\n }, '<');\r\n\r\n\r\n })\r\n mm.add(`(max-width: ${vpMobile600}px)`, () => {\r\n\r\n\r\n // const impactSections = document.querySelectorAll('.js-impact-section')\r\n\r\n // const rightSection = $(\".js-stats-container\");\r\n // const impactSection = $(\".js-impact-section\");\r\n // const rightSectionHeight = rightSection.outerHeight(true);\r\n // impactSections.forEach(impactSection => {\r\n\r\n const impactSection = section\r\n\r\n\r\n const contentContainer = impactSection.querySelector('.js-content-container')\r\n const newRightSection = impactSection.querySelector(\".js-stats-container\");\r\n\r\n const newRightSectionHeight = newRightSection?.clientHeight;\r\n\r\n const pinTimeline = gsap.timeline({\r\n scrollTrigger: {\r\n trigger: impactSection,\r\n start: \"top top\",\r\n pin: true,\r\n end: () => `${newRightSectionHeight * 2}px`,\r\n scrub: 0.75,\r\n anticipatePin: window.matchMedia(`(max-width: ${vpTablet991}px)`).matches ? 1 : 0\r\n },\r\n })\r\n\r\n pinTimeline.fromTo(contentContainer, {\r\n y: \"40vh\"\r\n }, {\r\n y: '-70%',\r\n duration: 5,\r\n })\r\n\r\n\r\n\r\n })\r\n\r\n // impactSectionTimeline.fromTo(rightSection, {\r\n // y: \"50vh\",\r\n // }, {\r\n // y: \"0\",\r\n // })\r\n // const impactSections = document.querySelectorAll('.js-impact-section')\r\n\r\n\r\n // const elements = $(\".js-stats-items-container\");\r\n // const elementHeadings = $(\".js-section-heading\");\r\n // const textContainers = $(\".js-stats-item\");\r\n\r\n // const mainTextContainerObserver = new IntersectionObserver((entries) => {\r\n // entries.forEach((entry, i) => {\r\n // const images = $(\".js-impact-bg-img\");\r\n\r\n // if (entry.isIntersecting) {\r\n // const intersectingIndex = $(entry.target).index(\r\n // \".js-stats-items-container\"\r\n // );\r\n // elementHeadings.each((i, element) => {\r\n // $(element).removeClass(\"active\");\r\n // if (i === intersectingIndex) {\r\n // $(element).addClass(\"active\");\r\n // }\r\n // });\r\n\r\n // images.each((i, img) => {\r\n // $(img).removeClass(\"active\");\r\n\r\n // if (i === intersectingIndex) {\r\n // $(img).addClass(\"active\");\r\n // }\r\n // });\r\n // }\r\n // });\r\n // }, { rootMargin: \"-50% 0px -50% 0px\" });\r\n\r\n // const textContainerObserver = new IntersectionObserver(\r\n // (entries) => {\r\n // entries.forEach((entry) => {\r\n // if (entry.isIntersecting) {\r\n // const intersectingIndex = $(entry.target).index(\r\n // \".js-stats-item\"\r\n // );\r\n // textContainers.each((i, textContainer) => {\r\n // $(textContainer).removeClass(\"active\");\r\n\r\n // if (i === intersectingIndex) {\r\n // $(textContainer).addClass(\"active\");\r\n // }\r\n // });\r\n // }\r\n // });\r\n // },\r\n // { rootMargin: \"-50% 0px -50% 0px\" } // Adjusted threshold values\r\n // );\r\n // // Select all elements to observe using a common class\r\n\r\n // // Loop through each element and start observing\r\n // elements.each((i, element) => {\r\n // mainTextContainerObserver.observe(element);\r\n // });\r\n // textContainers.each((i, element) => {\r\n // textContainerObserver.observe(element);\r\n // });\r\n\r\n\r\n // Select all impact sections\r\n const impactSections = document.querySelectorAll('.js-impact-section');\r\n\r\n // Loop through each impact section\r\n impactSections.forEach((section) => {\r\n // Select elements within the current section\r\n const elements = section.querySelectorAll('.js-stats-items-container');\r\n const elementHeadings = section.querySelectorAll('.js-section-heading');\r\n const textContainers = section.querySelectorAll('.js-stats-item');\r\n const images = section.querySelectorAll('.js-impact-bg-img');\r\n\r\n // Create IntersectionObservers for the current section\r\n const mainTextContainerObserver = new IntersectionObserver((entries) => {\r\n entries.forEach((entry) => {\r\n if (entry.isIntersecting) {\r\n\r\n const intersectingIndex = Array.from(section.querySelectorAll('.js-stats-items-container')).indexOf(entry.target);\r\n\r\n elementHeadings.forEach((element, i) => {\r\n element.classList.remove(\"active\");\r\n if (i === intersectingIndex) {\r\n element.classList.add(\"active\");\r\n }\r\n });\r\n\r\n images.forEach((img, i) => {\r\n img.classList.remove(\"active\");\r\n if (i === intersectingIndex) {\r\n img.classList.add(\"active\");\r\n }\r\n });\r\n }\r\n });\r\n }, { rootMargin: \"-50% 0px -50% 0px\" });\r\n\r\n const textContainerObserver = new IntersectionObserver((entries) => {\r\n entries.forEach(entry => {\r\n if (entry.isIntersecting) {\r\n const intersectingIndex = Array.from(section.querySelectorAll('.js-stats-item')).indexOf(entry.target);\r\n textContainers.forEach((textContainer, i) => {\r\n textContainer.classList.remove(\"active\");\r\n if (i === intersectingIndex) {\r\n textContainer.classList.add(\"active\");\r\n }\r\n });\r\n }\r\n });\r\n }, { rootMargin: \"-50% 0px -50% 0px\" });\r\n\r\n // Observe elements within the current section\r\n elements.forEach(element => {\r\n mainTextContainerObserver.observe(element);\r\n });\r\n\r\n textContainers.forEach(element => {\r\n textContainerObserver.observe(element);\r\n });\r\n });\r\n}\r\n\r\nfunction sectionTimelineScroll() {\r\n\r\n const mm = gsap.matchMedia();\r\n\r\n mm.add({\r\n // Matches screens larger than 768px (not mobile)\r\n isNotMobile: `(min-width: ${vpTablet991 + 1}px)`,\r\n // Matches screens 768px and below (mobile)\r\n isMobile: `(max-width: ${vpTablet991}px)`\r\n }, (context) => {\r\n\r\n if (context.conditions.isNotMobile) {\r\n const timelines = document.querySelectorAll('.timeline-scroll-animation');\r\n\r\n if (timelines.length > 0) {\r\n const firstElement = timelines[0];\r\n const lastElement = timelines[timelines.length - 1];\r\n const timelineFirstWidth = firstElement.offsetWidth;\r\n const timelineTotalElements = timelines.length;\r\n\r\n const baseFontSize = parseFloat(getComputedStyle(document.documentElement).fontSize); // Get the base font size in pixels\r\n const marginLeft = 10 * baseFontSize;\r\n\r\n const isRTL = document.documentElement.getAttribute('dir') === 'rtl';\r\n\r\n const timelineWidth = (timelineFirstWidth + marginLeft) * (timelineTotalElements - 1);\r\n\r\n gsap.to(\".horizontal-scroll-content-timeline\", {\r\n x: isRTL ? timelineWidth : -timelineWidth,\r\n ease: \"none\",\r\n scrollTrigger: {\r\n end: () => `+=${timelineWidth}`,\r\n trigger: \".section-timeline-scroll\",\r\n pin: true,\r\n scrub: 1.5,\r\n snap: {\r\n snapTo: (1 / (timelineTotalElements - 1)),\r\n duration: 1,\r\n delay: 0.5,\r\n }\r\n }\r\n });\r\n\r\n let lastScrollTop = window.scrollY || document.documentElement.scrollTop;\r\n\r\n window.addEventListener('scroll', () => {\r\n const currentScrollTop = window.scrollY || document.documentElement.scrollTop;\r\n const isScrollingDown = currentScrollTop > lastScrollTop;\r\n\r\n timelines.forEach((timeline) => {\r\n const { left: timelineLeft, right: timelineRight } = timeline.getBoundingClientRect();\r\n\r\n if (isScrollingDown) {\r\n if ((isRTL && timelineRight > timelineFirstWidth) || (!isRTL && timelineLeft < timelineFirstWidth)) {\r\n timeline.classList.add('active');\r\n } else {\r\n timeline.classList.remove('active');\r\n }\r\n } else {\r\n if ((isRTL && timelineRight < (timelineFirstWidth + 240)) || (!isRTL && timelineRight > (timelineFirstWidth + 240))) {\r\n timeline.classList.remove('active');\r\n }\r\n }\r\n });\r\n const skipBtn = document.querySelector('.js-section-timeline-scroll-main .js-btn-flex-left-desktop');\r\n\r\n // Hide the skip button if the last element is active\r\n if (lastElement.classList.contains('active')) {\r\n if (skipBtn) {\r\n\r\n gsap.to(skipBtn, {\r\n opacity: 0,\r\n pointerEvents: 'none'\r\n })\r\n }\r\n } else {\r\n if (skipBtn) {\r\n gsap.to(skipBtn, {\r\n opacity: 1,\r\n pointerEvents: 'all'\r\n })\r\n }\r\n }\r\n\r\n lastScrollTop = currentScrollTop <= 0 ? 0 : currentScrollTop;\r\n });\r\n\r\n const skipBtn = document.querySelector('.js-section-timeline-scroll-main .js-btn-flex-left-desktop');\r\n if (skipBtn) {\r\n skipBtn.addEventListener('click', () => {\r\n const element = document.querySelector('.js-section-timeline-scroll-main');\r\n if (element) {\r\n const nextSibling = element.nextElementSibling;\r\n if (nextSibling) {\r\n gsap.to(window, { duration: 2, scrollTo: nextSibling });\r\n }\r\n }\r\n });\r\n }\r\n }\r\n }\r\n else if (context.conditions.isMobile) {\r\n const timelines = document.querySelectorAll('.horizontal-scroll-content-timeline');\r\n if (timelines.length > 0) {\r\n const firstChild = timelines[0].querySelector('.active');\r\n if (firstChild) {\r\n firstChild.classList.remove('active');\r\n }\r\n }\r\n const skipBtn = document.querySelector('.js-section-timeline-scroll-main .js-btn-flex-left')\r\n skipBtn?.addEventListener('click', () => {\r\n var element = document.querySelector('.js-section-timeline-scroll-main');\r\n var nextSibling = element.nextElementSibling;\r\n gsap.to(window, { duration: 1.5, scrollTo: nextSibling });\r\n });\r\n\r\n }\r\n });\r\n\r\n}\r\n\r\nfunction removeTimelineOnFooter() {\r\n let options = {\r\n root: null,\r\n rootMargin: '0px',\r\n threshold: 0\r\n };\r\n\r\n let observer = new IntersectionObserver((entries, observer) => {\r\n let element = document.querySelector('.js-section-timeline-wrapper');\r\n entries.forEach(entry => {\r\n if (entry.isIntersecting) {\r\n\r\n if (element && loaderAnimCompletes) {\r\n gsap.to(element, {\r\n duration: 0.2,\r\n opacity: 1,\r\n pointerEvents: 'none'\r\n })\r\n }\r\n } else {\r\n if (element && loaderAnimCompletes) {\r\n gsap.to(element, {\r\n duration: 0.2,\r\n opacity: 1,\r\n pointerEvents: 'all'\r\n })\r\n }\r\n }\r\n });\r\n }, options);\r\n\r\n let target = document.querySelector('.js-statement-section-alt-6');\r\n observer.observe(target);\r\n}\r\n\r\nfunction readMoreBtn() {\r\n let readMoreBtn = $('.read-more-btn');\r\n if (readMoreBtn.length > 0) {\r\n if ($(window).width() < 767.98) {\r\n\r\n\r\n $('.subTextWrap').each(function () {\r\n var $content = $(this);\r\n var $bodyElements = $content.find('.body2'); // Select all .body2 elements (both p and li)\r\n var maxVisibleItems = 4; // Maximum number of visible items before truncation\r\n\r\n // If there are more than 4 .body2 elements, show \"Read More\" button and hide the extras\r\n if ($bodyElements.length > maxVisibleItems) {\r\n $bodyElements.slice(maxVisibleItems).hide(); // Hide elements after the 4th one\r\n $content.find('.read-more-btn').show(); // Show the \"Read More\" button\r\n } else {\r\n // If 4 or fewer, hide the \"Read More\" button\r\n $content.find('.read-more-btn').hide();\r\n }\r\n\r\n // \"Read More\" button click handler\r\n $content.find('.read-more-btn').on('click', function () {\r\n setTimeout(() => {\r\n ScrollTrigger.refresh();\r\n }, 600);\r\n\r\n $content.toggleClass('showTxt');\r\n if ($content.hasClass('showTxt')) {\r\n // Show all items when expanded\r\n $bodyElements.show();\r\n } else {\r\n // Collapse back to showing only the first 4 items\r\n $bodyElements.slice(maxVisibleItems).hide();\r\n }\r\n\r\n // Recalculate scroll-based animations\r\n if (typeof ScrollTrigger !== \"undefined\") {\r\n ScrollTrigger.refresh();\r\n }\r\n });\r\n });\r\n\r\n\r\n\r\n }\r\n\r\n }\r\n\r\n\r\n // horizontal text para\r\n if ($(\".paraWrap\").length > 0) {\r\n if ($(window).width() < 767.98) {\r\n\r\n $('.paraWrap').each(function () {\r\n var $paragraphs = $(this).find('p'); // Find all p elements in the container\r\n var maxLength = 300; // Maximum character length before truncation\r\n\r\n $paragraphs.each(function () {\r\n var $para = $(this);\r\n var originalText = $para.text();\r\n\r\n // Check if paragraph text exceeds the maximum length\r\n if (originalText.length > maxLength) {\r\n // Truncate the text for this paragraph\r\n var truncatedText = originalText.substring(0, maxLength) + '...';\r\n $para.text(truncatedText);\r\n\r\n // Handle \"Read More\" button click\r\n $(this).closest('.paraWrap').find('.read-more-btn').on('click', function () {\r\n setTimeout(() => {\r\n ScrollTrigger.refresh();\r\n }, 600);\r\n\r\n // Restore the full text of all paragraphs in this container\r\n $paragraphs.each(function () {\r\n $(this).text($(this).data('original-text')); // Restore original text\r\n });\r\n\r\n $(this).closest('.paraWrap').addClass('expanded');\r\n\r\n // Recalculate scroll-based animations\r\n if (typeof ScrollTrigger !== \"undefined\") {\r\n ScrollTrigger.refresh();\r\n }\r\n });\r\n\r\n // Store the original text for restoring later\r\n $para.data('original-text', originalText);\r\n } else {\r\n // If the text is not too long, hide the button\r\n $(this).closest('.paraWrap').find('.read-more-btn').hide();\r\n $(this).closest('.paraWrap').addClass('expanded');\r\n }\r\n });\r\n });\r\n\r\n }\r\n }\r\n\r\n}\r\n\r\n// function loadVideoLazy(){\r\nconst mobileVideoUrl = '/Pages/assets/videos/annual-report.mp4';\r\nconst desktopVideoUrl = '/Pages/assets/videos/annual-report-mob.mp4';\r\n// Function to determine if the device is mobile\r\nfunction isMobile() {\r\n return $(window).width() <= 768; // Adjust this value based on your breakpoint\r\n}\r\n\r\n// Function to create and append the