Join dots using lines in a CSS animation

Question

I have this animation working with CSS, they're simple dots moving up and down:

$dot-list: 1 2 3 4 5;

.dot-animation {
    display: block;
    span {
        display: inline-block;
        margin-top: 10px;
        height: 20px;
        width: 20px;
        border-radius: 50%;
        &:not(:first-child) { margin-left: 30px; }
    }
    @each $current-dot in $dot-list {
        $i: index($dot-list, $current-dot);
        $t: $i * -0.787;
        span:nth-child(#{$i}) {
            background: white;
            border: 5px solid #48c0c0;
            animation: move 1s ease-in-out (#{$t}s) infinite alternate;
        }
    }
}

@keyframes move {
    from { transform: translateY(0px); }
    to { transform: translateY(60px); }
}

https://codepen.io/rjchirinos/pen/jKyYBM

I want to join those dots using lines, so every time the dots move, the lines should rotate to maintain the union.

Here's an example of what I want to do: https://neomam.com/interactive/13reasons/

Can you help me to figure out how?

Thanks in advance!

Answer 1

I would consider using skew transformation to make such animation easy.

Here is a simplified example:

.dot-animation {
  display: block;
  padding:50px;
}
.dot-animation span {
  position:relative;
  display: inline-block;
  margin-top: 10px;
  width:50px;
  margin:10px 1px;
  height:5px;
  background:#48c0c0;
}
.dot-animation span:first-child {
  background:#fff;
}
.dot-animation span:before {
  content:"";
  position:absolute;
  z-index:2;
  right:-12px;
  top:-12px;
  height: 20px;
  width: 20px;
  background: white;
  border: 5px solid #48c0c0;
  border-radius: 50%;
}

.dot-animation span:nth-child(even) {
  animation:move-l 1s linear infinite alternate;
  transform-origin:left;
}
.dot-animation span:nth-child(even):before {
  animation:move-r 1s linear infinite alternate;
}
.dot-animation span:nth-child(odd) {
  animation:move-r 1s linear infinite alternate;
  transform-origin:right;
}
.dot-animation span:nth-child(odd):before {
  animation:move-l 1s linear infinite alternate;
  transform-origin:right;
}
 

@keyframes move-l {
  from {
    transform: skewY(0px);
  }
  to {
    transform: skewY(-25deg);
  }
}
@keyframes move-r {
  from {
    transform: skewY(0px);
  }
  to {
    transform: skewY(25deg);
  }
}

<div class="dot-animation">
	<span></span>
	<span></span>
	<span></span>
	<span></span>
	<span></span>
</div>