Каждый раздел должен иметь различную форму и непрозрачность GreenSock

Question

Как вы можете видеть в оранжевом разделе есть анимированные линии с точками (this.draw = function())пока мой ожидаемый результат в зеленой части должен быть нормальными прямоугольниками (this.draw2 = function()) вместо линий с точками. Анимация в зеленой части должна иметь две разные непрозрачности, поэтому кажется, что есть два разных слоя анимированного фона.

Короче говоря:

Зеленая часть (#about-animation) следует только позвонить this.draw2 = function(), которые являются прямоугольниками и, кроме того, есть две разные непрозрачности случайным образом, например, непрозрачность 0,5 и 0,8.

Как я должен это исправить.

Ссылка на рабочий Codepen

(function() {
    'use strict';

    class Lines {
        constructor(ctx, x, y, dx, dy, radius, delay, width, fillStyle="#f9a810", border = "#EE0", autoAnimate=true) {
          this.x = Math.random() * 1100,
          this.y = Math.random() * 500,
          this.dx = dx,
          this.dy = dy,
          this.width = width,
          this.delay = delay,
          this.radius = radius,
          this.color = fillStyle,
          this.fill = fillStyle,
          this.fillStyle = fillStyle,
          this.border = border,
          this.canvas = ctx;
          this.draw1 = function () {

            this.canvas.beginPath();
            this.canvas.rect(this.x, this.y, this.dx, this.dy, this.width);

            this.canvas.rect(this.x, this.y - 20, this.width, 3, Math.PI * 2, true);
            this.canvas.rect(this.x, this.y - 30, this.width, 3, Math.PI * 2, true);
            this.canvas.rect(this.x, this.y - 40, this.width, 3, Math.PI * 2, true);

            this.canvas.rect(this.x, this.y + 110, this.width, 3, Math.PI * 2, true);
            this.canvas.rect(this.x, this.y + 120, this.width, 3, Math.PI * 2, true);
            this.canvas.rect(this.x, this.y + 130, this.width, 3, Math.PI * 2, true);

            this.fill = this.color,
            this.fillStyle = fillStyle,
            this.canvas.strokeStyle = this.border;
            this.canvas.lineWidth = 2;
            this.canvas.fillStyle = this.fillStyle;
            this.canvas.fill();
            this.canvas.stroke();
            // console.log('drawing')
          }
          this.draw2 = function () {
            this.canvas.beginPath();
            this.canvas.rect(this.x, this.y, 30, 30, this.width);

            this.canvas.rect(this.x, this.y - 20, this.width, 3, Math.PI * 2, true);
              this.fill = this.color,
              this.fillStyle = fillStyle,
              this.canvas.strokeStyle = this.border;
              this.canvas.lineWidth = 3;
              this.canvas.fillStyle = this.fillStyle;
              this.canvas.fill();
              this.canvas.stroke();
          }
          this.animate = function () {
            TweenMax.to(this, 1, {
              delay : this.delay,
              fillStyleOpacity: 0.5,
              x: "+=0",
              y: "+=500",
              repeat: -1,
              ease:Sine.easeInOut,
            });
          }

          this.update = function () {
                this.draw1();
                // this.draw2();  <--- this one should be animation in the green section instead of lines with dots

            // this.draw2()
          }
          if(autoAnimate) this.animate();
        }
      }

      class LineAnimation {
        constructor(elName) {
            console.log('do init');
            this.canvas = this.createCanvas(elName).canvas;
            this.ctx    = this.createCanvas(elName).context;
            this.circleArray = [];
            const maxCols   = 1;
            const maxItems  = 10;
            for(let c= 0;c < maxCols; c++) {
                this.circleArray[c]=[];
                for(let i=1;i<maxItems; i++) {
                let scale = i * 1.2;
                let delay = (0.15) + ((i+c) * 0.15);
                this.circleArray[c].push(new Lines(this.ctx, 20, 20, 2, 100, scale,  delay, 1, "rgba(255,255,255,1)"));
                console.log('hello');
            }
        }
        this.animateLoop = this.loop.bind(this);
        }
        createCanvas(elName) {
          const obj = $(elName);
          obj.attr('width',$(window).width());
          obj.attr('height', $(window).height());
          this.width    = $(obj).width();
          this.height   = $(obj).height();
          return {
            canvas: $(obj)[0],
            context: $(obj)[0].getContext("2d")
          };
          // this.canvas   = $(obj)[0];
          // this.context  = this.canvas.getContext("2d");
        }
        loop() {
          //   console.log(this, 'this');
            this.ctx.clearRect(0, 0, this.width, this.height);
            $.each(this.circleArray, function( ind, col ){
            $.each( col, function( index, value ){
                value.update();
            });
        });
        }
      }

      $(document).ready( function(){
        console.log('init');
        // function checkWidth() {
        //  var windowsize = $(window).width();
        //  if(windowsize > 991) {
                const introAnimation = new LineAnimation("#intro-animation");
                const aboutAnimation = new LineAnimation("#about-animation");

                TweenMax.ticker.addEventListener("tick", introAnimation.animateLoop);
                TweenMax.ticker.addEventListener("tick", aboutAnimation.animateLoop);
        //  } else {
        //      return;
        //  }
        // }
        //  checkWidth();
        //      $(window).resize(checkWidth);
            });

    })();

Действительно важно не использовать CSS для этого из-за проблем с производительностью. Только Canvas позволяет.