ASP Longform Animation

animations-example.css

#satellite .longform-section-overlay.aos-animate + .section-content svg#Layer path {
  stroke-dasharray: 1000;
  stroke-dashoffset: 1000;
  animation: dash 5s linear forwards 1;
}

@keyframes dash {
  from {
    stroke-dashoffset: 1000;
  }
  to {
    stroke-dashoffset: 0;
  }
}

transitions-example.css

:root {
  --orange: #d66e42;
}

.style-svg.world-map g path {
  transition: all .8s ease-in-out;
}
.aos-init + .section-content .style-svg.world-map g#White_Fill path {
  fill: transparent;
  transition-delay: .5s;
}
.aos-animate + .section-content .style-svg.world-map g#White_Fill path {
  fill: white;
}
.aos-init + .section-content .style-svg.world-map g#Orange_Fill path {
  fill: transparent;
  transition-delay: 1.25s;
  stroke: white;
}
.aos-animate + .section-content .style-svg.world-map g#Orange_Fill path {
  fill: var(--orange);
  stroke: var(--orange);
}