Scroll Horizontal Journey

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

	/* ========================================
	   LIORA MOTION LIBRARY
	   04 - SCROLL HORIZONTAL JOURNEY
	   ======================================== */

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

		return;
	}


	gsap.registerPlugin(ScrollTrigger);


	document
		.querySelectorAll('.liora-horizontal-journey')
		.forEach(function (journey) {


			const track =
				journey.querySelector(
					'.liora-horizontal-track'
				);


			const panels =
				track
					? track.querySelectorAll(
						'.liora-horizontal-panel'
					)
					: [];


			const demo =
				journey.closest('.lab-demo');


			if (
				!track ||
				!demo ||
				panels.length < 2
			) {
				return;
			}


			/* ========================================
			   SETTINGS
			======================================== */

			const panelCount =
				panels.length;

			const endHold =
				window.innerHeight * 0.65;


			/* ========================================
			   RESET
			======================================== */

			gsap.set(track, {
				xPercent: 0
			});


			/* ========================================
			   TIMELINE
			======================================== */

			const timeline =
				gsap.timeline({

					scrollTrigger: {

						trigger: demo,

						start: 'top top',

						end: function () {

							const travel =
								window.innerWidth *
								(panelCount - 1);

							return '+=' +
								(travel + endHold);

						},

						pin: demo,

						pinSpacing: true,

						scrub: 1,

						anticipatePin: 1,

						invalidateOnRefresh: true
					}

				});


			/* ========================================
			   HORIZONTAL MOVEMENT
			======================================== */

			timeline.to(track, {

				xPercent:
					-100 *
					(panelCount - 1) /
					panelCount,

				duration: 3,

				ease: 'none'

			});


			/* ========================================
			   HOLD LAST PANEL
			======================================== */

			timeline.to({}, {

				duration: 0.65

			});

		});


	/* ========================================
	   REFRESH
	======================================== */

	requestAnimationFrame(function () {

		ScrollTrigger.refresh();

	});

});
</script>