Depth Typography Reveal

				
					סקריפט 1: Depth IN

מתאים למבנה:

Container
class: liora-depth-in
│
└── Text
    class: liora-depth-target

הסקריפט המלא:

<script>
window.addEventListener('load', function () {

	/* =======================
	   LIORA MOTION LIBRARY
	   01.004 - DEPTH TYPOGRAPHY REVEAL
	   VARIANT: DEPTH IN
	   ======================== */

	if (
		typeof gsap === 'undefined' ||
		typeof ScrollTrigger === 'undefined'
	) {
		console.error(
			'01.004 Depth In: GSAP or ScrollTrigger is missing.'
		);

		return;
	}


	gsap.registerPlugin(ScrollTrigger);


	const scenes =
		document.querySelectorAll(
			'.liora-depth-in'
		);


	if (!scenes.length) return;


	scenes.forEach(function (scene) {

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


		if (!target) {

			console.warn(
				'01.004 Depth In: .liora-depth-target not found.',
				scene
			);

			return;
		}


		/* START:
		   HUGE + BLURRED
		==================== */

		gsap.set(target, {

			scale: 4.5,

			z: 500,

			opacity: 0.35,

			filter: 'blur(18px)',

			transformOrigin:
				'center center'

		});


		/* REVEAL:
		   NORMAL + SHARP
		================*/

		gsap.to(target, {

			scale: 1,

			z: 0,

			opacity: 1,

			filter: 'blur(0px)',

			ease: 'none',


			scrollTrigger: {

				trigger: scene,

				start: 'top 85%',

				end: 'center 45%',

				scrub: 1,

				invalidateOnRefresh: true

			}

		});

	});


	requestAnimationFrame(function () {

		ScrollTrigger.refresh();

	});

});
</script>

סקריפט 2: Depth OUT

מתאים למבנה:

Container
class: liora-depth-out
│
└── Text
    class: liora-depth-target

הסקריפט המלא:

<script>
window.addEventListener('load', function () {

	/* =========================
	   LIORA MOTION LIBRARY
	   01.004 - DEPTH TYPOGRAPHY REVEAL
	   VARIANT: DEPTH OUT
	   ===================== */

	if (
		typeof gsap === 'undefined' ||
		typeof ScrollTrigger === 'undefined'
	) {
		console.error(
			'01.004 Depth Out: GSAP or ScrollTrigger is missing.'
		);

		return;
	}


	gsap.registerPlugin(ScrollTrigger);


	const scenes =
		document.querySelectorAll(
			'.liora-depth-out'
		);


	if (!scenes.length) return;


	scenes.forEach(function (scene) {

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


		if (!target) {

			console.warn(
				'01.004 Depth Out: .liora-depth-target not found.',
				scene
			);

			return;
		}


		/* START:
		   NORMAL + SHARP
		=================== */

		gsap.set(target, {

			scale: 1,

			z: 0,

			opacity: 1,

			filter: 'blur(0px)',

			transformOrigin:
				'center center'

		});


		/* EXIT:
		   HUGE + BLURRED
		=================== */

		gsap.to(target, {

			scale: 5,

			z: 600,

			opacity: 0.18,

			filter: 'blur(20px)',

			ease: 'none',


			scrollTrigger: {

				trigger: scene,

				start: 'top 70%',

				end: 'bottom 20%',

				scrub: 1,

				invalidateOnRefresh: true

			}

		});

	});


	requestAnimationFrame(function () {

		ScrollTrigger.refresh();

	});

});
</script>