github.com/outbrain/consul@v1.4.5/website/source/assets/javascripts/animations.js

document.addEventListener('turbolinks:load', initializeAnimations)

function initializeAnimations() {
  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()
  }
}