consul/website/source/assets/stylesheets/consul-connect/_animations.scss

.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,
  & #c-line-6,
  & #c-line-5,
  & #c-line-4,
  & #c-line-3,
  & #c-line-2,
  & #c-line-1 {
    stroke-dasharray: 64;
    stroke-dashoffset: 64;
  }

  & #c-box-1,
  & #c-box-2,
  & #c-box-3,
  & #c-box-4,
  & #c-box-5,
  & #c-box-6,
  & #c-box-7,
  & #c-box-8 {
    opacity: 0.5;
  }
}

#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-dots {
    opacity: 0;
  }
}

#discovery-challenge-animation {
  & #c-box-left-placement {
    opacity: 0;
  }

  & #c-broken-link-left {
    opacity: 0;
  }

  & #c-broken-link-right {
    opacity: 0;
  }

  & #c-computer {
    opacity: 0.12;
  }

  & #c-computer-to-load-balancers #c-arrow-down {
    opacity: 0;
  }

  & #c-computer-to-load-balancers #c-arrow-right {
    opacity: 0;
  }

  & #c-computer-to-load-balancers #c-arrow-left {
    opacity: 0;
  }

  & #c-computer-to-load-balancers #c-circle {
    opacity: 0;
  }

  & #c-computer-to-load-balancers #c-edit-box {
    opacity: 0;
  }

  & #c-load-balancer-left > #c-progress-bar,
  & #c-load-balancer-right > #c-progress-bar-2,
  & #c-load-balancer-middle > #c-progress-bar-3 {
    opacity: 0;
  }

  & #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 {
    width: 0;
  }

  & #c-line-horizontal-right {
    stroke-dasharray: 65;
    stroke-dashoffset: 65;
  }

  & #c-line-horizontal-right > line {
    stroke: #000;
  }

  & #c-line-top-right {
    stroke-dasharray: 17;
    stroke-dashoffset: 17;
  }

  & #c-line-bottom-right {
    stroke-dasharray: 80;
    stroke-dashoffset: 80;
  }

  & #c-line-top-left {
    stroke-dasharray: 17;
    stroke-dashoffset: 0;
  }

  & #line-bottom-left {
    stroke-dasharray: 56;
    stroke-dashoffset: 0;
  }

  & #c-line-top-left > * {
    stroke: #3969ed;
  }
  & #c-line-bottom-left > * {
    stroke: #3969ed;
  }
  & #c-line-bottom-right > * {
    stroke: #000;
  }
  & #c-box-far-left > path {
    fill: #3969ed;
  }
}

#discovery-solution-animation {
  & #s-active-service-3 {
    display: none;
  }
  & #s-connected-line-2 {
    stroke-dasharray: 270;
    stroke-dashoffset: 270;
  }
  & #s-connected-line-1 {
    stroke-dasharray: 222;
  }
  & #s-dotted-line-left {
    opacity: 0;
  }
  & #s-dotted-lines-right {
    opacity: 0;
  }
  & #s-dotted-lines-right > path:last-child {
    opacity: 0;
  }
  & #s-dynamic-sync-right {
    opacity: 0;
  }
  & #s-dynamic-sync-left {
    opacity: 0;
  }
  & #s-dynamic-sync-left > path {
    transform-origin: 88px 127px;
  }
  & #s-dotted-service-box-2 {
    opacity: 0;
  }
}

#segmentation-challenge-animation {
  & #c-firewall-updates #c-update_path {
    opacity: 0;
  }
  & #c-firewall-updates #c-edit {
    opacity: 0;
  }
  & #c-computer {
    opacity: 0;
  }
  & #c-progress-indicator,
  & #c-progress-indicator-2,
  & #c-progress-indicator-3 {
    opacity: 0;
  }
  & #c-broken-link-1,
  & #c-broken-link-2,
  & #c-broken-link-3 {
    opacity: 0;
  }
  & #c-box-2,
  & #c-box-4,
  & #c-box-6 {
    opacity: 0;
  }

  & #c-path-1 > *:nth-child(1) {
    stroke-dasharray: 50;
    stroke-dashoffset: 50;
  }
  & #c-path-1 > *:nth-child(2) {
    stroke-dasharray: 94;
    stroke-dashoffset: 94;
  }
  & #c-path-1 > *:nth-child(3) {
    stroke-dasharray: 102;
    stroke-dashoffset: 102;
  }
  & #c-path-2 > *:nth-child(1) {
    stroke-dasharray: 50;
    stroke-dashoffset: 50;
  }
  & #c-path-2 > *:nth-child(2) {
    stroke-dasharray: 32;
    stroke-dashoffset: 32;
  }
  & #c-path-2 > *:nth-child(3) {
    stroke-dasharray: 32;
    stroke-dashoffset: 32;
  }
  & #c-path-2 > *:nth-child(3) {
    stroke-dasharray: 148;
    stroke-dashoffset: 148;
  }
  & #c-path-3 > *:nth-child(1) {
    stroke-dasharray: 32;
    stroke-dashoffset: 32;
  }
  & #c-path-3 > *:nth-child(2) {
    stroke-dasharray: 54;
    stroke-dashoffset: 54;
  }
  & #c-path-3 > *:nth-child(3) {
    stroke-dasharray: 126;
    stroke-dashoffset: 126;
  }
}

#segmentation-solution-animation {
  #s-service-2 {
    opacity: 0;
  }
  #s-service-4 {
    opacity: 0;
  }
  #s-service-6 {
    opacity: 0;
  }
  #s-service-2 > path {
    fill: #000;
  }
  #s-service-4 > path {
    fill: #000;
  }
  #s-service-6 > path {
    fill: #000;
  }
  #s-secure-indicator-2 {
    opacity: 0;
  }
  #s-secure-indicator-4 {
    opacity: 0;
  }
  #s-secure-indicator-6 {
    opacity: 0;
  }
  #s-connection-path-6 {
    stroke-dasharray: 161;
    stroke-dashoffset: 161;
  }
  #s-connection-path-5 {
    stroke-dasharray: 73;
    stroke-dashoffset: 73;
  }
  #s-connection-path-4 {
    stroke-dasharray: 115;
    stroke-dashoffset: 115;
  }
  #s-connection-path-1 {
    stroke-dasharray: 16;
    stroke-dashoffset: 16;
  }
  #s-connection-path-2 {
    stroke-dasharray: 16;
    stroke-dashoffset: 16;
  }
  #s-connection-path-8 {
    stroke-dasharray: 73;
    stroke-dashoffset: 73;
  }
  #s-connection-path-10 {
    stroke-dasharray: 64;
    stroke-dashoffset: 64;
  }
  #s-connection-path-9 {
    stroke-dasharray: 16;
    stroke-dashoffset: 16;
  }
  #s-consul-inbound-paths-lower,
  #s-dynamic-update-inbound-lower {
    opacity: 0;
  }
  #s-consul-inbound-paths-upper,
  #s-dynamic-update-inbound-upper {
    opacity: 0;
  }
  #s-consul-server-connection-lower,
  #s-consul-outbound-5,
  #s-consul-outbound-6,
  #s-consul-outbound-7 {
    opacity: 0;
  }
  #s-tls-cert-lower,
  #s-dynamic-update-outbound-ower {
    opacity: 0;
  }

  #s-consul-server-connection-upper,
  #s-consul-outbound-1,
  #s-soncul-outbound-2,
  #s-consul-outbound-3,
  #s-consul-outbound-4 {
    opacity: 0;
  }
  #s-tls-cert-upper,
  #s-dynamic-update-outbound-upper {
    opacity: 0;
  }
}

#index-dynamic-animation {
  /* service boxes */
  & #aws-box {
    opacity: 0;
    transform: translateX(57px) translateY(164px);
    transition: all 0.5s ease;
    transition-delay: 2s;
  }

  &.active #aws-box {
    opacity: 1;
    transform: translateX(97px) translateY(144px);
  }

  & #gcp-box {
    opacity: 0;
    transform: translateX(-28px) translateY(106px);
    transition: all 0.5s ease;
    transition-delay: 1.5s;
  }

  &.active #gcp-box {
    opacity: 1;
    transform: translateX(0) translateY(92px);
  }

  & #azure-box {
    opacity: 0;
    transform: translateX(293px) translateY(116px);
    transition: all 0.5s ease;
    transition-delay: 2.5s;
  }

  &.active #azure-box {
    opacity: 1;
    transform: translateX(263px) translateY(96px);
  }

  /* connection lines */

  & #lines-origin-gcp > *:nth-child(1),
  & #dynamic #lines-origin-gcp > *:nth-child(1).off {
    stroke-dasharray: 64;
    stroke-dashoffset: -64;
  }

  &.active #lines-origin-gcp > *:nth-child(1) {
    stroke-dashoffset: 0;
    transition: all 0.7s ease;
    transition-delay: 1.9s;
  }

  & #lines-origin-gcp > *:nth-child(2),
  & #dynamic #lines-origin-gcp > *:nth-child(2).off {
    stroke-dasharray: 106;
    stroke-dashoffset: 106;
  }

  &.active #lines-origin-gcp > *:nth-child(2) {
    stroke-dashoffset: 0;
    transition: all 0.7s ease;
    transition-delay: 2s;
  }

  & #lines-origin-aws > *:nth-child(1),
  & #dynamic #lines-origin-aws > *:nth-child(1).off {
    stroke-dasharray: 64;
    stroke-dashoffset: 64;
  }

  &.active #lines-origin-aws > *:nth-child(1) {
    stroke-dashoffset: 0;
    transition: all 0.7s ease;
    transition-delay: 2.5s;
  }

  & #lines-origin-aws > *:nth-child(2),
  & #dynamic #lines-origin-aws > *:nth-child(2).off {
    stroke-dasharray: 202;
    stroke-dashoffset: 202;
  }

  &.active #lines-origin-aws > *:nth-child(2) {
    stroke-dashoffset: 0;
    transition: all 0.7s ease;
    transition-delay: 2.6s;
  }

  & #lines-origin-aws > *:nth-child(3),
  & #dynamic #lines-origin-aws > *:nth-child(3).off {
    stroke-dasharray: 111;
    stroke-dashoffset: 111;
  }

  &.active #lines-origin-aws > *:nth-child(3) {
    stroke-dashoffset: 0;
    transition: all 0.7s ease;
    transition-delay: 2.7s;
  }

  & #lines-origin-aws > *:nth-child(4),
  & #dynamic #lines-origin-aws > *:nth-child(4).off {
    stroke-dasharray: 64;
    stroke-dashoffset: 64;
  }

  &.active #lines-origin-aws > *:nth-child(4) {
    stroke-dashoffset: 0;
    transition: all 0.7s ease;
    transition-delay: 2.8s;
  }

  & #lines-origin-aws > *:nth-child(5),
  & #dynamic #lines-origin-aws > *:nth-child(5).off {
    stroke-dasharray: 158;
    stroke-dashoffset: 158;
  }

  &.active #lines-origin-aws > *:nth-child(5) {
    stroke-dashoffset: 0;
    transition: all 0.7s ease;
    transition-delay: 2.9s;
  }

  & #lines-origin-azure > *:nth-child(1),
  & #dynamic #lines-origin-azure > *:nth-child(1).off {
    stroke-dasharray: 64;
    stroke-dashoffset: 64;
  }

  &.active #lines-origin-azure > *:nth-child(1) {
    stroke-dashoffset: 0;
    transition: all 0.7s ease;
    transition-delay: 3.2s;
  }

  & #lines-origin-azure > *:nth-child(2),
  & #dynamic #lines-origin-azure > *:nth-child(2).off {
    stroke-dasharray: 64;
    stroke-dashoffset: 64;
  }

  &.active #lines-origin-azure > *:nth-child(2) {
    stroke-dashoffset: 0;
    transition: all 0.7s ease;
    transition-delay: 3.3s;
  }

  #lines-origin-azure > *:nth-child(3),
  & #dynamic #lines-origin-azure > *:nth-child(3).off {
    stroke-dasharray: 108;
    stroke-dashoffset: 108;
  }

  &.active #lines-origin-azure > *:nth-child(3) {
    stroke-dashoffset: 0;
    transition: all 0.7s ease;
    transition-delay: 3.4s;
  }

  & #lines-origin-azure > *:nth-child(4),
  & #dynamic #lines-origin-azure > *:nth-child(4).off {
    stroke-dasharray: 108;
    stroke-dashoffset: 108;
  }

  &.active #lines-origin-azure > *:nth-child(4) {
    stroke-dashoffset: 0;
    transition: all 0.7s ease;
    transition-delay: 3.5s;
  }

  /* main block boxes */
  & #main-box #boxes > *:nth-child(1) {
    opacity: 0;
    transform: translateX(0px) translateY(28px);
    transition: all 0.5s ease;
  }

  &.active #main-box #boxes > *:nth-child(1) {
    opacity: 1;
    transform: translateX(0px) translateY(48px);
  }

  & #main-box #box-shadows > *:nth-child(1) {
    opacity: 0;
    transition: all 0.7s ease;
  }

  &.active #main-box #box-shadows > *:nth-child(1) {
    opacity: 1;
  }

  & #main-box #boxes > *:nth-child(2) {
    opacity: 0;
    transform: translateX(41px) translateY(52px);
    transition: all 0.5s ease;
    transition-delay: 0.1s;
  }

  &.active #main-box #boxes > *:nth-child(2) {
    opacity: 1;
    transform: translateX(41px) translateY(72px);
    transition-delay: 0.1s;
  }

  & #main-box #box-shadows > *:nth-child(2) {
    opacity: 0;
    transition: all 0.7s ease;
  }

  &.active #main-box #box-shadows > *:nth-child(2) {
    opacity: 1;
  }

  & #main-box #boxes > *:nth-child(3) {
    opacity: 0;
    transform: translateX(83px) translateY(76px);
    transition: all 0.5s ease;
    transition-delay: 0.2s;
  }

  &.active #main-box #boxes > *:nth-child(3) {
    opacity: 1;
    transform: translateX(83px) translateY(96px);
  }

  & #main-box #box-shadows > *:nth-child(3) {
    opacity: 0;
    transition: all 0.7s ease;
    transition-delay: 0.2s;
  }

  &.active #main-box #box-shadows > *:nth-child(3) {
    opacity: 1;
  }

  & #main-box #boxes > *:nth-child(4) {
    opacity: 0;
    transform: translateX(41px) translateY(4px);
    transition: all 0.5s ease;
    transition-delay: 0.3s;
  }

  &.active #main-box #boxes > *:nth-child(4) {
    opacity: 1;
    transform: translateX(41px) translateY(24px);
  }

  & #main-box #box-shadows > *:nth-child(4) {
    opacity: 0;
    transition: all 0.7s ease;
    transition-delay: 0.3s;
  }

  &.active #main-box #box-shadows > *:nth-child(4) {
    opacity: 1;
  }

  & #main-box #boxes > *:nth-child(5) {
    opacity: 0;
    transform: translateX(83px) translateY(28px);
    transition: all 0.5s ease;
    transition-delay: 0.4s;
  }

  &.active #main-box #boxes > *:nth-child(5) {
    opacity: 1;
    transform: translateX(83px) translateY(48px);
    transition-delay: 0.4s;
  }

  & #main-box #box-shadows > *:nth-child(5) {
    opacity: 0;
    transition: all 0.7s ease;
    transition-delay: 0.4s;
  }

  &.active #main-box #box-shadows > *:nth-child(5) {
    opacity: 1;
  }

  & #main-box #boxes > *:nth-child(6) {
    opacity: 0;
    transform: translateX(124px) translateY(52px);
    transition: all 0.5s ease;
    transition-delay: 0.5s;
  }

  &.active #main-box #boxes > *:nth-child(6) {
    opacity: 1;
    transform: translateX(124px) translateY(72px);
  }

  & #main-box #box-shadows > *:nth-child(6) {
    opacity: 0;
    transition: all 0.7s ease;
    transition-delay: 0.5s;
  }

  &.active #main-box #box-shadows > *:nth-child(6) {
    opacity: 1;
  }

  & #main-box #boxes > *:nth-child(7) {
    opacity: 0;
    transform: translateX(83px) translateY(-20px);
    transition: all 0.5s ease;
    transition-delay: 0.6s;
  }

  &.active #main-box #boxes > *:nth-child(7) {
    opacity: 1;
    transform: translateX(83px) translateY(0px);
  }

  & #main-box #box-shadows > *:nth-child(7) {
    opacity: 0;
    transition: all 0.7s ease;
    transition-delay: 0.6s;
  }

  &.active #main-box #box-shadows > *:nth-child(7) {
    opacity: 1;
  }

  & #main-box #boxes > *:nth-child(8) {
    opacity: 0;
    transform: translateX(124px) translateY(4px);
    transition: all 0.5s ease;
    transition-delay: 0.7s;
  }

  &.active #main-box #boxes > *:nth-child(8) {
    opacity: 1;
    transform: translateX(124px) translateY(24px);
  }

  & #main-box #box-shadows > *:nth-child(8) {
    opacity: 0;
    transition: all 0.7s ease;
    transition-delay: 0.7s;
  }

  &.active #main-box #box-shadows > *:nth-child(8) {
    opacity: 1;
  }

  & #main-box #boxes > *:nth-child(9) {
    opacity: 0;
    transform: translateX(166px) translateY(28px);
    transition: all 0.5s ease;
    transition-delay: 0.8s;
  }

  &.active #main-box #boxes > *:nth-child(9) {
    opacity: 1;
    transform: translateX(166px) translateY(48px);
  }

  & #main-box #box-shadows > *:nth-child(9) {
    opacity: 0;
    transition: all 0.7s ease;
    transition-delay: 0.8s;
  }

  &.active #main-box #box-shadows > *:nth-child(9) {
    opacity: 1;
  }

  & #lines-inter-main {
    opacity: 0;
  }

  &.active #lines-inter-main {
    opacity: 1;
    transition: all 0.7s ease;
    transition-delay: 0.8s;
  }

  & #main-box #base {
    opacity: 0;
    transition: all 0.5s ease;
  }

  &.active #main-box #base {
    opacity: 1;
  }
}