Bubbles Transition Page

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut vitae tortor quam. Sed vel diam sit amet eros placerat varius vel vel magna. Vestibulum ac purus nec leo maximus consectetur. Nunc aliquam lectus eget nisi convallis iaculis. Vivamus et porttitor tellus, ac faucibus eros. Nunc hendrerit suscipit arcu ac egestas. Aenean malesuada tincidunt sem, non facilisis mauris faucibus quis. Quisque vel pellentesque turpis, imperdiet feugiat eros. Maecenas eget mi ut lacus posuere condimentum.
Html
<div class="bubble-content">
    <div class="bubble-wrapper" id="bubble-wrapper">
        <div class="bublle-item" data-bubble>
            <span class="bubble bubble bubble__xs b2"></span>
            <span class="bubble bubble  bubble__lg b1"></span>
            <span class="bubble bubble  bubble__sm b1"></span>
            <span class="bubble bubble bubble__sm b4"></span>
        </div>
        <div class="bublle-item" data-bubble>
            <span class="bubble bubble bubble__md b1"></span>
            <span class="bubble bubble bubble__sm b3"></span>
            <span class="bubble bubble bubble__sm b5"></span>
            <span class="bubble bubble bubble__xs b3"></span>
        </div>
        <div class="bublle-item" data-bubble>
            <span class="bubble bubble bubble__lg b2"></span>
            <span class="bubble bubble bubble__sm b6"></span>
            <span class="bubble bubble bubble__xs b1"></span>
        </div>
        <div class="bublle-item" data-bubble>
            <span class="bubble bubble bubble__xl b1"></span>
            <span class="bubble bubble bubble__lg b3"></span>
            <span class="bubble bubble bubble__md b2"></span>
            <span class="bubble bubble bubble__sm b2"></span>
            <span class="bubble bubble bubble__xs b4"></span>
        </div>

        <div class="bublle-item" data-bubble>
            <span class="bubble bubble bubble__xs b2"></span>
            <span class="bubble bubble bubble__lg b1"></span>
            <span class="bubble bubble bubble__sm b1"></span>
            <span class="bubble bubble bubble__sm b4"></span>
        </div>
        <div class="bublle-item" data-bubble>
            <span class="bubble bubble bubble__md b1"></span>
            <span class="bubble bubble bubble__sm b3"></span>
            <span class="bubble bubble bubble__sm b5"></span>
            <span class="bubble bubble bubble__xs b3"></span>
        </div>
        <div class="bublle-item" data-bubble>
            <span class="bubble bubble bubble__lg b2"></span>
            <span class="bubble bubble bubble__sm b6"></span>
            <span class="bubble bubble bubble__xs b1"></span>
        </div>
        <div class="bublle-item" data-bubble>
            <span class="bubble bubble bubble__xl b1"></span>
            <span class="bubble bubble bubble__lg b3"></span>
            <span class="bubble bubble bubble__md b2"></span>
            <span class="bubble bubble bubble__sm b2"></span>
            <span class="bubble bubble bubble__xs b4"></span>
        </div>
    </div>
</div>

Scss		
//---------- Mixin for bubble opacity color ----------//
@mixin bubbles-colors($bubbles-bg-main, $bubbles-bg-alternative) {
	.big {
		background: $bubbles-bg-main;
	}

	.small {
		background: rgba($bubbles-bg-alternative, 0.9);
	}
}

.bubbles {
	position: absolute;
	top: 165px;
	right: 0;
	width: 340px;
	height: 320px;
	overflow: hidden;

	.big, .small {
		position: absolute;
		border-radius: 50%;
		top: 10px;
		width: 300px;
		height: 290px;
	}

	.big {
		right: 0px;
		transform: translateX(30px);

		.bubbles__content {
			top: 53%;
			left: 56%;
			width: 70%;
		}
	}

	.small {
		top: 0;
		left: 0;
		width: 142px;
		height: 138px;
	}

	
}




// Background bubbles
#bubble-container-0, #bubble-container-1, #bubble-container-2, #bubble-container-3 {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	right: 0;
}

#bubble-container-4, #bubble-container-5, #bubble-container-6, #bubble-container-7 {
	position: absolute;
	top: 550px;
	left: 0;
	width: 100%;
	right: 0;
}

.bubble {
	position: absolute;
	border-radius: 50%;
	background-color: rgba($color-blue-tory, .1);
	opacity: 0.7;
	z-index: 0;

	&--white {
		background-color: rgba($color-white, .1)
	}
}

.midnight-green {
	.bubble {
		opacity: 0.2;
	}
}

@mixin bubble-place($left,$top) {
	top: $top;
	left: $left;
}

.bubble__xs {
	width: 5px;
	height: 5px;

	&.b1 {
		@include bubble-place(75%, 100px);
	}

	&.b2 {
		@include bubble-place(59%, 290px);
	}

	&.b3 {
		@include bubble-place(41%, 460px);
	}

	&.b4 {
		@include bubble-place(84%, 520px);
	}
}

.bubble__sm {
	width: 10px;
	height: 10px;

	&.b1 {
		@include bubble-place(70%, 180px);
	}

	&.b2 {
		@include bubble-place(47%, 520px);
	}

	&.b3 {
		@include bubble-place(40%, 280px);
	}

	&.b4 {
		@include bubble-place(99%, 470px);
	}

	&.b5 {
		@include bubble-place(10%, 350px);
	}

	&.b6 {
		@include bubble-place(60%, 490px);
	}
}

.bubble__md {
	width: 15px;
	height: 15px;

	&.b1 {
		@include bubble-place(47%, 150px);
	}

	&.b2 {
		@include bubble-place(70%, 360px);
	}
}

.bubble__lg {
	width: 20px;
	height: 20px;

	&.b1 {
		@include bubble-place(34%, 50px);
	}

	&.b2 {
		@include bubble-place(50%, 360px);
	}

	&.b3 {
		@include bubble-place(27%, 390px);
	}

	&.b4 {
		@include bubble-place(99%, 470px);
	}
}

.bubble__xl {
	width: 25px;
	height: 25px;

	&.b1 {
		@include bubble-place(27%, 160px);
	}
}

.bubble-wrapper {

	div {
		position: absolute;
		left: 0;
		width: 100%;
	}
}

Javascript		
 export class BubblesModule {
	constructor() {
        this.initBubles('[data-bubble]', '.bubble-content', 30, 5);
    }

    private initBubles = (bubbles, wrapperParentElement, max, min) => {
        let bubbleDiv: NodeListOf<HTMLElement> = document.querySelectorAll(bubbles);

        let wrapperParent: HTMLElement = document.querySelector(wrapperParentElement);
        let elemCount = bubbleDiv.length;
        let randomElemArray = [];
        let secondBubbleSection = wrapperParent.offsetHeight / 1.2;
        let randomSpeed = function () {
            var randomWholeNumer = Math.floor((Math.random() * 8) + 1);
            var randomDecimalNumber = randomWholeNumer / 10;
            return randomDecimalNumber;
        };
    
    
        let randomLeftPos = function () {
            var randomLeftPosValue = Math.floor(Math.random() * 100);
            return randomLeftPosValue;
        };
    
        let sizeGenerator = function () {
            let minBubbleSize = max;
            let maxBubbleSize = min;
            let size = Math.floor(Math.random() * minBubbleSize) + maxBubbleSize;
            return size;
        };
    
        let randomTopPos = function () {
            var randomTopPosPosValue = Math.floor(Math.random() * wrapperParent.offsetHeight);
            return randomTopPosPosValue;
        };
    
        for (let i = 0; i < elemCount; i++) {
            randomElemArray.push(randomSpeed());
        }

        for (let i = 0; i < bubbleDiv.length; i++) {
            let bubbleChildren = bubbleDiv[i].children;

            for (let i = 0; i < bubbleChildren.length; i++) {
                let bubbleSize = sizeGenerator();

                let elem: HTMLElement = <HTMLElement>bubbleChildren[i];
                elem.style.top = randomTopPos() + 'px';
                elem.style.left = randomLeftPos() + '%';
                elem.style.width = bubbleSize + 'px';
                elem.style.height = bubbleSize + 'px';
            }

            if (i >= (elemCount / 2)) {
                bubbleDiv[i].style.top = secondBubbleSection + 'px';
            } else {
                bubbleDiv[i].style.top = 0 + 'px';
            }
        }

        window.addEventListener("scroll", (e) => {

            let scrolled = window.scrollY;

            var scollBottom = scrolled + window.innerHeight;
            var footerTop = wrapperParent.offsetTop;
            var topCalc = scollBottom - footerTop;

            

            if (scollBottom > footerTop) {
                for (let i = 0; i < bubbleDiv.length; i++) {
                    if (i >= (elemCount / 2)) {
                        bubbleDiv[i].style.top = secondBubbleSection - (topCalc * randomElemArray[i]) + 'px';
                    } else {
                        bubbleDiv[i].style.top = 0 - (topCalc * randomElemArray[i]) + 'px';
                    }
                }
            }
         });
    }
}