IDEAS
DESIGN
TECHNOLOGY
PEOPLE

MOTION
FOR A
BRIGHTER WEB

Center Reveal

AI flows. Ideas connect.

Scroll
GSAP
Backgrounds

בבית הספר שאלו אותי
– מה תרצה להיות כשתהיה גדול?
עניתי- שמח…
אמרו לי שלא הבנתי את המשימה…..
עניתי.. לא הבנתם את החיים….

( גון לנון )

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

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

	gsap.registerPlugin(ScrollTrigger);

	const scenes = document.querySelectorAll(
		'.liora-center-reveal'
	);

	scenes.forEach(function (scene) {

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

		const left = scene.querySelector(
			'.reveal-left'
		);

		const right = scene.querySelector(
			'.reveal-right'
		);

		const content = scene.querySelector(
			'.reveal-content'
		);

		if (!demo || !left || !right || !content) {
			return;
		}


		/* INITIAL STATE
		======================================== */

		gsap.set(left, {
			rotationY: 0
		});

		gsap.set(right, {
			rotationY: 0
		});

		gsap.set(content, {
			autoAlpha: 0,
			scale: 0.96
		});


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

		const tl = gsap.timeline({

			scrollTrigger: {

				trigger: scene,

				pin: demo,

				start: 'top 15%',

				end: '+=2000',

				scrub: 1,

				pinSpacing: true,

				anticipatePin: 1,

				invalidateOnRefresh: true
			}

		});


		/* CLOSED HOLD
		======================================== */

		tl.to({}, {
			duration: 0.12
		});


		/* OPEN PANELS
		======================================== */

		tl.to(
			left,
			{
				rotationY: -88,
				duration: 0.56,
				ease: 'none'
			},
			0.12
		);

		tl.to(
			right,
			{
				rotationY: 88,
				duration: 0.56,
				ease: 'none'
			},
			0.12
		);


		/* TEXT REVEAL
		======================================== */

		tl.to(
			content,
			{
				autoAlpha: 1,
				scale: 1,
				duration: 0.32,
				ease: 'none'
			},
			0.30
		);


		/* OPEN HOLD
		======================================== */

		tl.to({}, {
			duration: 0.32
		});

	});


	requestAnimationFrame(function () {
		ScrollTrigger.refresh();
	});

});
</script>

				
					
/* ========================================
   LIORA MOTION LIBRARY
   01.003 - CENTER REVEAL
   ======================================== */


/* MAIN SCENE
======================================== */

.liora-center-reveal {
	--reveal-image: url("YOUR-IMAGE-URL");

	position: relative;
	width: 100%;
	height: 70vh;
	min-height: 620px;

	overflow: hidden;
	isolation: isolate;

	perspective: 1800px;
}


/* TEXT
======================================== */

.liora-center-reveal .reveal-content {
	position: absolute !important;
	inset: 0 !important;

	width: 100% !important;
	height: 100% !important;

	display: flex !important;
	flex-direction: column !important;
	align-items: center !important;
	justify-content: center !important;

	margin: 0 !important;
	padding: clamp(40px, 7vw, 120px) !important;

	text-align: center !important;

	z-index: 1;
}


/* IMAGE PANELS
======================================== */

.liora-center-reveal .reveal-panel {
	position: absolute !important;

	top: 0 !important;
	bottom: auto !important;

	width: 50% !important;
	height: 100% !important;

	margin: 0 !important;
	padding: 0 !important;

	background-image: var(--reveal-image);
	background-repeat: no-repeat;
	background-size: 200% 100%;

	z-index: 2;

	backface-visibility: hidden;
	-webkit-backface-visibility: hidden;

	transform-style: preserve-3d;

	will-change: transform;
}


/* LEFT PANEL
======================================== */

.liora-center-reveal .reveal-left {
	left: 0 !important;
	right: auto !important;

	background-position: left center;
	transform-origin: left center;
}


/* RIGHT PANEL
======================================== */

.liora-center-reveal .reveal-right {
	right: 0 !important;
	left: auto !important;

	background-position: right center;
	transform-origin: right center;
}


/* ACCESSIBILITY
======================================== */

@media (prefers-reduced-motion: reduce) {

	.liora-center-reveal .reveal-panel {
		display: none;
	}

	.liora-center-reveal .reveal-content {
		opacity: 1 !important;
		visibility: visible !important;
		transform: none !important;
	}
}
/* ========================================
   01.003 - MOBILE / TOUCH FIX
   ======================================== */

@media
(max-width: 1024px) and (prefers-reduced-motion: no-preference),
(hover: none) and (pointer: coarse) and (prefers-reduced-motion: no-preference) {

    body:has(.liora-center-reveal) {
        overflow-x: clip !important;
    }

    .zakai-lab-single:has(.liora-center-reveal) {
        overflow: visible !important;
    }

    .zakai-lab-single .lab-demo:has(.liora-center-reveal) {
        min-height: calc(64svh + 1050px) !important;

        padding: 20px !important;

        overflow: visible !important;

        align-items: flex-start !important;
    }

    .liora-center-reveal {
        position: sticky !important;

        top: 18svh !important;

        width: 100% !important;
        height: 64svh !important;
        min-height: 460px !important;

        flex: 0 0 auto !important;
        align-self: flex-start !important;

        transform: none !important;
    }

    .liora-center-reveal .reveal-content {
        padding: 28px 20px !important;
    }

    .liora-center-reveal .reveal-content p {
        font-size: clamp(22px, 6vw, 30px) !important;
        line-height: 1.4 !important;
    }

}


/* MOBILE LANDSCAPE
======================================== */

@media
(max-width: 1024px) and (orientation: landscape) and (prefers-reduced-motion: no-preference),
(hover: none) and (pointer: coarse) and (orientation: landscape) and (prefers-reduced-motion: no-preference) {

 .zakai-lab-single .lab-demo:has(.liora-center-reveal) {
    min-height: calc(64svh + 1050px) !important;

    padding: 20px !important;

    overflow: visible !important;

    align-items: flex-start !important;

    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}
    .liora-center-reveal {
        top: 10svh !important;

        height: 72svh !important;
        min-height: 300px !important;
        max-height: 460px !important;
    }

    .liora-center-reveal .reveal-content {
        padding: 18px 40px !important;
    }

    .liora-center-reveal .reveal-content p {
        font-size: clamp(18px, 3vw, 24px) !important;
        line-height: 1.3 !important;
    }

}

				
					המבנה:

lab-demo
│
└── liora-center-reveal
    │
    ├── reveal-content
    ├── reveal-panel reveal-left
    └── reveal-panel reveal-right
    
    על הקונטיינר הראשי:

liora-center-reveal

על אלמנט הטקסט:

reveal-content

על הקונטיינר של חצי התמונה השמאלי:

reveal-panel reveal-left

על הקונטיינר של חצי התמונה הימני:

reveal-panel reveal-right

מה אפשר לשנות.. ואיך ⚙️

EXPLORE / LEARN / REUSE / CREATE

.Costomize to fit your vision

החלפת התמונה

בתחילת ה־CSS:

--reveal-image: url("YOUR-IMAGE-URL");

מחליפים לכתובת התמונה הרצויה:

--reveal-image: url("https://example.com/image.jpg");

אותה תמונה משמשת את שני החצאים, ולכן אין צורך ליצור מראש שתי תמונות.

גובה המופע

height: 70vh;
min-height: 620px;

70vh קובע את הגובה ביחס למסך. min-height מונע מהאזור להפוך לנמוך מדי.

לדוגמה, מופע גדול יותר:

height: 80vh;
min-height: 700px;

עומק תלת־הממד

perspective: 1800px;

ערך נמוך יותר יוצר פרספקטיבה חזקה ודרמטית יותר:

perspective: 1000px;

ערך גבוה יותר יוצר תנועה שטוחה ועדינה יותר:

perspective: 2400px;

כמה הדלתות נפתחות

ב־JS:

rotationY: -88

ו:

rotationY: 88

88 כמעט מעלים את החצאים מהחזית.

לפתיחה פחות עמוקה:

rotationY: -70
rotationY: 70

אורך הגלילה של המופע

זה אחד הפרמטרים החשובים ביותר.

יותר ארוך ואיטי:

end: '+=2600'

קצר ומהיר יותר:

end: '+=1400'

רכות הקשר בין הגלילה לאנימציה

scrub: 1

1 נותן מעט החלקה אחרי תנועת הגלילה.

אפשר לנסות:

scrub: 1.5

לתחושה מעט רכה יותר.

מתי מתחיל המופע

start: 'top 15%'

כלומר תחילת הסצנה מגיעה בערך ל־15% מגובה חלון הדפדפן ואז מתחיל ה־pin.

לדוגמה:

start: 'top 20%'

מתחיל מעט מוקדם יותר במיקום נמוך יותר במסך.

מתי הטקסט מתחיל להופיע

0.30

כאן:

tl.to(
	content,
	{
		autoAlpha: 1,
		scale: 1,
		duration: 0.32,
		ease: 'none'
	},
	0.30
);

ערך קטן יותר, למשל:

0.20

הטקסט מתחיל להופיע מוקדם יותר.

ערך גדול יותר:

0.42

הטקסט מחכה לפתיחה גדולה יותר של התמונה.

עיצוב הטקסט עצמו

גודל, צבע, פונט, משקל ו־line-height לא צריכים להיות חלק מהאנימציה.

אותם משנים ישירות ב־Elementor דרך Style של אלמנט reveal-content. כך אפשר להשתמש באותו אפקט עם כל עיצוב טיפוגרפי שרוצים.

הערה חשובה 🚩

האנימציה מבוססת על GSAP + ScrollTrigger. יש לוודא ששתי הספריות נטענות באתר לפני קוד ה־JavaScript של האנימציה.