smooth random animation2

Give random values individually to various values

by uto usui

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.20.3/TweenMax.min.js"></script>
<div class="wrap">
  <div class="target"></div>
  <div class="target"></div>
  <div class="target"></div>
  <div class="target"></div>
  <div class="target"></div>
  <div class="target"></div>
  <div class="target"></div>
  <div class="target"></div>
  <div class="target"></div>
  <div class="target"></div>
  <div class="target"></div>
  <div class="target"></div>
  <div class="target"></div>
  <div class="target"></div>
  <div class="target"></div>
  <div class="target"></div>
  <div class="target"></div>
  <div class="target"></div>
  <div class="target"></div>
  <div class="target"></div>
</div>
<h1>smooth random <br>animation</h1>

SCSS

.wrap {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  transform-style: flat;
  perspective: 500px;
  background-color: #282828;
}

.target {
  position: absolute;
  top: 0;
  left: 0;
  width: 100px;
  height: 20px;
  background-color: lightgray;
}

h1 {
  position: relative;
  z-index: 9;
  display: inline-block;
  color: #282828;
  font-weight: bold;
  line-height: 1;
  text-transform: capitalize;
  font-size: 8vw;
  letter-spacing: -.01em;
  background-color: #fafafa;
}

JavaScript

/**
 * minからmaxの値をランダムにかえす
 * @param min {Number}
 * @param max {Number}
 * @returns {Number}
 */
const random = (min, max) => Math.random() * (max - min) + min;


/**
 * 新しい範囲における現在の値を、現在の範囲を元に変換して返す
 * map(a, b, c, d, e)   aを範囲b-cから別の範囲d-eへ変換する
 * @param value {Number}
 * @param fromMin {Number} 変換前の最小
 * @param fromMax {Number} 変換前の最大
 * @param toMin {Number} 変換後の最小
 * @param toMax {Number} 変換後の最大
 */
const map = (value, fromMin, fromMax, toMin, toMax) => {

  let result = 0;

  result = (value <= fromMin)
    ? toMin : (value >= fromMax)
      ? toMax : (() => {

        let ratio = (toMax - toMin) / (fromMax - fromMin);
        return (value - fromMin) * ratio + toMin;

      })();

  return result;

};


class smoothMove {

  /**
   *
   * @param target {Object}
   * @param speed {Number}
   * @param wrapWidth {Number}
   * @param wrapHeight {Number}
   */
  constructor(target, wrapWidth = window.innerWidth, wrapHeight = window.innerHeight) {

    this.target = target;

    // ランダムな角度とスピードの配列
    this.param = [];
    for (let i = 0; i < 10; i++) {

      this.param[i] = {
        angle: random(0, 360),
        speed: random(-3, 3)
      }

    }

    // 中心の座標
    this.center = {
      x: wrapWidth,
      y: wrapHeight / 2
    };

    // 動く範囲を円の半径で表現
    // この倍の値(直径)が移動範囲になる
    this.radius = window.innerHeight / 4;

    return this;

  }

  /**
   * ラジアンに変換する
   * @param angle
   * @returns {number}
   */
  getRadian(angle) {

    return angle * Math.PI / 180;

  }

  /**
   * アニメーションを始める
   */
  play() {

    this.target.each((i, el) => {

      let x = this.center.x * (i / this.target.length);
      let y = this.center.y + Math.sin(this.getRadian(this.param[9].angle + i * (360/this.target.length))) * this.center.y * .3;

      TweenMax.set(el, {
        x: x + Math.sin(this.getRadian(this.param[0].angle)) * this.radius / 4,
        y: y + Math.cos(this.getRadian(this.param[1].angle)) * this.radius / 4,
        scaleX:...