var qs = document.querySelector.bind(document) var qsa = document.querySelectorAll.bind(document) // // home page // var $indexDynamic = qs('#index-dynamic-animation') if ($indexDynamic) { var initiated = false var observer = new IntersectionObserver( function(entries) { if (!initiated && entries[0].isIntersecting) { $indexDynamic.classList.add('active') var lines = qsa( '#lines-origin-aws > *, #lines-origin-azure > *, #lines-origin-gcp > *' ) setTimeout(function() { timer = setInterval(function() { lines[parseInt(Math.random() * lines.length)].classList.toggle( 'off' ) }, 800) }, 3000) initiated = true } }, { threshold: 0.5 } ) observer.observe($indexDynamic) } // // configuration page // var $configChallenge = qs('#configuration-challenge-animation') var $configSolution = qs('#configuration-solution-animation') if ($configChallenge) { // challenge animation var configChallengeTimeline = new TimelineLite({ onComplete: function() { configChallengeTimeline.restart() configSolutionTimeline.restart() } }) var line1 = qs('#c-line-1') var line2 = qs('#c-line-2') var line3 = qs('#c-line-3') var line4 = qs('#c-line-4') var line5 = qs('#c-line-5') var line6 = qs('#c-line-6') var line7 = qs('#c-line-7') var line8 = qs('#c-line-8') var box1 = qs('#c-box-1') var box2 = qs('#c-box-2') var box3 = qs('#c-box-3') var box4 = qs('#c-box-4') var box5 = qs('#c-box-5') var box6 = qs('#c-box-6') var box7 = qs('#c-box-7') var box8 = qs('#c-box-8') var progressBar = qs('#c-loading-bar > rect:last-child') var cog = qs('#c-configuration-server > g > path') configChallengeTimeline .to(box1, 1, {}) .staggerTo( [line1, line2, line3, line4, line5, line6, line7, line8], 1.5, { css: { strokeDashoffset: 0 } }, 0.3, 'start' ) .staggerTo( [box1, box2, box3, box4, box5, box6, box7, box8], 0.3, { opacity: 1 }, 0.3, '-=2.5' ) .fromTo( progressBar, 3.5, { attr: { width: 0 } }, { attr: { width: 40 } }, 'start' ) .to( cog, 3.5, { rotation: 360, svgOrigin: '136px 127px', ease: Power1.easeOut }, 'start' ) .call(function () { configSolutionTimeline.resume(configSolutionTimeline.time()) }) .to(line1, 2, {}) .to( [line1, line2, line3, line4, line5, line6, line7, line8, progressBar], 0.5, { opacity: 0 }, 'reset' ) .to( [box1, box2, box3, box4, box5, box6, box7, box8], 0.5, { opacity: 0.5 }, 'reset' ) .pause() // solution animation var configSolutionTimeline = new TimelineLite() var lines = qsa( '#s-line-1, #s-line-2, #s-line-3, #s-line-4, #s-line-5, #s-line-6, #s-line-7, #s-line-8' ) var dots = qs('#s-dots') var boxes = qsa( '#s-service-box-1, #s-service-box-2, #s-service-box-3, #s-service-box-4, #s-service-box-5, #s-service-box-6, #s-service-box-7, #s-service-box-8' ) var progress = qs('#s-progress-indicator') configSolutionTimeline .to(boxes, 1, {}) .to(lines, 1, { css: { strokeDashoffset: 0 } }, 'start') .to(boxes, 0.5, { opacity: 1 }, '-=0.4') .fromTo( progress, 1, { attr: { width: 0 } }, { attr: { width: 40 } }, 'start' ) .to(dots, 0.25, { opacity: 1 }, '-=0.5') .addPause() .to(progress, 2, {}) .to(lines, 0.5, { opacity: 0 }, 'reset') .to(boxes, 0.5, { opacity: 0.5 }, 'reset') .to(progress, 0.5, { opacity: 0 }, 'reset') .to(dots, 0.5, { opacity: 0 }, 'reset') .pause() // kick off $configChallenge.classList.add('active') $configSolution.classList.add('active') configChallengeTimeline.play() configSolutionTimeline.play() } // // discovery page // var $discoveryChallenge = qs('#discovery-challenge-animation') var $discoverySolution = qs('#discovery-solution-animation') if ($discoveryChallenge) { // challenge animation var discoveryChallengeTimeline = new TimelineLite({ onComplete: function() { discoveryChallengeTimeline.restart() discoverySolutionTimeline.restart() } }) // First, we get each of the elements we need to animate var box = qs('#c-active-box') var leftPlacement = qs('#c-box-left-placement') var rightPlacement = qs('#c-box-right-placement') var leftConnectionLines = qsa( '#c-line-top-left > *, #c-line-bottom-left > *, #c-line-horizontal-left > *, #c-line-vertical-down > *' ) var rightConnectionLines = qsa( '#c-line-top-right > *, #c-line-bottom-right > *, #c-line-horizontal-left > *, #c-line-vertical-down > *, #c-line-horizontal-right > *' ) var leftConnectionTop = qs('#c-line-top-left') var leftConnectionBottom = qs('#c-line-bottom-left') var rightHorizontalConnection = qs('#c-line-horizontal-right') var rightConnectionTop = qs('#c-line-top-right') var rightConnectionBottom = qs('#c-line-bottom-right') var rightConnectionLinesStroke = qsa( '#c-line-top-right > *, #c-line-bottom-right > *, #c-line-horizontal-right > *, #c-line-horizontal-left > *, #c-line-vertical-down > *' ) var leftConnectionLinesStroke = qsa( '#c-line-top-left > *, #c-line-bottom-left > *, #c-line-horizontal-left > *, #c-line-vertical-down > *' ) var brokenLinkLeft = qs('#c-broken-link-left') var brokenLinkRight = qs('#c-broken-link-right') var computer = qs('#c-computer') var codeLines = qs('#c-computer > g') var toLoadBalancerDown = qsa( '#c-computer-to-load-balancers #c-arrow-down, #c-computer-to-load-balancers #c-circle' ) var toLoadBalancerRight = qs('#c-computer-to-load-balancers #c-arrow-right') var toLoadBalancerLeft = qs('#c-computer-to-load-balancers #c-arrow-left') var toLoadBalancerRest = qs('#c-computer-to-load-balancers #c-edit-box') var progressBars = qsa( '#c-load-balancer-left > #c-progress-bar, #c-load-balancer-right > #c-progress-bar-2, #c-load-balancer-middle > #c-progress-bar-3' ) var progressBarsBars = qsa( '#c-load-balancer-left > #c-progress-bar > *:last-child, #c-load-balancer-right > #c-progress-bar-2 > *:last-child, #c-load-balancer-middle > #c-progress-bar-3 > *:last-child' ) var farLeftBoxBorder = qs('#c-box-far-left > path') // Then, we run each step of the animation using GSAP's TimelineLine, a // fantastic way to set up a series of complex movements discoveryChallengeTimeline .to(box, 1, {}) // box moves to new position .to(box, 1, { css: { transform: 'translate(96px, 48px)' } }) .to(leftPlacement, 0.5, { css: { opacity: 1 } }, '-=1') .to(rightPlacement, 0.25, { css: { opacity: 0 } }, '-=0.25') // connection lines turn black .to(leftConnectionLines, 0.5, { css: { stroke: '#000' } }) .to(farLeftBoxBorder, 0.5, { css: { fill: '#000' } }, '-=0.5') // broken link appears .to( leftConnectionTop, 0.1, { css: { strokeDashoffset: 6 }, ease: Linear.easeNone }, '-=0.3' ) .to(brokenLinkLeft, 0.2, { css: { opacity: 1 } }, '-=0.15') // computer appears and code is written .to(computer, 0.5, { css: { opacity: 1 } }) .staggerFrom( codeLines, 0.4, { css: { transform: 'translate(-64px, 0)', opacity: 0 } }, 0.1 ) .to(codeLines, 0.3, { css: { transform: 'translate(0, 0)', opacity: 1 } }) // code moves to load balancers .to(toLoadBalancerRest, 0.4, { css: { opacity: 1 } }) .to(toLoadBalancerLeft, 0.2, { css: { opacity: 1 } }, 'loadBalancerArrows') .to(toLoadBalancerRight, 0.2, { css: { opacity: 1 } }, 'loadBalancerArrows') .to(toLoadBalancerDown, 0.2, { css: { opacity: 1 } }, 'loadBalancerArrows') // load balancers progress bars, old broken link fades out .to(progressBars, 0.2, { css: { opacity: 1 } }) .staggerFromTo( progressBarsBars, 1.5, { attr: { width: 0 } }, { attr: { width: 40 } }, 0.3 ) .to( [] .concat(toLoadBalancerRest) .concat([].slice.call(toLoadBalancerDown)) .concat([ toLoadBalancerRight, toLoadBalancerLeft, brokenLinkLeft, leftConnectionTop, leftConnectionBottom ]), 0.5, { css: { opacity: 0 } }, '-=0.75' ) .to(computer, 0.5, { css: { opacity: .12 } }, '-=0.75') .to(progressBars, 0.5, { css: { opacity: 0 } }) // new connection is drawn .to(rightHorizontalConnection, 0.3, { css: { strokeDashoffset: 0 } }) .to(rightConnectionTop, 0.2, { css: { strokeDashoffset: 0 }, ease: Linear.easeNone }) .to(rightConnectionBottom, 0.3, { css: { strokeDashoffset: 0 }, ease: Linear.easeNone }) // connection lines turn blue .to( rightConnectionLinesStroke, 0.5, { css: { stroke: '#3969ED' } }, '-=0.3' ) .to(farLeftBoxBorder, 0.5, { css: { fill: '#3969ED' } }, '-=0.5') // wait three seconds .to(box, 3, {}) // box moves back to original position .to(box, 1, { css: { transform: 'translate(0, 0)' } }, 'loop2') .to(leftPlacement, 0.25, { css: { opacity: 0 } }, '-=0.25') .to(rightPlacement, 0.5, { css: { opacity: 1 } }, '-=0.5') // connection lines turn black .to(rightConnectionLines, 0.5, { css: { stroke: '#000' } }) .to(farLeftBoxBorder, 0.5, { css: { fill: '#000' } }, '-=0.5') // broken link appears .to( rightConnectionTop, 0.1, { css: { strokeDashoffset: 6 }, ease: Linear.easeNone }, '-=0.3' ) .to(brokenLinkRight, 0.2, { css: { opacity: 1 } }, '-=0.15') // computer appears and code is written .from(codeLines, 0.1, { css: { opacity: 0 } }) .to(computer, 0.5, { css: { opacity: 1 } }, '-=0.1') .staggerFromTo( codeLines, 0.4, { css: { transform: 'translate(-64px, 0)', opacity: 0 } }, { css: { transform: 'translate(0, 0)', opacity: 1 } }, 0.1 ) // code moves to load balancers .to(toLoadBalancerRest, 0.4, { css: { opacity: 1 } }) .to(toLoadBalancerLeft, 0.2, { css: { opacity: 1 } }, 'loadBalancerArrows2') .to( toLoadBalancerRight, 0.2, { css: { opacity: 1 } }, 'loadBalancerArrows2' ) .to(toLoadBalancerDown, 0.2, { css: { opacity: 1 } }, 'loadBalancerArrows2') // load balancers progress bars, old broken link fades out .to(progressBarsBars, 0.1, { attr: { width: 0 } }) .to(progressBars, 0.2, { attr: { opacity: 1 } }) .staggerFromTo( progressBarsBars, 1.5, { css: { width: 0 } }, { css: { width: 40 } }, 0.3 ) .to( [] .concat(toLoadBalancerRest) .concat([].slice.call(toLoadBalancerDown)) .concat([ toLoadBalancerRight, toLoadBalancerLeft, brokenLinkRight, rightConnectionTop, rightConnectionBottom, rightHorizontalConnection ]), 0.5, { css: { opacity: 0 } }, '-=0.75' ) .to(computer, 0.5, { css: { opacity: .12 } }, '-=0.75') .to(progressBars, 0.5, { css: { opacity: 0 } }) // new connection is drawn .to(leftConnectionTop, 0.01, { css: { strokeDashoffset: 17 } }) .to(leftConnectionBottom, 0.01, { css: { strokeDashoffset: 56 } }) .to([leftConnectionTop, leftConnectionBottom], 0.01, { css: { opacity: 1 } }) .to(leftConnectionTop, 0.2, { css: { strokeDashoffset: 0 }, ease: Linear.easeNone }) .to(leftConnectionBottom, 0.3, { css: { strokeDashoffset: 0 }, ease: Linear.easeNone }) // connection lines turn blue .to(leftConnectionLinesStroke, 0.5, { css: { stroke: '#3969ED' } }, '-=0.3') .to(farLeftBoxBorder, 0.5, { css: { fill: '#3969ED' } }, '-=0.5') .call(function () { discoverySolutionTimeline.resume(discoverySolutionTimeline.time()) }) .to(box, 2, {}) .pause() // solution animation var discoverySolutionTimeline = new TimelineLite() var inactiveBox = qs('#s-active-service-1') var inactiveBoxStroke = qs('#s-active-service-1 > path') var activeBox = qs('#s-active-service-2') var activeBoxStroke = qs('#s-active-service-2 > path') var leftPlacement = qs('#s-dotted-service-box-2') var rightPlacement = qs('#s-dotted-service-box-3') var leftConnectionLine = qs('#s-connected-line-1') var rightConnectionLine = qs('#s-connected-line-2') var dottedLineLeft = qs('#s-dotted-line-left') var dottedLineRight = qs('#s-dotted-lines-right') var dottedLineRightPrimary = qs('#s-dotted-lines-right > path:nth-child(2)') var dottedLineRightAlt = qs('#s-dotted-lines-right > path:last-child') var syncLeft = qs('#s-dynamic-sync-left') var syncRight = qs('#s-dynamic-sync-right') var syncSpinnerLeft = qs('#s-dynamic-sync-left > path') var syncSpinnerRight = qs('#s-dynamic-sync-right > path') discoverySolutionTimeline .to(activeBox, 1, {}) // box moves .to(activeBox, 0.5, { x: 96, y: 48 }) .to(leftPlacement, 0.25, { css: { opacity: 1 } }, '-=0.5') .to(rightPlacement, 0.25, { css: { opacity: 0 } }, '-=0.1') // connection is broken .to(leftConnectionLine, 0.75, { css: { strokeDashoffset: 222 } }, '-=0.5') // box color changes to black .to(activeBoxStroke, 0.25, { css: { fill: '#000' } }, '-=0.4') .to(inactiveBoxStroke, 0.25, { css: { fill: '#000' } }, '-=0.4') // right sync lines appear .to(dottedLineRight, 0.4, { css: { opacity: 1 } }) .to(syncRight, 0.2, { css: { opacity: 1 } }, '-=0.2') .to(syncSpinnerRight, 1, { rotation: 360, svgOrigin: '232px 127px' }) // left sync lines appear .to(dottedLineLeft, 0.4, { css: { opacity: 1 } }, '-=0.6') .to(syncLeft, 0.2, { css: { opacity: 1 } }, '-=0.2') .to(syncSpinnerLeft, 1, { rotation: 360, svgOrigin: '88px 127px' }) // connection is redrawn .to(rightConnectionLine, 0.75, { css: { strokeDashoffset: 0 } }) // right sync lines disappear .to(dottedLineRight, 0.4, { css: { opacity: 0 } }, '-=1.2') .to(syncRight, 0.2, { css: { opacity: 0 } }, '-=1.2') // left sync lines disappear .to(dottedLineLeft, 0.4, { css: { opacity: 0 } }, '-=0.5') .to(syncLeft, 0.2, { css: { opacity: 0 } }, '-=0.5') // box color changes to pink .to(activeBoxStroke, 0.25, { css: { fill: '#ca2171' } }, '-=0.2') .to(inactiveBoxStroke, 0.25, { css: { fill: '#ca2171' } }, '-=0.2') // wait three seconds .to(activeBox, 3, {}) // box moves .to(activeBox, 0.5, { x: 0, y: 0 }) .to(leftPlacement, 0.25, { css: { opacity: 0 } }, '-=0.1') .to(rightPlacement, 0.25, { css: { opacity: 1 } }, '-=0.5') // connection is broken .to(rightConnectionLine, 0.75, { css: { strokeDashoffset: 270 } }, '-=0.5') // box color changes to black .to(activeBoxStroke, 0.25, { css: { fill: '#000' } }, '-=0.4') .to(inactiveBoxStroke, 0.25, { css: { fill: '#000' } }, '-=0.4') // right sync lines appear .to(dottedLineRightAlt, 0.01, { css: { opacity: 1 } }) .to(dottedLineRightPrimary, 0.01, { css: { opacity: 0 } }) .to(dottedLineRight, 0.4, { css: { opacity: 1 } }) .to(syncRight, 0.2, { css: { opacity: 1 } }, '-=0.2') .fromTo( syncSpinnerRight, 1, { rotation: 0 }, { rotation: 360, svgOrigin: '232px 127px' } ) // left sync lines appear .to(dottedLineLeft, 0.4, { css: { opacity: 1 } }, '-=0.6') .to(syncLeft, 0.2, { css: { opacity: 1 } }, '-=0.2') .fromTo( syncSpinnerLeft, 1, { rotation: 0 }, { rotation: 360, svgOrigin: '88px 127px' } ) // connection is redrawn .to(leftConnectionLine, 0.75, { css: { strokeDashoffset: 0 } }) // right sync lines disappear .to(dottedLineRight, 0.4, { css: { opacity: 0 } }, '-=1.2') .to(syncRight, 0.2, { css: { opacity: 0 } }, '-=1.2') // left sync lines disappear .to(dottedLineLeft, 0.4, { css: { opacity: 0 } }, '-=0.5') .to(syncLeft, 0.2, { css: { opacity: 0 } }, '-=0.5') // box color changes to pink .to(activeBoxStroke, 0.25, { css: { fill: '#ca2171' } }, '-=0.2') .to(inactiveBoxStroke, 0.25, { css: { fill: '#ca2171' } }, '-=0.2') .addPause() // wait three seconds .to(activeBox, 2, {}) .pause() // kick it off $discoveryChallenge.classList.add('active') $discoverySolution.classList.add('active') discoveryChallengeTimeline.play() discoverySolutionTimeline.play() } // // discovery page // var $segmentationChallenge = qs('#segmentation-challenge-animation') var $segmentationSolution = qs('#segmentation-solution-animation') if ($segmentationChallenge) { // challenge animation var segmentationChallengeTimeline = new TimelineLite({ onComplete: function() { segmentationChallengeTimeline.restart() segmentationSolutionTimeline.restart() } }) var computerUpdatePath = qs('#c-firewall-updates #c-update_path') var computerUpdateBox = qs('#c-firewall-updates #c-edit') var computer = qs('#c-computer') var progressBars = qsa( '#c-progress-indicator, #c-progress-indicator-2, #c-progress-indicator-3' ) var progressBarBars = qsa( '#c-progress-indicator > rect:last-child, #c-progress-indicator-2 > rect:last-child, #c-progress-indicator-3 > rect:last-child' ) var brokenLinks = qsa('#c-broken-link-1, #c-broken-link-2, #c-broken-link-3') var box2 = qs('#c-box-2') var box2Border = qs('#c-box-2 > path') var box4 = qs('#c-box-4') var box4Border = qs('#c-box-4 > path') var box6 = qs('#c-box-6') var box6Border = qs('#c-box-6 > path') var box7 = qs('#c-box-7') var box7Border = qs('#c-box-7 > path') var path1a = qs('#c-path-1 > *:nth-child(2)') var path1b = qs('#c-path-1 > *:nth-child(3)') var path1c = qs('#c-path-1 > *:nth-child(1)') var path2a = qs('#c-path-2 > *:nth-child(1)') var path2b = qs('#c-path-2 > *:nth-child(3)') var path2c = qs('#c-path-2 > *:nth-child(2)') var path3a = qs('#c-path-3 > *:nth-child(2)') var path3b = qs('#c-path-3 > *:nth-child(3)') var path3c = qs('#c-path-3 > *:nth-child(1)') segmentationChallengeTimeline .to(box2, 1, {}) // box 4 and 6 appear .to(box4Border, 0.4, { css: { fill: '#000' } }, 'box4-in') .fromTo( box4, 0.3, { scale: 0, rotation: 200, opacity: 0, svgOrigin: '291px 41px' }, { scale: 1, rotation: 360, opacity: 1 }, 'box4-in' ) .to(box6Border, 0.4, { css: { fill: '#000' } }, '-=0.2') .fromTo( box6, 0.3, { scale: 0, rotation: 200, opacity: 0, svgOrigin: '195px 289px' }, { scale: 1, rotation: 360, opacity: 1 }, '-=0.4' ) // wait for a moment .to(box2, 1, {}) // computer appears and sends updates to firewalls .to(computer, 0.5, { opacity: 1 }) .to(computerUpdateBox, 0.3, { opacity: 1 }, '-=0.2') .to(computerUpdatePath, 0.3, { opacity: 1 }, '-=0.2') // firewall progress bars .to(progressBarBars, 0.01, { attr: { width: 0 } }) .to(progressBars, 0.2, { opacity: 1 }) .staggerTo(progressBarBars, 0.6, { attr: { width: 40 } }, 0.2) // connection 1 made .to(path1a, 0.3, { css: { strokeDashoffset: 0 }, ease: Linear.easeNone }) .to(path1b, 0.3, { css: { strokeDashoffset: 0 }, ease: Linear.easeNone }) .to(path1c, 0.3, { css: { strokeDashoffset: 0 }, ease: Linear.easeNone }) // progress bars and firewall update lines fade out .to(progressBars, 0.7, { opacity: 0 }, 'resetComputer1') .to(computerUpdateBox, 0.7, { opacity: 0 }, 'resetComputer1') .to(computerUpdatePath, 0.7, { opacity: 0 }, 'resetComputer1') // connection turns blue .to( [path1a, path1b, path1c], 0.5, { css: { stroke: '#3969ED' } }, 'resetComputer1' ) .to( [box4Border, box6Border], 0.5, { css: { fill: '#3969ED' } }, 'resetComputer1' ) // second connection draws .to( path2a, 0.3, { css: { strokeDashoffset: 0 }, ease: Linear.easeNone }, '-=0.3' ) .to(path2b, 0.3, { css: { strokeDashoffset: 0 }, ease: Linear.easeNone }) .to(path2c, 0.2, { css: { strokeDashoffset: 0 }, ease: Linear.easeNone }) // second connection turns blue .to([path2a, path2b, path2c], 0.5, { css: { stroke: '#3969ED' } }, '-=0.1') .to(box7Border, 0.5, { css: { fill: '#3969ED' } }, '-=0.3') // wait a moment .to(box2, 2, {}) // blue elements fade back to gray .to( [path1a, path1b, path1c, path2a, path2b, path2c], 0.5, { css: { stroke: '#b5b8c4' } }, 'colorReset1' ) .to( [box7Border, box4Border, box6Border], 0.5, { css: { fill: '#b5b8c4' } }, 'colorReset1' ) // box 2 appears .to(box2Border, 0.4, { css: { fill: '#000' } }, 'colorReset1') .fromTo( box2, 0.3, { scale: 0, rotation: 200, opacity: 0, svgOrigin: '195px 42px' }, { scale: 1, rotation: 360, opacity: 1 }, '-=0.4' ) // wait a moment .to(box2, 1, {}) // computer updates firewalls .to(computerUpdateBox, 0.3, { opacity: 1 }, '-=0.2') .to(computerUpdatePath, 0.3, { opacity: 1 }, '-=0.2') // firewall progress bars .to(progressBarBars, 0.01, { width: 0 }) .to(progressBars, 0.2, { opacity: 1 }) .staggerTo(progressBarBars, 0.6, { width: 40 }, 0.2) // third connection made .to(path3a, 0.3, { css: { strokeDashoffset: 0 }, ease: Linear.easeNone }) .to(path3b, 0.3, { css: { strokeDashoffset: 0 }, ease: Linear.easeNone }) .to(path3c, 0.3, { css: { strokeDashoffset: 0 }, ease: Linear.easeNone }) // progress bars & computer arrows fade out .to(progressBars, 0.5, { opacity: 0 }, 'computerReset2') .to(computerUpdateBox, 0.5, { opacity: 0 }, 'computerReset2') .to(computerUpdatePath, 0.5, { opacity: 0 }, 'computerReset2') // third connection turns blue .to( [path3a, path3b, path3c], 0.5, { css: { stroke: '#3969ED' } }, 'computerReset2' ) .to( [box2Border, box7Border], 0.5, { css: { fill: '#3969ED' } }, 'computerReset2' ) // wait a bit .to(box2, 2, {}) // third connection turns back to gray .to( [path3a, path3b, path3c], 0.5, { css: { stroke: '#b5b8c4' } }, 'colorReset2' ) .to( [box2Border, box7Border], 0.5, { css: { fill: '#b5b8c4' } }, 'colorReset2' ) // boxes 2, 4, and 6 disappear .to( [box2, box4, box6], 0.6, { scale: 0, rotation: 200, opacity: 0 }, '-=0.4' ) // lines turn red and broken links appear .to( [path1a, path1b, path1c, path2a, path2b, path2c, path3a, path3b, path3c], 0.3, { css: { stroke: '#ED4168' } }, '-=0.2' ) .to(brokenLinks, 0.3, { opacity: 1 }, '-=0.3') // wait a moment .to(box2, 1, {}) // code sent to firewalls .to(computerUpdateBox, 0.3, { opacity: 1 }) .to(computerUpdatePath, 0.3, { opacity: 1 }) // firewall progress bars .to(progressBarBars, 0.01, { width: 0 }) .to(progressBars, 0.2, { opacity: 1 }) .staggerTo(progressBarBars, 0.6, { width: 40 }, 0.2) .to(box2, 0.5, {}) // faulty connections removed .to( [ path1a, path1b, path1c, path2a, path2b, path2c, path3a, path3b, path3c ].concat(brokenLinks), 0.7, { opacity: 0 } ) // progress bars and connection arrows fade out .to(progressBars, 0.5, { opacity: 0 }, 'computerReset3') .to(computerUpdateBox, 0.5, { opacity: 0 }, 'computerReset3') .to(computerUpdatePath, 0.5, { opacity: 0 }, 'computerReset3') .to(computer, 0.5, { opacity: 0 }, 'computerReset3') .call(function () { segmentationSolutionTimeline.resume(segmentationSolutionTimeline.time()) }) // wait a moment before the loop .to(box2, 1, {}) .pause() // solution animation var segmentationSolutionTimeline = new TimelineLite() // service boxes var box1 = qs('#s-service-2') var box1Border = qs('#s-service-2 > path') var box1Lock = qs('#s-service-2 #s-secure-indicator-2') var box2 = qs('#s-service-4') var box2Border = qs('#s-service-4 > path') var box2Lock = qs('#s-service-4 #s-secure-indicator-4') var box3 = qs('#s-service-6') var box3Border = qs('#s-service-6 > path') var box3Lock = qs('#s-service-6 #s-secure-indicator-6') // connection paths var path1a = qs('#s-connection-path-2') var path1b = qs('#s-connection-path-8') var path2a = qs('#s-connection-path-9') var path2b = qs('#s-connection-path-10') var path3a = qs('#s-connection-path-1') var path3b = qs('#s-connection-path-4') var path3c = qs('#s-connection-path-5') var path3d = qs('#s-connection-path-6') // inbound consul updates var inboundPathLower = qs('#s-consul-inbound-paths-lower') var inboundUpdateLower = qs('#s-dynamic-update-inbound-lower') var inboundUpdateLowerSpinner = qs('#s-dynamic-update-inbound-lower > path') var inboundPathUpper = qs('#s-consul-inbound-paths-upper') var inboundUpdateUpper = qs('#s-dynamic-update-inbound-upper') var inboundUpdateUpperSpinner = qs('#s-dynamic-update-inbound-upper > path') // outbound consul updates var outboundPathsLower = qsa( '#s-consul-server-connection-lower, #s-consul-outbound-5, #s-consul-outbound-6, #s-consul-outbound-7' ) var outboundUpdateLower = qsa( '#s-dynamic-update-outbound-ower, #s-tls-cert-lower' ) var outboundUpdateLowerSpinner = qs('#s-dynamic-update-outbound-ower > path') var outboundPathsUpper1 = qsa( '#s-consul-server-connection-upper, #s-consul-outbound-3, #s-consul-outbound-4' ) var outboundPathsUpper2 = qsa( '#s-consul-server-connection-upper, #s-consul-outbound-1, #s-soncul-outbound-2' ) var outboundUpdateUpper = qsa( '#s-tls-cert-upper, #s-dynamic-update-outbound-upper' ) var outboundUpdateUpperSpinner = qs('#s-dynamic-update-outbound-upper > path') segmentationSolutionTimeline .to(box2, 1, {}) // boxes 2 and 3 appear .fromTo( box2, 0.3, { scale: 0, rotation: 200, opacity: 0, svgOrigin: '281px 104px' }, { scale: 1, rotation: 360, opacity: 1 } ) .fromTo( box3, 0.3, { scale: 0, rotation: 200, opacity: 0, svgOrigin: '185px 226px' }, { scale: 1, rotation: 360, opacity: 1 }, '-=0.1' ) // wait a moment .to(box1, 0.5, {}) // consul speaks to each box that needs a connection made .to(outboundPathsUpper1, 0.5, { opacity: 1 }) .to(outboundPathsLower, 0.5, { opacity: 1 }, '-=0.3') .to(outboundUpdateUpper, 0.3, { opacity: 1 }, '-=0.3') .to(outboundUpdateLower, 0.3, { opacity: 1 }, '-=0.1') .to( outboundUpdateUpperSpinner, 0.7, { rotation: 360, svgOrigin: '44px 99px' }, '-=0.5' ) .to( outboundUpdateLowerSpinner, 0.7, { rotation: 360, svgOrigin: '44px 246px' }, '-=0.3' ) // pink borders, locks, connections drawn, consul talk fades .to(box2Lock, 0.3, { opacity: 1 }, 'connections-1') .to(box2Border, 0.3, { fill: '#CA2270' }, 'connections-1') .to(box3Lock, 0.3, { opacity: 1 }, 'connections-1') .to(box3Border, 0.3, { fill: '#CA2270' }, 'connections-1') .to(outboundPathsUpper1, 0.7, { opacity: 0 }, 'connections-1') .to(outboundPathsLower, 0.7, { opacity: 0 }, 'connections-1') .to(outboundUpdateUpper, 0.7, { opacity: 0 }, 'connections-1') .to(outboundUpdateLower, 0.7, { opacity: 0 }, 'connections-1') .to( path1a, 0.5, { css: { strokeDashoffset: 0, stroke: '#CA2270' } }, 'connections-1' ) .to( path1b, 0.5, { css: { strokeDashoffset: 0, stroke: '#CA2270' } }, 'connections-1' ) .to( path2a, 0.5, { css: { strokeDashoffset: 0, stroke: '#CA2270' } }, 'connections-1' ) .to( path2b, 0.5, { css: { strokeDashoffset: 0, stroke: '#CA2270' } }, 'connections-1' ) // wait a moment .to(box1, 0.5, {}) // box 1 appears .fromTo( box1, 0.3, { scale: 0, rotation: 200, opacity: 0, svgOrigin: '185px 104px' }, { scale: 1, rotation: 360, opacity: 1 }, '-=0.1' ) // wait a moment, previous paths fade ('#EEB9D1') .to(box1, 0.5, {}, 'stage-1-complete') .to(box2Border, 0.5, { fill: '#EEB9D1' }, 'stage-1-complete') .to(box3Border, 0.5, { fill: '#EEB9D1' }, 'stage-1-complete') .to(path1a, 0.5, { css: { stroke: '#EEB9D1' } }, 'stage-1-complete') .to(path1b, 0.5, { css: { stroke: '#EEB9D1' } }, 'stage-1-complete') .to(path2a, 0.5, { css: { stroke: '#EEB9D1' } }, 'stage-1-complete') .to(path2b, 0.5, { css: { stroke: '#EEB9D1' } }, 'stage-1-complete') // consul speaks to each box that needs a connection made .to(outboundPathsUpper2, 0.5, { opacity: 1 }) .to(outboundPathsLower, 0.5, { opacity: 1 }, '-=0.3') .to(outboundUpdateUpper, 0.3, { opacity: 1 }, '-=0.3') .to(outboundUpdateLower, 0.3, { opacity: 1 }, '-=0.1') .to( outboundUpdateUpperSpinner, 0.7, { rotation: 720, svgOrigin: '44px 99px' }, '-=0.5' ) .to( outboundUpdateLowerSpinner, 0.7, { rotation: 720, svgOrigin: '44px 246px' }, '-=0.3' ) // connections drawn .to(box1Lock, 0.3, { opacity: 1 }, 'connections-2') .to(box1Border, 0.3, { fill: '#CA2270' }, 'connections-2') .to( path3a, 0.5, { css: { strokeDashoffset: 0, stroke: '#CA2270' } }, 'connections-2' ) .to( path3b, 0.5, { css: { strokeDashoffset: 0, stroke: '#CA2270' } }, 'connections-2' ) .to( path3c, 0.5, { css: { strokeDashoffset: 0, stroke: '#CA2270' } }, 'connections-2' ) .to( path3d, 0.5, { css: { strokeDashoffset: 0, stroke: '#CA2270' } }, 'connections-2' ) .to(box1, 0.7, {}, 'stage-2-complete') .to(outboundPathsUpper2, 0.7, { opacity: 0 }, 'stage-2-complete') .to(outboundPathsLower, 0.7, { opacity: 0 }, 'stage-2-complete') .to(outboundUpdateUpper, 0.7, { opacity: 0 }, 'stage-2-complete') .to(outboundUpdateLower, 0.7, { opacity: 0 }, 'stage-2-complete') .to(box1Border, 0.5, { fill: '#EEB9D1' }, 'path-fade-2') .to(path3a, 0.5, { css: { stroke: '#EEB9D1' } }, 'path-fade-2') .to(path3b, 0.5, { css: { stroke: '#EEB9D1' } }, 'path-fade-2') .to(path3c, 0.5, { css: { stroke: '#EEB9D1' } }, 'path-fade-2') .to(path3d, 0.5, { css: { stroke: '#EEB9D1' } }, 'path-fade-2') // wait a moment .to(box1, 1, {}) // all new boxes and connections fade .to( [ box1, box2, box3, path1a, path1b, path2a, path2b, path3a, path3b, path3c, path3d ], 0.5, { opacity: 0.3 } ) // faded boxes speak to consul .to(inboundPathLower, 0.5, { opacity: 1 }, 'inbound') .to(inboundPathUpper, 0.5, { opacity: 1 }, 'inbound') .to(inboundUpdateLower, 0.5, { opacity: 1 }, 'inbound') .to(inboundUpdateUpper, 0.5, { opacity: 1 }, 'inbound') .to( inboundUpdateLowerSpinner, 0.7, { rotation: 360, svgOrigin: '44px 237px' }, '-=0.3' ) .to( inboundUpdateUpperSpinner, 0.7, { rotation: 360, svgOrigin: '44px 91px' }, '-=0.3' ) // consul removes faded boxes and connections .to( [ box1, box2, box3, path1a, path1b, path2a, path2b, path3a, path3b, path3c, path3d, inboundPathLower, inboundPathUpper, inboundUpdateLower, inboundUpdateUpper ], 0.5, { opacity: 0.0 } ) .addPause() // wait a moment before the loop .to(box1, 1, {}) .pause() // kick it off $segmentationChallenge.classList.add('active') $segmentationSolution.classList.add('active') segmentationChallengeTimeline.play() segmentationSolutionTimeline.play() }