{"version":3,"sources":["ar-animation-static-2024.js"],"names":["document","addEventListener","startAnimationArStatic24","ScrollTrigger","defaults","let","mm","gsap","matchMedia","reduceMotionCB","querySelector","unsuppressFactAnimation","element","this","targets","$","children","removeClass","each","index","matched","innerHTML","match","number","toString","decimalPlaces","matchedDecimalPlaces","length","separator","indexOf","prefix","substring","suffix","options","counter","CountUp","replace","error","console","start","classList","add","checked","window","matches","matchMediaRefresh","isMobile","isTablet","isDesktop","isWidescreen","isWidescreenPadded","is1600px","context","conditions","getElementById","style","display","timeline","duration","ease","to","opacity","SplitText","type","tag","tlCover","set","rotate","fromTo","drawSVG","stagger","from","scrollTrigger","id","trigger","y","tlSnapshot","wwiDesktop","onStart","wwiMobile","end","scrub","x","isTouch","utils","toArray","forEach","q","selector","fund","tlOverlay","video","videoContainer","videoCenter","videoScaleRatio","innerWidth","offsetWidth","height","create","onToggle","self","isActive","play","pause","tlVideoContainer","pin","pinSpacing","toggleActions","scale"],"mappings":"AACAA,SAAAC,iBAAA,mBAAA,WACAC,yBAAA,CACA,CAAA,EAEAA,yBAAA,WAEAC,cAAAC,SAAA,EAEA,EAGAC,IAAAC,EAAAC,KAAAC,WAAA,EAGAH,IAAAI,EAAAT,SAAAU,cACA,+BACA,EAmgBA,SAAAC,IAEAN,IAAAO,EAAAC,KAAAC,QAAA,EAAA,GACAC,EAAAH,CAAA,EACAI,SAAA,yBAAA,EACAC,YAAA,wBAAA,EAIAF,EACA,sFACA,EAAAG,KAAA,SAAAC,EAAAP,GACAP,IAAAe,EAAAR,EAAAS,UAAAC,MAAA,UAAA,EAEA,GAAAF,EAAA,CACAG,EAAAH,EAAAI,SAAA,EACAnB,IAAAoB,EAAA,EACApB,IAAAqB,EAAAH,EAAAD,MAAA,SAAA,EACAI,IACAD,EAAAC,EAAA,GAAAC,OAAA,GAGAtB,IAAAuB,EAAA,GACAL,EAAAD,MAAA,MAAA,IACAM,EAAA,KAGAvB,IAAAc,EAAAP,EAAAS,UAAAQ,QAAAN,CAAA,EACAO,EAAAlB,EAAAS,UAAAU,UAAA,EAAAZ,CAAA,EACAa,EAAApB,EAAAS,UAAAU,UAAAZ,EAAAI,EAAAI,MAAA,EAEAM,EAAA,CACAR,cAAAA,EACAG,UAAAA,EACAE,OAAAA,EACAE,OAAAA,CACA,EAEAE,EAAA,IAAAC,QACAvB,EACAW,EAAAa,QAAA,IAAA,EAAA,EACAH,CACA,EACAC,EAAAG,MAGAC,QAAAD,MAAAH,EAAAG,KAAA,EAFAH,EAAAK,MAAA,EAKA3B,EAAA4B,UAAAC,IAAA,sBAAA,CACA,CACA,CAAA,CACA,CAtjBAhC,EAAAiC,QAAAC,OAAAnC,WACA,kCACA,EAAAoC,QACAnC,EAAAR,iBAAA,SAAA,WACAM,KAAAsC,kBAAA,CACA,CAAA,EAEAvC,EAAAmC,IACA,CACAK,SAAA,qBACAC,SAAA,qBACAC,UAAA,sBACAC,aAAA,sBACAC,mBAAA,sBACAC,SAAA,qBACA,EACA,IACA9C,GAAA,CAEA0C,SAAAA,EAEAE,aAAAA,EACAC,mBAAAA,CAEA,EAAAE,EAAAC,WAIA,GAHA5C,EAAAiC,QAIA1C,SAAAsD,eAAA,WAAA,EAAAC,MAAAC,QAAA,WADA,CAMAjD,KAAAkD,SAAA,CACArD,SAAA,CACAsD,SAAA,GACAC,KAAA,WACA,CACA,CAAA,EAGAC,GAAA,sBAAA,CACAF,SAAA,EACAG,QAAA,CACA,CAAA,EACAD,GACA,mBACA,CACAF,SAAA,GACAG,QAAA,CACA,EACA,QACA,EACAD,GACA,aACA,CACAF,SAAA,EACAG,QAAA,EACAL,QAAA,MACA,EACA,QACA,EAGA,IAAAM,UAAA,eAAA,CACAC,KAAA,QACAC,IAAA,MACA,CAAA,EAlCA3D,IAoCA4D,EAAA1D,KAAAkD,SAAA,EAOA,EAEAQ,EAAAC,IAAA,oCAAA,CACAC,OAAA,GACA,CAAA,EAEAF,EAAAG,OACA,yCACA,CACAC,QAAA,MACAR,QAAA,CACA,EACA,CACAA,QAAA,EACAQ,QAAA,OACAX,SAAA,EACAY,QAAA,IACAX,KAAA,YACA,CAEA,EACAM,EAAAL,GACA,oCACA,CACAO,OAAA,IAEAT,SAAA,IACAC,KAAA,YACA,EACA,MACA,EACAM,EAAAM,KACA,oBACA,CACAV,QAAA,EACAS,QAAA,IACAZ,SAAA,GACAC,KAAA,YACA,EACA,QACA,EACAM,EAAAM,KACA,yCACA,CACAV,QAAA,EACAH,SAAA,EACAC,KAAA,cACA,EACA,GACA,EAGApD,KAAAkD,SAAA,CACAe,cAAA,CACAC,GAAA,MACAC,QAAA,YACAnC,MAAA,SAEA,CACA,CAAA,EACAgC,KACA,4HACA,CACAV,QAAA,EACAc,EAAA,GACAL,QAAA,IACAZ,SAAA,EACA,CACA,EA/GArD,IAkHAuE,EAAArE,KAAAkD,SAAA,CACAe,cAAA,CACAC,GAAA,WACAC,QAAA,iBACAnC,MAAA,SAEA,CACA,CAAA,EAiCAsC,GA/BAD,EAAAR,OACA,yDACA,CACAC,QAAA,KACAR,QAAA,CACA,EACA,CACAA,QAAA,EACAQ,QAAA,OACAX,SAAA,IACAY,QAAA,IACAX,KAAA,YACA,EACA,GACA,EACAiB,EAAAL,KACA,mEACA,CACAV,QAAA,EACAc,EAAA,GACAjB,SAAA,GACAC,KAAA,aACAW,QAAA,CACApD,KAAA,IACA4D,Q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","file":"arStatic24.min.js","sourcesContent":["// Begin when all essential assets are loaded and ready\r\ndocument.addEventListener(\"DOMContentLoaded\", function () {\r\n    startAnimationArStatic24();\r\n});\r\n\r\nstartAnimationArStatic24 = function () {\r\n\r\n    ScrollTrigger.defaults({\r\n        // markers: true,\r\n    });\r\n\r\n    //set up context\r\n    let mm = gsap.matchMedia();\r\n\r\n    //handle reduced motion accessible version\r\n    let reduceMotionCB = document.querySelector(\r\n        \"#ar24-animation-toggle-switch\"\r\n    );\r\n    reduceMotionCB.checked = window.matchMedia(\r\n        \"(prefers-reduced-motion: reduce)\"\r\n    ).matches;\r\n    reduceMotionCB.addEventListener(\"change\", function () {\r\n        gsap.matchMediaRefresh();\r\n    });\r\n\r\n    mm.add(\r\n        {\r\n            isMobile: \"(max-width: 766px)\",\r\n            isTablet: \"(min-width: 767px)\",\r\n            isDesktop: \"(min-width: 1024px)\",\r\n            isWidescreen: \"(min-width: 1160px)\",\r\n            isWidescreenPadded: \"(min-width: 1200px)\",\r\n            is1600px: \"(min-width: 1600px)\",\r\n        },\r\n        (context) => {\r\n            let {\r\n                isMobile,\r\n                isTablet,\r\n                isDesktop,\r\n                isWidescreen,\r\n                isWidescreenPadded,\r\n                is1600px,\r\n            } = context.conditions;\r\n            let reduceMotion = reduceMotionCB.checked;\r\n\r\n            //abort all animation if reduced motion preference set\r\n            if (reduceMotion) {\r\n                document.getElementById(\"preloader\").style.display = \"none\";\r\n                return;\r\n            }\r\n\r\n            // PRELOADER\r\n            let tlPreload = gsap.timeline({\r\n                defaults: {\r\n                    duration: 0.6,\r\n                    ease: \"power2.in\",\r\n                },\r\n            });\r\n\r\n            tlPreload\r\n                .to(\".preloader__spinner\", {\r\n                    duration: 1,\r\n                    opacity: 0,\r\n                })\r\n                .to(\r\n                    \".preloader__text\",\r\n                    {\r\n                        duration: 0.5,\r\n                        opacity: 0,\r\n                    },\r\n                    \"-=0.25\"\r\n                )\r\n                .to(\r\n                    \"#preloader\",\r\n                    {\r\n                        duration: 1,\r\n                        opacity: 0,\r\n                        display: \"none\",\r\n                    },\r\n                    \"-=0.25\"\r\n                );\r\n\r\n            //BLOCK COVER\r\n            let splitTitle = new SplitText(\"#cover-title\", {\r\n                type: \"chars\",\r\n                tag: \"span\",\r\n            });\r\n\r\n            let tlCover = gsap.timeline({\r\n                // scrollTrigger: {\r\n                //     id: \"cover\",\r\n                //     trigger: \"#ar24-cover\",\r\n                //     start: \"top 80%\",\r\n                //     // markers: true,\r\n                // },\r\n            });\r\n\r\n            tlCover.set(\"#ar24-cover .cover-background svg\", {\r\n                rotate: 180,\r\n            });\r\n\r\n            tlCover.fromTo(\r\n                \"#ar24-cover .cover-background svg path\",\r\n                {\r\n                    drawSVG: \"50%\",\r\n                    opacity: 0,\r\n                },\r\n                {\r\n                    opacity: 1,\r\n                    drawSVG: \"100%\",\r\n                    duration: 2,\r\n                    stagger: 0.02,\r\n                    ease: \"power1.Out\",\r\n                }\r\n                // \"<\"\r\n            );\r\n            tlCover.to(\r\n                \"#ar24-cover .cover-background svg\",\r\n                {\r\n                    rotate: 270,\r\n                    // repeat: -1,\r\n                    duration: 120,\r\n                    ease: \"power1.Out\",\r\n                },\r\n                \"<20%\"\r\n            );\r\n            tlCover.from(\r\n                \"#cover-title span\",\r\n                {\r\n                    opacity: 0,\r\n                    stagger: 0.05,\r\n                    duration: 0.5,\r\n                    ease: \"power4.Out\",\r\n                },\r\n                \"<+=10%\"\r\n            );\r\n            tlCover.from(\r\n                \"#ar24-cover .ar-cover-block__intro > *\",\r\n                {\r\n                    opacity: 0,\r\n                    duration: 1,\r\n                    ease: \"power4.inOut\",\r\n                },\r\n                \">\"\r\n            );\r\n\r\n            //BLOCK CEO\r\n            let tlCeo = gsap.timeline({\r\n                scrollTrigger: {\r\n                    id: \"ceo\",\r\n                    trigger: \"#ar24-ceo\",\r\n                    start: \"top 70%\",\r\n                    // markers: true,\r\n                },\r\n            });\r\n            tlCeo.from(\r\n                \"#ar24-ceo .ar-side-image-block__content, #ar24-ceo .ar-facts-block__fact, #ar24-ceo .ar-side-image-block__image-container\",\r\n                {\r\n                    opacity: 0,\r\n                    y: 10,\r\n                    stagger: 0.25,\r\n                    duration: 0.5,\r\n                }\r\n            );\r\n\r\n            //BLOCK snapshot\r\n            let tlSnapshot = gsap.timeline({\r\n                scrollTrigger: {\r\n                    id: \"snapshot\",\r\n                    trigger: \"#ar24-snapshot\",\r\n                    start: \"top 80%\",\r\n                    // markers: true,\r\n                },\r\n            });\r\n\r\n            tlSnapshot.fromTo(\r\n                \"#ar24-snapshot .ar-snapshot-block__background svg path\",\r\n                {\r\n                    drawSVG: \"0%\",\r\n                    opacity: 0,\r\n                },\r\n                {\r\n                    opacity: 1,\r\n                    drawSVG: \"100%\",\r\n                    duration: 0.25,\r\n                    stagger: 0.01,\r\n                    ease: \"power1.Out\",\r\n                },\r\n                \"<\"\r\n            );\r\n            tlSnapshot.from(\r\n                \"#ar24-snapshot .ar-snapshot-block__foreground__facts .fact-macro\",\r\n                {\r\n                    opacity: 0,\r\n                    y: 10,\r\n                    duration: 0.5,\r\n                    ease: \"power1.Out\",\r\n                    stagger: {\r\n                        each: 0.25,\r\n                        onStart: unsuppressFactAnimation,\r\n                    },\r\n                },\r\n                \">-0.5\"\r\n            );\r\n\r\n            //BLOCK WWI\r\n            let wwiDesktop = document.getElementById(\r\n                \"wwi-slider-wrapper-desktop\"\r\n            );\r\n            let wwiMobile = document.getElementById(\r\n                \"wwi-slider-wrapper-mobile\"\r\n            );\r\n\r\n            //show scroller only if widescreen\r\n            wwiMobile.style.display = \"block\";\r\n            wwiDesktop.style.display = \"none\";\r\n            if (isWidescreenPadded) {\r\n                wwiMobile.style.display = \"none\";\r\n                wwiDesktop.style.display = \"block\";\r\n            }\r\n            let tlWwi = gsap.timeline({\r\n                scrollTrigger: {\r\n                    id: \"wwi\",\r\n                    trigger: \"#wwi-slider-wrapper-desktop\",\r\n                    start: \"top 90%\",\r\n                    end: \"bottom 90%\",\r\n                    // pin: true,\r\n                    scrub: 1,\r\n                    // pinSpacing: false,\r\n                    // markers: true,\r\n                },\r\n            });\r\n            tlWwi\r\n                .fromTo(\r\n                    \"#wwi-slider-wrapper-desktop .wwi-row:nth-child(1)\",\r\n                    {\r\n                        x: \"-5%\",\r\n                    },\r\n                    {\r\n                        x: \"0%\",\r\n                        ease: \"power1.inOut\",\r\n                        duration: 2,\r\n                    }\r\n                )\r\n                .fromTo(\r\n                    \"#wwi-slider-wrapper-desktop .wwi-row:nth-child(2)\",\r\n                    {\r\n                        x: \"5%\",\r\n                    },\r\n                    {\r\n                        x: \"0%\",\r\n                        ease: \"power1.inOut\",\r\n                        duration: 2,\r\n                    },\r\n                    \"<\"\r\n                );\r\n\r\n            //wwi cards\r\n\r\n            //if touch device assume no hover capability and leave cards open\r\n            if (ScrollTrigger.isTouch !== 1) {\r\n                gsap.utils.toArray(\".wwi-fund\").forEach((fund) => {\r\n                    let q = gsap.utils.selector(fund);\r\n                    let initialY = 155;\r\n                    gsap.set(q(\".wwi-fund__overlay\"), {\r\n                        y: initialY,\r\n                    });\r\n\r\n                    fund.addEventListener(\"mouseover\", () => {\r\n                        tlOverlay = gsap\r\n                            .timeline()\r\n                            .to(q(\".wwi-fund__overlay\"), {\r\n                                duration: 0.3,\r\n                                y: 0,\r\n                            });\r\n                    });\r\n                    fund.addEventListener(\"mouseleave\", () => {\r\n                        tlOverlay = gsap\r\n                            .timeline()\r\n                            .to(q(\".wwi-fund__overlay\"), {\r\n                                duration: 0.3,\r\n                                y: initialY,\r\n                            });\r\n                    });\r\n                });\r\n            }\r\n\r\n            //BLOCK PRIORITIES\r\n            if (isTablet) {\r\n                let tlPrioritiesList = gsap.timeline({\r\n                    scrollTrigger: {\r\n                        id: \"priorities-list\",\r\n                        trigger: \"#ar24-priorities\",\r\n                        start: \"top 50%\",\r\n                        // markers: true,\r\n                    },\r\n                });\r\n\r\n                tlPrioritiesList.from(\".ar-tile-block__tile\", {\r\n                    opacity: 0,\r\n                    duration: 1,\r\n                    y: 10,\r\n                    stagger: 0.4,\r\n                });\r\n\r\n                //priorities 3 circle animation - Retired\r\n                // let tlPrioritiesSVG = gsap.timeline({\r\n                //     scrollTrigger: {\r\n                //         id: \"priorities\",\r\n                //         trigger: \"#ar24-priorities\",\r\n                //         start: \"top 50%\",\r\n                //         // markers: true,\r\n                //     },\r\n                // });\r\n\r\n                // tlPrioritiesSVG\r\n\r\n                //     .fromTo(\r\n                //         \"#ar24-priorities #outline_decarb, #ar24-priorities #outline_energy, #ar24-priorities #outline_natural\",\r\n                //         {\r\n                //             drawSVG: \"0%\",\r\n                //             opacity: 0,\r\n                //         },\r\n                //         {\r\n                //             opacity: 1,\r\n                //             drawSVG: \"100%\",\r\n                //             duration: 1,\r\n                //             stagger: 0.5,\r\n                //             ease: \"power1.inOut\",\r\n                //         }\r\n                //     )\r\n                //     .from(\r\n                //         \"#text_decarbonise, #text_natural, #text_energy\",\r\n                //         {\r\n                //             opacity: 0,\r\n                //             y: 4,\r\n                //             stagger: 0.5,\r\n                //             duration: 1,\r\n                //             delay: 0,\r\n                //         },\r\n                //         \"<0.7\"\r\n                //     )\r\n                //     .fromTo(\r\n                //         \"#ar24-priorities #spectrum\",\r\n                //         {\r\n                //             rotate: 0,\r\n                //             transformOrigin: \"50% 50%\",\r\n                //         },\r\n                //         {\r\n                //             rotate: 360,\r\n                //             duration: 120,\r\n                //             repeat: -1,\r\n                //         },\r\n                //         \"<\"\r\n                //     )\r\n                //     .from(\r\n                //         \"#ar24-priorities #spectrum\",\r\n                //         {\r\n                //             opacity: 0,\r\n                //             scale: 0.5,\r\n                //             duration: 1.5,\r\n                //         },\r\n                //         \"<\"\r\n                //     );\r\n            }\r\n\r\n            //BLOCK VIDEO\r\n            let video = document.getElementById(\"video\");\r\n            let videoContainer = document.getElementById(\"video-container\");\r\n            let videoCenter = document.getElementById(\"video-center\");\r\n\r\n            //calculate scale ratio\r\n            //90% window width / video resting width\r\n            let videoFullWidth = window.innerWidth;\r\n            let videoRestingWidth =\r\n                document.getElementById(\"video-frame\").offsetWidth;\r\n            let videoScaleRatio = (0.9 * videoFullWidth) / videoRestingWidth;\r\n            // console.log(\"videoFullWidth\", videoFullWidth);\r\n            // console.log(\"videoRestingWidth\", videoRestingWidth);\r\n            // console.log(\"videoScaleRatio\", videoScaleRatio);\r\n\r\n            //Only scale up if window width allows enough movement for it to be worthwhile\r\n            if (isWidescreen & (videoScaleRatio > 1.1)) {\r\n                gsap.set(videoContainer, { height: \"150vh\" });\r\n                gsap.set(videoCenter, { height: \"100vh\" });\r\n\r\n                //play video background on enter/exit\r\n                let tlVideo = ScrollTrigger.create({\r\n                    id: \"video-player\",\r\n                    trigger: videoContainer,\r\n                    start: \"top bottom\",\r\n                    end: \"bottom top\",\r\n                    onToggle: (self) =>\r\n                        self.isActive ? video.play() : video.pause(),\r\n                    // markers: true,\r\n                });\r\n\r\n                //video foreground\r\n\r\n                let tlVideoContainer = gsap.timeline({\r\n                    scrollTrigger: {\r\n                        id: \"video-container\",\r\n                        trigger: videoContainer,\r\n                        start: \"top top\",\r\n                        end: \"bottom bottom\",\r\n                        pin: true,\r\n                        // anticipatePin: 1,\r\n                        scrub: 1,\r\n                        pinSpacing: false,\r\n                        toggleActions: \"play none none reset\",\r\n                        // snap: {\r\n                        //     snapTo: \"labelsDirectional\", // snap to the closest label in the timeline\r\n                        //     duration: { min: 0.2, max: 0.2 }, // the snap animation should be at least 0.2 seconds, but no more than 3 seconds (determined by velocity)\r\n                        //     delay: 0, // wait 0.2 seconds from the last scroll event before doing the snapping\r\n                        //     ease: \"linear\", // the ease of the snap animation (\"power3\" by default)\r\n                        // },\r\n                        // onToggle: (self) =>\r\n                        //     self.isActive ? video.play() : video.pause(),\r\n                        // markers: true,\r\n                    },\r\n                });\r\n                gsap.set(\r\n                    \"#video-text-a, #video-text-b, #video-text-c, #video-text-d, #video-text-e\",\r\n                    { opacity: 0 }\r\n                );\r\n                tlVideoContainer\r\n                    .add(() => {\r\n                        gsap.timeline()\r\n                            .to(\r\n                                \"#video-text-a, #video-text-b, #video-text-c, #video-text-d\",\r\n                                {\r\n                                    opacity: 1,\r\n                                    duration: 0.5,\r\n                                    stagger: 0.5,\r\n                                }\r\n                            )\r\n                            .to(\"#video-text-e\", {\r\n                                opacity: 1,\r\n                                duration: 0.5,\r\n                                onStart: unsuppressFactAnimation,\r\n                            });\r\n                    })\r\n                    //new scale method supercedes individual width and font size manipulation for smoother animation and less jerky font effect\r\n                    .fromTo(\r\n                        \"#video-frame\",\r\n                        {\r\n                            scale: videoScaleRatio,\r\n                        },\r\n                        {\r\n                            scale: 1,\r\n                            duration: 20,\r\n                        },\r\n                        \"<40\"\r\n                    );\r\n                // .from(\r\n                //     \"#video-frame\",\r\n                //     {\r\n                //         width: \"90%\",\r\n                //         // height: \"auto\",\r\n                //         duration: 20,\r\n                //         ease: \"linear\",\r\n                //     },\r\n                //     \"<40\"\r\n                // )\r\n                // .fromTo(\r\n                //     \"#video-text-a, #video-text-b, #video-text-c, #video-text-d, #video-text-e \",\r\n                //     {\r\n                //         scale: 1.52,\r\n                //     },\r\n                //     {\r\n                //         scale: 1,\r\n                //         duration: 20,\r\n                //     },\r\n                //     \"<\"\r\n                // )\r\n                // .from(\r\n                //     \"#video-text-a .fact-macro__fact, #video-text-b .fact-macro__fact, #video-text-c .fact-macro__fact, #video-text-d .fact-macro__fact\",\r\n                //     {\r\n                //         fontSize: 75,\r\n                //         duration: 20,\r\n                //     },\r\n                //     \"<\"\r\n                // )\r\n                // .from(\r\n                //     \"#video-text-a .fact-macro__description, #video-text-b .fact-macro__description, #video-text-c .fact-macro__description, #video-text-d .fact-macro__description\",\r\n                //     {\r\n                //         fontSize: 25,\r\n                //         duration: 20,\r\n                //     },\r\n                //     \"<\"\r\n                // )\r\n                // .from(\r\n                //     \"#video-text-e .fact-macro__fact\",\r\n                //     {\r\n                //         fontSize: 140,\r\n                //         duration: 20,\r\n                //     },\r\n                //     \"<\"\r\n                // )\r\n                // .from(\r\n                //     \"#video-text-e .fact-macro__description\",\r\n                //     {\r\n                //         fontSize: 30,\r\n                //         duration: 20,\r\n                //     },\r\n                //     \"<\"\r\n                // )\r\n            }\r\n\r\n            //BLOCK DOWNLOAD\r\n            let tlDownload = gsap.timeline({\r\n                scrollTrigger: {\r\n                    id: \"download\",\r\n                    trigger: \"#ar24-download\",\r\n                    start: \"top 80%\",\r\n                    // markers: true,\r\n                },\r\n            });\r\n            tlDownload.from(\r\n                \"#ar24-download .ar-side-image-block__content-container, #ar24-download .ar-side-image-block__document-container\",\r\n                {\r\n                    opacity: 0.5,\r\n                    y: 10,\r\n                    stagger: 0.25,\r\n                    duration: 0.5,\r\n                }\r\n            );\r\n        }\r\n    );\r\n\r\n    //Remove animation supression class and trigger counter\r\n    //TODO: Abstract for reuse on rest of site.\r\n    function unsuppressFactAnimation() {\r\n        //Remove animation supression class\r\n        let element = this.targets()[0];\r\n        $(element)\r\n            .children(\".ar-animation__suppress\")\r\n            .removeClass(\"ar-animation__suppress\");\r\n\r\n        //re-run the counter code\r\n\r\n        $(\r\n            \".ar-block-page .fact-macro__fact:not(.ar-animation__active, .ar-animation__suppress)\"\r\n        ).each(function (index, element) {\r\n            let matched = element.innerHTML.match(/[\\d,\\.]+/);\r\n\r\n            if (matched) {\r\n                let number = matched.toString();\r\n                let decimalPlaces = 0;\r\n                let matchedDecimalPlaces = number.match(/\\.[\\d]+/);\r\n                if (matchedDecimalPlaces) {\r\n                    decimalPlaces = matchedDecimalPlaces[0].length - 1;\r\n                }\r\n\r\n                let separator = \"\";\r\n                if (number.match(/[,]+/)) {\r\n                    separator = \",\";\r\n                }\r\n\r\n                let index = element.innerHTML.indexOf(number);\r\n                let prefix = element.innerHTML.substring(0, index);\r\n                let suffix = element.innerHTML.substring(index + number.length);\r\n\r\n                let options = {\r\n                    decimalPlaces: decimalPlaces,\r\n                    separator: separator,\r\n                    prefix: prefix,\r\n                    suffix: suffix,\r\n                };\r\n\r\n                let counter = new CountUp(\r\n                    element,\r\n                    number.replace(\",\", \"\"),\r\n                    options\r\n                );\r\n                if (!counter.error) {\r\n                    counter.start();\r\n                } else {\r\n                    console.error(counter.error);\r\n                }\r\n\r\n                element.classList.add(\"ar-animation__active\");\r\n            }\r\n        });\r\n    }\r\n};\r\n"]}