Configurable Airway Animation With JavaScript

Preview:

Description:

A JavaScript library for creating an airway grid where airplanes fly across the page.

See Also:

• Airplane Contrails Animation In Vanilla JavaScript – contrails.js

How to use it:

1. Create an airway grid on the page.

<div id="airwayGrid"></div>

#airwayGrid {
  width: 100%;
  height: 0px;
  background: url('./assets/airway_grid_8x8.svg') repeat;
  overflow: hidden;
}
.airplaneLine {
  width: calc(100vw / 4);
  height: 6px;
}

2. Load the main JavaScript airway.js in the document.

<script src="airway.js"></script>

3. The main CSS styles for the airplanes & animations.

.airplaneLeft {
  position: relative;
  display: flex;
  align-items: center;
  right: 0;
  transform: rotate(180deg);
  -webkit-animation: ease-in-out infinite;
  -webkit-animation-name: flyLeft;
  -webkit-animation-duration: 13s;
}
.airplaneLeft svg {
  fill: var(--airplane-left-fill-color);
  transform: rotate(180deg);
}
.airplaneLeft .airplaneLine {
  background: linear-gradient(
    270deg,
    var(--airplane-left-fill-color) 0%,
    rgba(163, 57, 227, 0) 100%
  );
  opacity: 0.5;
  margin-right: -15px;
}
@-webkit-keyframes flyLeft {
  0% {
    right: calc(0px - ((100vw / 4) + 30px));
  }
  100% {
    right: 100%;
  }
}

.airplaneRight {
  position: relative;
  display: flex;
  align-items: center;
  -webkit-animation: ease-in-out infinite;
  -webkit-animation-name: flyRight;
  -webkit-animation-duration: 10s;
}
.airplaneRight svg {
  fill: var(--airplane-right-fill-color);
  transform: rotate(180deg);
}
.airplaneRight .airplaneLine {
  background: linear-gradient(
    270deg,
    var(--airplane-right-fill-color) 0%,
    rgba(163, 57, 227, 0) 100%
  );
  opacity: 0.5;
  margin-right: -15px;
}
.airplane svg {
  margin-left: -20px;
}
@-webkit-keyframes flyRight {
  0% {
    left: calc(0px - ((100vw / 4) + 30px));
  }
  100% {
    left: 100%;
  }
}

4. Config the animation.

const defaultConfig = {
  height: 130,
  lazy: true,
  backgroundColor: '',
  resizable: false,
  colorFromLeft: 'blue',
  colorFromRight: 'red',
  log: false,
};