Banner - can't get subheading to remove animation

app.banner.js

app.banner = {
	init: function() {


		if (!document.querySelector("#mainslider")) {
			return;
		}

		var transitionEnd = whichTransitionEvent();

		/*
		 *	=======================================================================
			 + BANNERS
		   	-----------------------------------------------------------------------
		    HOW CAN I MAKE THIS SHORTER or BETTER?
		 *	=======================================================================
		 */
		var banner = document.getElementById("bannerload");

		var bannerTitle = document.querySelector('.banner-text h2');

		var bannerSubTitle = document.querySelector('.banner-text h3');


		var bannerDesc = document.querySelector('.banner-text .desc-text');
		var bannerButton = document.querySelector('.banner-text .button-delay');


		/* +  Banner Title: Calculate Last Span ----------------------  */
		var bannerTitleSpan = document.querySelectorAll(".banner-text h2 span");
		var bannerTitleAnimation = bannerTitleSpan[bannerTitleSpan.length - 1];


		/* + UNSPLITTING LETTERING
		======================================================================*/
		function unsplitting(innerHTML) {
			return innerHTML
				.replace(/<span class="whitespace">(\s)<\/span>/g, '$1')
				.replace(/<span class="char" data-char="\S+" style="--char-index:\d+;">(\S+)<\/span>/g, '$1')
				.replace(
					/<span class="word" data-word="\S+" aria-hidden="true" style="--word-index:\d+;( --line-index:\d+;)?">(\S+)<\/span>/g,
					'$2');
		}




		if (bannerTitle !== null) {
			/* +  Banner Has Finished Transitioning ----------------------  */
			banner.addEventListener(transitionEnd, BannerEnds);
		}



		if (bannerSubTitle !== null) {

			/* +  Banner SubTitle: Calculate Last Span ----------------------  */
			var bannerSubtitleSpan = document.querySelectorAll(".banner-text h3 span");
			var bannerSubtitleAnimation = bannerSubtitleSpan[bannerSubtitleSpan.length - 1];
		}


		function BannerEnds() {
			banner.classList.add("finished-ani");
			if (banner.classList.contains('finished-ani')) {
				banner.removeEventListener(transitionEnd, BannerEnds);
				BannerTitleAniEnds();

			}
		}


		function BannerTitleAniEnds() {
			/* +  Banner Title ----------------------  */
			var onScroll = ScrollOut({
				targets: bannerTitle,
				threshold: 0.3,
				once: true,
				onShown: function(el) {
					el.classList.remove('ani-pause');
					bannerTitleAnimation.addEventListener('animationend', BannerSubTitle);

				}

			});

		}


		//BANNER TITLE SPAN REMOVE
		function removeBannerTitleSpan() {
			document.querySelector('#noize').removeEventListener("touchstart", removeBannerTitleSpan, {
				passive: true
			});
			document.querySelector('#noize').removeEventListener("mouseover", removeBannerTitleSpan);
			bannerTitle.classList.add('visible');
			//   bannerTitle.innerHTML = bannerTitle.textContent.replace(/<span>(\S)<\/span>/g, '$1');
			bannerTitle.innerHTML = unsplitting(bannerTitle.innerHTML);
		}


		function BannerSubTitle() {
			if (bannerSubTitle !== null) {
				var onScroll = ScrollOut({
					targets: bannerSubTitle,
					threshold: 0.2,
					once: true,
					onShown: function(el) {

						el.classList.remove('ani-pause');
						bannerSubtitleAnimation.addEventListener('animationend', BannerParagraph);
					}

				});

			}
			else {
				BannerParagraph();
			}
			if (bannerTitle !== null) {
				bannerTitleAnimation.removeEventListener('animationend', BannerSubTitle);
				//REMOVE SPAN
				document.querySelector('#noize').addEventListener("touchstart", removeBannerTitleSpan, {
					passive: true
				});
				document.querySelector('#noize').addEventListener("mouseover", removeBannerTitleSpan);

			}
		}

		function BannerParagraph() {
			if (bannerDesc !== null) {
				var onScroll = ScrollOut({
					targets: bannerDesc,
					threshold: 0.2,
					once: true,
					onShown: function(el) {

						el.classList.remove('ani-pause');
						bannerDesc.addEventListener('animationend', BannerButton);
					}

				});

			}
			else {
				BannerButton();
			}
			if (bannerSubTitle !== null) {
				bannerSubtitleAnimation.removeEventListener('animationend', BannerParagraph);
				document.querySelector('#noize').addEventListener("touchstart", removeBannerSubTitleSpan, {
					passive: true
				});
				document.querySelector('#noize').addEventListener("mouseover", removeBannerSubTitleSpan);
			}
		}


		function removeBannerSubTitleSpan() {
			bannerSubTitle.classList.add('visible');
			bannerSubTitle.innerHTML = unsplitting(bannerSubTitle.innerHTML);
			document.querySelector('#noize').removeEventListener("touchstart", removeBannerSubTitleSpan, {
				passive: true
			});
			document.querySelector('#noize').removeEventListener("mouseover", removeBannerSubTitleSpan);

		}

		function BannerButton() {
			if (bannerButton !== null) {
				var onScroll = ScrollOut({
					targets: bannerButton,
					threshold: 0,
					once: true,
					onShown: function(el) {

						el.classList.remove('ani-pause');
					}

				});

				if (bannerDesc !== null) {
					bannerDesc.removeEventListener('animationend', BannerButton);
				}
			}

		}


		/* + BANNER DETECT LAST ANIMATED ELEMENT
			======================================================================*/
		var bannerTextBoxFin = '';
		var bannerTextBox = document.querySelector('.banner-text').lastElementChild.tagName;

		if (bannerTextBox == 'H2') {
			bannerTextBoxFin = bannerTitleSpan[bannerTitleSpan.length - 1];
			bannerTextBoxFin.addEventListener('animationend', LaunchMain);

		}
		else if (bannerTextBox == 'H3') {
			bannerTextBoxFin = bannerSubtitleSpan[bannerSubtitleSpan.length - 1];
			bannerTextBoxFin.addEventListener('animationend', LaunchMain);
		}
		else if (bannerTextBox == 'DIV') {
			bannerDesc.addEventListener('animationend', LaunchMain);
		}
		else {
			bannerButton.addEventListener('animationend', LaunchMain);
		}
		/*
		 *	=======================================================================
			  + FIRE THE MAIN BODY WHEN ANIMATION ENDS
		 *	=======================================================================
		 */

		var bannerDelay = document.querySelector('.banner-delay');

		function LaunchMain() {


			if (bannerDelay !== null) {
				var onAni = ScrollOut({
					targets: bannerDelay,
					// threshold: 0,
					once: true,
					onShown: function(el) {
						bannerDelay.classList.add('ani-start');
						app.pageWow.init();
					}

				});
			}

		}


	},

	setBannerSliderLoaded: function() {


		$("#bannerload")
			.removeClass("onload-hide")
			.addClass("banner-isloaded");


	},


	exit: function() {

		/* +  CANCEL ANIME.JS ----------------------  */
		function cancelAnimation(animation) {
			let activeInstances = anime.running;
			let index = activeInstances.indexOf(animation);
			activeInstances.splice(index, 1);
		}

		cancelAnimation();


		//   $('.next-p canvas').remove;
	}


};