Letter Cascade Reveal

				
					SCRIPT 01, Cascade Forward
<script>
window.addEventListener('load', function () {

	/* ========================================
	   LIORA MOTION LIBRARY
	   01.005 - LETTER CASCADE REVEAL
	   VARIANT: FORWARD
	   ======================================== */

	if (
		typeof gsap === 'undefined' ||
		typeof ScrollTrigger === 'undefined'
	) {
		console.error(
			'01.005 Cascade Forward: GSAP or ScrollTrigger is missing.'
		);

		return;
	}


	gsap.registerPlugin(ScrollTrigger);


	const scenes =
		document.querySelectorAll(
			'.liora-letter-cascade.cascade-forward'
		);


	if (!scenes.length) return;


	function splitText(target) {

		const text =
			target.textContent.trim();

		const words =
			text.split(/\s+/);

		target.innerHTML = '';


		words.forEach(function (word, wordIndex) {

			const wordSpan =
				document.createElement('span');

			wordSpan.className =
				'liora-cascade-word';


			Array.from(word).forEach(function (char) {

				const charSpan =
					document.createElement('span');

				charSpan.className =
					'liora-cascade-char';

				charSpan.textContent =
					char;

				wordSpan.appendChild(
					charSpan
				);

			});


			target.appendChild(
				wordSpan
			);


			if (wordIndex < words.length - 1) {

				target.appendChild(
					document.createTextNode(' ')
				);

			}

		});

	}


	scenes.forEach(function (scene) {

		const target =
			scene.querySelector(
				'.liora-cascade-target'
			);


		if (!target) return;


		splitText(target);


		const chars =
			target.querySelectorAll(
				'.liora-cascade-char'
			);


		gsap.from(chars, {

			yPercent: 120,

			opacity: 0,

			filter: 'blur(10px)',

			rotationX: -25,

			duration: 1.15,

			stagger: 0.07,

			ease: 'power3.out',

			scrollTrigger: {

				trigger: scene,

				start: 'top 82%',

				once: true

			}

		});

	});

});
</script>
SCRIPT 02, Cascade Reverse
<script>
window.addEventListener('load', function () {

	/* ========================================
	   LIORA MOTION LIBRARY
	   01.005 - LETTER CASCADE REVEAL
	   VARIANT: REVERSE
	   ======================================== */

	if (
		typeof gsap === 'undefined' ||
		typeof ScrollTrigger === 'undefined'
	) {
		console.error(
			'01.005 Cascade Reverse: GSAP or ScrollTrigger is missing.'
		);

		return;
	}


	gsap.registerPlugin(ScrollTrigger);


	const scenes =
		document.querySelectorAll(
			'.liora-letter-cascade.cascade-reverse'
		);


	if (!scenes.length) return;


	function splitText(target) {

		const text =
			target.textContent.trim();

		const words =
			text.split(/\s+/);

		target.innerHTML = '';


		words.forEach(function (word, wordIndex) {

			const wordSpan =
				document.createElement('span');

			wordSpan.className =
				'liora-cascade-word';


			Array.from(word).forEach(function (char) {

				const charSpan =
					document.createElement('span');

				charSpan.className =
					'liora-cascade-char';

				charSpan.textContent =
					char;

				wordSpan.appendChild(
					charSpan
				);

			});


			target.appendChild(
				wordSpan
			);


			if (wordIndex < words.length - 1) {

				target.appendChild(
					document.createTextNode(' ')
				);

			}

		});

	}


	scenes.forEach(function (scene) {

		const target =
			scene.querySelector(
				'.liora-cascade-target'
			);


		if (!target) return;


		splitText(target);


		const chars =
			target.querySelectorAll(
				'.liora-cascade-char'
			);


		gsap.from(chars, {

			yPercent: 120,

			opacity: 0,

			filter: 'blur(10px)',

			rotationX: -25,

			duration: 1.15,


			stagger: {

				each: 0.07,

				from: 'end'

			},


			ease: 'power3.out',

			scrollTrigger: {

				trigger: scene,

				start: 'top 82%',

				once: true

			}

		});

	});

});
</script>