let addCoverage = document.getElementById('add-coverage'),
            addCoverageShadow = document.getElementById('add-coverage-shadow'),
            acToggle = document.getElementById('ac-toggle'),
            acToggleBg = document.getElementById('ac-toggle-bg'),
            acVerticalLine = document.getElementById('ac-vertical-line'),
            poweredBy = document.getElementById('powered-by'),
            poweredByShadow = document.getElementById('powered-by-shadow'),
            poweredByLetters = document.querySelectorAll('.powered-by-letters'),
            acJSONborder = document.getElementById('ac-json-border'),
            acJSON = document.querySelectorAll('#ac-json tspan'),
            rentalCoverage = document.getElementById('rental-coverage'),
            rentalShadow = document.getElementById('rental-shadow');

          let acAnim = gsap.timeline({ id:"Add Coverage Animation", repeat: -1, repeatDelay: 3, delay: 3 })
            .from(addCoverage, 0.6, { x: 60, opacity: 0, transformOrigin: "right center", ease: "power2.inOut" })
            .fromTo(acToggle, 0.6, { x: 2.871, y: 1.321 }, { x: 22.871, y: 1.321 })
            .from(acToggleBg, 0.3, { fill: '#929EA2' }, "-=0.6")
            .from(addCoverageShadow, 1, { opacity: 0 }, "-=0.3")
            .fromTo(acVerticalLine, 1, { drawSVG: "0%" }, { drawSVG: "100%" }, "-=0.5")
            .from(rentalCoverage, 1, { x: "+=30", opacity: 0, ease: "power2.inOut" }, "-=1")
            .from(poweredBy, 1, { y: "+=30" }, "-=1")
            .from(poweredByShadow, 1, { opacity: 0 }, "-=1")
            .from(poweredByLetters, 1, { opacity: 0 }, "-=0.6")
            .fromTo(acJSONborder, 1, { drawSVG: "65% 65%" }, { drawSVG: "0% 100%" }, "-=0.5")
            .from(acJSON, 0.5, { opacity: 0, stagger: 0.05 }, "-=0.5");

          ScrollTrigger.create({
            trigger: addCoverage,
            start: "top bottom",
            end: "bottom top",
            onEnter: function(){
              acAnim.play();
            },
            onEnterBack: function(){
              acAnim.play();
            },
            onLeave: function(){
              acAnim.pause();
            },
            onLeaveBack: function(){
              acAnim.pause();
            }
          });
{ "id": "6c5a5dcd-1af2-4a68-80f1-3e4f3cfcf06f", "itemId": "0e5c2a6f-aab4-4d28-8bcd-0023520", "excess": { "amount": 100.0, "currency": "USD" }, "pricingPremium": { "amount": 4.0468, "currency": "USD" }, "anywhereItems": [ { "itemId": "0e5c2a6f-aab4-4d28-8bcd-0020", "description": "Apple iPhone 12", "categoryId": "30ee440d2fee4ad2bc25004c1e63ec8c", "subCategoryId": "4443e85fac834bb99bb49a6c72b4e1f6", "value": { "amount": 1000.0, "currency": "USD" } } ] } 2 bed, 1 bath, 800 sqft Your Brand Rent Now For Rent £1,145/month Rental Coverage Underwritten by leading carrier Add Coverage £5/month 
        let claimStatus = document.getElementById('claim-status'),
            csCategories = document.querySelectorAll('.cs-category'),
            csCatTitles = document.querySelectorAll('.cs-category text'),
            csCatShadows = document.querySelectorAll('.cs-cat-shadow'),
            csSpeechBubbles = document.querySelectorAll('.cs-speech-bubble'),
            csSpeechLines = document.querySelectorAll('.cs-speech-bubble line'),
            csSpeechSuccess = document.querySelectorAll('.cs-speech-success'),
            csProgress = document.getElementById('cs-progress'),
            csLineOne = document.getElementById('cs-line-1'),
            csLineTwo = document.getElementById('cs-line-2'),
            csDotOne = document.getElementById('cs-dot-1'),
            csDotTwo = document.getElementById('cs-dot-2'),
            csDotThree = document.getElementById('cs-dot-3'),
            csLongLine = document.getElementById('cs-long-line'),
            underWritingLine = document.getElementById('underwriting-line'),
            underWritingBadge = document.querySelectorAll('.underwriting-shield'),
            trovLineOne = document.getElementById('trov-o-line-one'),
            trovLogo = document.getElementById('trov-o-logo'),
            trovLineTwo = document.getElementById('trov-o-line-two'),
            devBorder = document.getElementById('dev-border'),
            devGroups = document.querySelectorAll('.dev-group'),
            dashOne = document.getElementById('dashboard-one'),
            dashTwo = document.getElementById('dashboard-two'),
            dashThree = document.getElementById('dashboard-three'),
            priceOne = document.getElementById('price-one'),
            priceTwo = document.getElementById('price-two'),
            priceThree = document.getElementById('price-three');

          gsap.set([dashTwo, dashThree, priceTwo, priceThree], { opacity: 0 });

          let dashboardAnim = gsap.timeline({ id: "Dashboard Animation", repeat: -1 })
            .fromTo(dashOne, 0.6, { x: 0, opacity: 1 }, { x: -30, opacity: 0, immediateRender: false, ease: "power2.inOut" }, "+=6")
            .fromTo(priceOne, 0.6, { y: 0, opacity: 1 }, { y: 30, opacity: 0, immediateRender: false, ease: "power2.inOut" })
            .fromTo(dashTwo, 0.6, { x: 30, opacity: 0 }, { x: 0, opacity: 1, immediateRender: false, ease: "power2.inOut" })
            .fromTo(priceTwo, 0.6, { y: 30, opacity: 0 }, { y: 0, opacity: 1, immediateRender: false, ease: "power2.inOut" }, "-=0.6")
            .fromTo(dashTwo, 0.6, { x: 0, opacity: 1 }, { x: -30, opacity: 0, immediateRender: false, ease: "power2.inOut" }, "+=6")
            .fromTo(priceTwo, 0.6, { y: 0, opacity: 1 }, { y: 30, opacity: 0, immediateRender: false, ease: "power2.inOut" }, "-=0.6")
            .fromTo(dashThree, 0.6, { x: 30, opacity: 0 }, { x: 0, opacity: 1, immediateRender: false, ease: "power2.inOut" })
            .fromTo(priceThree, 0.6, { y: 30, opacity: 0 }, { y: 0, opacity: 1, immediateRender: false, ease: "power2.inOut" }, "-=0.6")
            .fromTo(dashThree, 0.6, { x: 0, opacity: 1 }, { x: -30, opacity: 0, immediateRender: false, ease: "power2.inOut" }, "+=6")
            .fromTo(priceThree, 0.6, { y: 0, opacity: 1 }, { y: 30, opacity: 0, immediateRender: false, ease: "power2.inOut" }, "-=0.6")
            .fromTo(dashOne, 0.6, { x: 30, opacity: 0 }, { x: 0, opacity: 1, immediateRender: false, ease: "power2.inOut" })
            .fromTo(priceOne, 0.6, { y: 30, opacity: 0 }, { y: 0, opacity: 1, immediateRender: false, ease: "power2.inOut" }, "-=0.6");


            
          let claimStatusAnim = gsap.timeline({ id:"Claim Status Animation", repeat: -1, repeatDelay: 4 })
            .from(claimStatus, 1, { opacity: 0, x: "+=30" })
            .to(csProgress, 1, { width: 85 })
            .to(csDotOne, 0.5, { fill: "#0198FF" }, "-=1")
            .to(csDotTwo, 0.5, { fill: "#0198FF" }, "-=0.5")
            .fromTo(csLineOne, 1, { drawSVG: "0%" }, { drawSVG: "100%" }, "-=1")
            .fromTo(underWritingLine, 1, { drawSVG: "100% 100%" }, { drawSVG: "0% 100%" }, "-=0.5")
            .from(underWritingBadge, 1, { opacity: 0, y: "+=30" }, "-=0.5")
            .fromTo(trovLineOne, 0.5, { drawSVG: "100% 100%" }, { drawSVG: "0% 100%" })
            .fromTo(trovLogo, 0.5, { opacity: 0, x: "+=30" }, { opacity: 1, x: 0 })
            .fromTo(trovLineTwo, 0.5, { drawSVG: "100% 100%" }, { drawSVG: "100% 0%" })
            .fromTo(csLongLine, 2, { drawSVG: "100% 100%" }, { drawSVG: "0% 100%", ease: "none" }, "-=2")
            .fromTo(devBorder, 1, { drawSVG: "60% 60%" }, { drawSVG: "0% 100%" }, "-=0.25")
            .from(devGroups, 0.5, { opacity: 0, stagger: 0.1 })
            .to(csProgress, 1, { width: 170 }, "+=3")
            .fromTo(csLineTwo, 1, { drawSVG: "0%" }, { drawSVG: "100%" }, "-=1")
            .to(csDotThree, 0.5, { fill: "#0198FF" }, "-=0.5")
            .from(csSpeechBubbles, 0.5, { opacity: 0, y: "+=30", stagger: 1, ease: "power2.inOut" })
            .from(csSpeechLines, 0.5, { scaleX: 0, transformOrigin: "left center", stagger: 0.5 }, "-=1")
            .from(csSpeechSuccess, 1, { opacity: 0, y: "+=30", stagger: 0.2 })
            .to(csProgress, 1, { width: 255 }, "-=1");

          ScrollTrigger.create({
            trigger: claimStatus,
            start: "top bottom",
            end: "bottom top",
            onEnter: function(){
              claimStatusAnim.play();
            },
            onEnterBack: function(){
              claimStatusAnim.play();
            },
            onLeave: function(){
              claimStatusAnim.pause();
            },
            onLeaveBack: function(){
              claimStatusAnim.pause();
            }
          });
Purchase and Renew POST /quotes POST /quotes/{id}/bind GET Manage /customers/{id}/policies POST /customers/{id}/cancel GET Configuration /products POST /notifications/subscribe POST Claims /claims/initiate Events Notifications Webhook Add Coverage £5/mo #ABC9876DFE43 21 Claim Status Your claim is in progress Your claim is under review Your claim is submitted Claim Settled! Contents Renters Pet Travel Auto Fleet Home Small Business Underwritten by leading carriers 
        let globe = document.getElementById('globe'),
            bloops = globe.querySelectorAll('.bloop'),
            poi = globe.querySelectorAll('.poi'),
            poiEcho = globe.querySelectorAll('.poi-echo path'),
            gradient = document.getElementById('bloop-gradient');

          let globeAnim = gsap.timeline({ repeat: -1, repeatDelay: 0 })
            .to(gradient, 10, { attr: { gradientTransform: "rotate(360)"}});

          let poiAnim = gsap.timeline({ id:"Globe Animation", repeat: -1, repeatDelay: 0 })
            .fromTo(poi, 1, { fill: "#0198FF", scale: 1 }, { fill: "#fff", scale: 1.25, transformOrigin: "center center", stagger: 2 })
            .fromTo(poiEcho, 2.5, { scale: 0.5, transformOrigin: "center center", opacity: 1 }, { scale: 30, transformOrigin: "center center", stagger: 0.5, opacity: 0 }, "-=4")
            .fromTo(poi, 1, { fill: "#fff", scale: 1.25 }, { fill: "#0198FF", scale: 1, transformOrigin: "center center" });

          ScrollTrigger.create({
            trigger: globe,
            start: "top bottom",
            end: "bottom top",
            onEnter: function(){
              globeAnim.play();
              poiAnim.play();
            },
            onEnterBack: function(){
              globeAnim.play();
              poiAnim.play();
            },
            onLeave: function(){
              globeAnim.pause();
              poiAnim.pause();
            },
            onLeaveBack: function(){
              globeAnim.pause();
              poiAnim.pause();
            }
          });
      
        let claimStatus = document.getElementById('claim-status'),
            csCategories = document.querySelectorAll('.cs-category'),
            csCatTitles = document.querySelectorAll('.cs-category text'),
            csCatShadows = document.querySelectorAll('.cs-cat-shadow'),
            csSpeechBubbles = document.querySelectorAll('.cs-speech-bubble'),
            csSpeechLines = document.querySelectorAll('.cs-speech-bubble line'),
            csSpeechSuccess = document.querySelectorAll('.cs-speech-success'),
            csProgress = document.getElementById('cs-progress'),
            csLineOne = document.getElementById('cs-line-1'),
            csLineTwo = document.getElementById('cs-line-2'),
            csDotOne = document.getElementById('cs-dot-1'),
            csDotTwo = document.getElementById('cs-dot-2'),
            csDotThree = document.getElementById('cs-dot-3'),
            underWritingLine = document.getElementById('underwriting-line'),
            underWritingText = document.getElementById('underwriting-text'),
            underWritingBadge = document.getElementById('underwriting-badge');

        let claimStatusCats = gsap.timeline({ repeat: -1, repeatDelay: 4 })
            .from(csCatTitles, 1, { opacity: 0, stagger: 4, ease: "power2.inOut" })
            .from(csCatShadows, 1, { opacity: 0, stagger: 4, ease: "power2.inOut" }, "-=29")
            .to(csCatTitles, 1, { opacity: 0, stagger: 4 },  "-=25")
            .to(csCatShadows, 1, { opacity: 0, stagger: 4 },  "-=29");
          
        let claimStatusAnim = gsap.timeline({ repeat: -1, repeatDelay: 4 })
            .from(claimStatus, 1, { opacity: 0, x: "+=30" })
            .to(csProgress, 1, { width: 85 })
            .fromTo(csLineOne, 1, { drawSVG: "0%" }, { drawSVG: "100%" }, "-=1")
            .fromTo(underWritingLine, 1, { drawSVG: "100% 100%" }, { drawSVG: "100%" }, "-=0.5")
            .from(underWritingBadge, 1, { opacity: 0, y: "+=30" }, "-=0.5")
            .from(underWritingText, 1, { opacity: 0, x: "+=30" }, "-=1")
            .to(csDotTwo, 0.5, { fill: "#0198FF" }, "-=0.5")
            .to(csProgress, 1, { width: 170 }, "+=1")
            .fromTo(csLineTwo, 1, { drawSVG: "0%" }, { drawSVG: "100%" }, "-=1")
            .to(csDotThree, 0.5, { fill: "#0198FF" }, "-=0.5")
            .from(csSpeechBubbles, 0.5, { opacity: 0, y: "+=30", stagger: 0.5, ease: "power2.inOut" })
            .from(csSpeechLines, 0.5, { scaleX: 0, transformOrigin: "left center", stagger: 0.5 })
            .from(csSpeechSuccess, 1, { opacity: 0, y: "+=30" })
            .to(csProgress, 1, { width: 255 }, "-=1");
Underwriters Capacity Policies Products Pricing Claims Taxes Rating Quoting Binding Cancelation Reporting Notifications Regionality Underwriters Capacity Policies Products Pricing Claims Taxes Rating Quoting Binding Cancelation Reporting Notifications Regionality Your Business