Animated Scroll Line

Hello! Does anyone have thoughts on animating a vertical line like in this sample?

- Hannah

You can use a css animation to do this. you create a div element that is set to the size and initial background you want, then you add in a pseudo-element inside that moves from out-of-view at the top to the middle and then move it out-of-view below

Add a code block and put this in. there's no javascript so doesn't require premium/business

<div class="animated-line"></div>

<style>
  
.animated-line {
  margin:0 auto;
  width:5px;
  height:300px;
  overflow:hidden;
  background:#999;
  position:relative;
}

.animated-line::before {
  content:'';
  display:block;
  width:5px;
  height:300px;
  background:black;
  position:absolute;
  top:-100%;
  left:0;
  animation: animate 5s ease-in-out infinite;
}

@keyframes animate {
  0% { top: -100%; }
  50% { top: 0; }
  100% { top: 100%; }
}
  
</style>

if you want to edit some of the animation properties then you should probably look at the css animation properties  for the "animation" property (e.g. 5s is the duration change it to 2s for faster) and edit the keyframe positions

see here for the properties CSS Animations (w3schools.com)

@iamdavehart Perfection - thank you!