diff --git a/website/source/assets/images/consul-connect/svgs/configuration-solution.svg b/website/source/assets/images/consul-connect/svgs/configuration-solution.svg index 03a8bac40..c85e72277 100644 --- a/website/source/assets/images/consul-connect/svgs/configuration-solution.svg +++ b/website/source/assets/images/consul-connect/svgs/configuration-solution.svg @@ -10,8 +10,8 @@ Service Configuration_Solution_dev - - + + @@ -37,93 +37,93 @@ - - - - - - - - - + + + + + + + + + - - + + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - - - - - - - - - + + + + + + + + + - + @@ -138,9 +138,9 @@ - - - + + + diff --git a/website/source/assets/javascripts/animations.js b/website/source/assets/javascripts/animations.js index f33c6501e..36631785c 100644 --- a/website/source/assets/javascripts/animations.js +++ b/website/source/assets/javascripts/animations.js @@ -1,11 +1,15 @@ +var qs = document.querySelector.bind(document) +var qsa = document.querySelectorAll.bind(document) + // // configuration challenge animation // -var qs = document.querySelector.bind(document) -var t = new TimelineLite({ +var configChallengeTimeline = new TimelineLite({ onComplete: function() { - this.restart() + $configChallenge.classList.remove('active') + $configSolution.classList.add('active') + configSolutionTimeline.restart() } }) @@ -28,7 +32,8 @@ var box8 = qs('#c-box-8') var progressBar = qs('#c-loading-bar > rect:last-child') var cog = qs('#c-configuration-server > g > path') -t +configChallengeTimeline + .to(box1, 1, {}) .staggerTo( [line1, line2, line3, line4, line5, line6, line7, line8], 1.5, @@ -63,4 +68,50 @@ t { opacity: 0.5 }, 'reset' ) - .to(line1, 2, {}) + .to(line1, 1, {}) + .pause() + +// +// configuration solution animation +// + +var configSolutionTimeline = new TimelineLite({ + onComplete: function() { + $configSolution.classList.remove('active') + $configChallenge.classList.add('active') + configChallengeTimeline.restart() + } +}) + +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') + .to(progress, 1, { width: 40 }, 'start') + .to(dots, 0.25, { opacity: 1 }, '-=0.5') + .to(progress, 1, {}) + .to(lines, 1, { opacity: 0 }, 'reset') + .to(boxes, 1, { opacity: 0.5 }, 'reset') + .to(progress, 1, { opacity: 0 }, 'reset') + .to(dots, 1, { opacity: 0 }, 'reset') + .to(progress, 1, {}) + .pause() + +// +// configuration page +// + +var $configChallenge = qs('#configuration-challenge-animation') +var $configSolution = qs('#configuration-solution-animation') + +$configChallenge.classList.add('active') +configChallengeTimeline.play() diff --git a/website/source/assets/stylesheets/consul-connect/_animations.scss b/website/source/assets/stylesheets/consul-connect/_animations.scss index a620d2b93..1e12ce5d1 100644 --- a/website/source/assets/stylesheets/consul-connect/_animations.scss +++ b/website/source/assets/stylesheets/consul-connect/_animations.scss @@ -1,3 +1,14 @@ +.g-animation-block { + width: 70%; + margin: 0 auto; + opacity: 0.4; + transition: all 0.5s ease; + + &.active { + opacity: 1; + } +} + #configuration-challenge-animation { & #c-line-8, & #c-line-7, @@ -26,3 +37,33 @@ width: 0; } } + +#configuration-solution-animation { + & #s-line-1, + & #s-line-2, + & #s-line-3, + & #s-line-4, + & #s-line-5, + & #s-line-6, + & #s-line-7, + & #s-line-8 { + stroke-dasharray: 58; + stroke-dashoffset: 58; + } + & #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 { + opacity: 0.5; + } + & #s-progress-indicator { + width: 0; + } + & #s-dots { + opacity: 0; + } +} diff --git a/website/source/configuration.html.erb b/website/source/configuration.html.erb index e21a94c23..e53163417 100644 --- a/website/source/configuration.html.erb +++ b/website/source/configuration.html.erb @@ -34,7 +34,7 @@ description: |-

The Challenge

Runtime configuration management loses performace at scale. -
+
<%= inline_svg 'consul-connect/svgs/configuration-challenge.svg' %>

Services have many runtime configurations, such as feature flags or maintenance modes, that need to be propagated in real time. Distributing these updates using configuration management or by re-deploying services can take minutes to hours. During these rollout periods, infrastructure can be out of sync and service configurations could be incorrect.

@@ -43,7 +43,7 @@ description: |-

The Solution

Real-time runtime configuration for distributed applications. -
+
<%= inline_svg 'consul-connect/svgs/configuration-solution.svg' %>

Consul can update service configurations across thousands of services in a globally distributed fleet in real time. Configuration can be stored in a hierarchical key/value store, and efficient edge triggers allow changes to be pushed to applications quickly.