When something appears💥 OV 1

Entrances

משהו מופיע כשהגולש מגיע אליו: בלוק, תמונה, כותרת, מספר. כניסה אחת לכל אלמנט, והיא נגיעה, לא ה-wow של הדף (ה-wow ב-WOW). בכל סקשן שתי תגיות: איך זה רץ (Scroll into view: פעם אחת כשנכנס, While scrolling: צמוד לגלילה) ואיך זה בנוי (attribute על markup קיים, או component עם מבנה משלו).

trigger_box ClipReveal split split_chars counter slot_counter

#gsap-trigger-box

trigger_box

[attribute]Scroll into view

<div trigger_box="">…</div>                            // site default (gsap_setting.trigger_box_effect)
<div trigger_box="" trigger_box_effect="zoom_out">…</div>  // per-element override

trigger_box_effect	Motion	Starts from	Best for
fade_up	Fades in, rises into place	opacity 0 · y 32px	Cards, list items, anything in a grid. The classic.
blur	Fades in out of focus, no movement	opacity 0 · blur 12px	Images and blocks that should stay put, e.g. inside a tight layout.
blur_upsite default	Rises and comes into focus	opacity 0 · y 28px · blur 12px	General use; softer than fade_up.
zoom_out	Settles from slightly larger to its size	opacity 0 · scale 1.2	One big thing: a number, a logo, a short word.
mask_up	Rises out of its own box, cut at its foot	y 40px · clip-path from the bottom	A big title, one line.
settle	Already there, settles slowly from close up (1.8s)	scale 1.25 · never hidden	A full-bleed picture behind copy.

fade_up

Fades in, rises into place

blur

Fades in out of focus, no movement

blur_up

Rises and comes into focus

zoom_out

Settles from slightly larger to its size

mask_up

Rises out of its own box, cut at its foot

settle

Already there, settles slowly from close up (1.8s)

<div trigger_box="" trigger_box_effect="zoom_out">4x</div>   // every number

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

70K+

לידים מקמפיינים שבנינו

98%

לקוחות מרוצים בכל הפרויקטים

#gsap-clip-reveal

ClipReveal

<Component />Scroll into view

<ClipReveal src="/a.jpg" alt="…" />   // from="top", the default

<ClipReveal from="center" src="/a.jpg" alt="…" className="aspect-4/3" />

הסיפור שלנו

סטודיו שמצלם את הרגש של הספורט ומייצר ערך לכל מי שמחיה אותו

<ClipReveal from="start" src="/a.jpg" alt="…" className="aspect-4/3" />   // מימין לשמאל
<ClipReveal from="end" src="/b.jpg" alt="…" className="aspect-4/3" />     // משמאל לימין

התהליך

מתחילים בפגישת היכרות, ובונים את התוכנית יחד

הצוות

אנשי מקצוע שמלווים אתכם מהיום הראשון

#gsap-split-text

split

[attribute]Scroll into viewWhile scrollingOn load

GSAP SplitText docs ↗

Attribute	What each piece does	Runs	Knobs
Effect: pick one
split=""	Rises into view out of its own mask (the text is hidden until it slides in)	Once, on scroll	split="-120" = from above
split="blur"	Fades in out of a blur, rising 20px	Scrubbed to scroll	(see Text Blur)
split="fill"	Nothing moves: already on screen at 25% opacity, brightens to full in reading order	Scrubbed to scroll	--split-fill-from, --split-fill-color
split="lines"	Line by line: each line rises whole out of its own mask, 0.25s apart	Once, on scroll	(from below)
split="solid_block"	Line by line: a solid block in the brand colour covers each line and leaves, uncovering it. Headings only	Once, on scroll	solid_block_bg_color="#ff2d87" (this mode only)
split_hero=""	Same as split="", without waiting for scroll	Once, on page load	split_hero="-120"
Option: works with any effect
split_chars=""	Cut by letter instead of by word (by word is the default)

A Latin-only line on an RTL page: the script adds dir="ltr"

split=""

From below, the default

כניסה מלמטה, ברירת המחדל

split="-120"

From above, split="-120"

כניסה מלמעלה, split="-120"

split="lines"

A heading that comes in line after line, each line at once

כותרת שנכנסת שורה אחרי שורה, כל שורה בבת אחת

split="solid_block"

גוש בצבע המותג מכסה כל שורה ויוצא

split="solid_block" solid_block_bg_color="#111"

ובצבע אחר, רק לאפקט הזה

split="" split_chars=""

TODAY.

טודיי ווב.

split="fill"

Three centred lines of the very same sentence, so that the order in which the words brighten is the only thing left to look at.

שלוש שורות ממורכזות של אותו משפט בדיוק, כדי שהדבר היחיד שנשאר להסתכל עליו הוא הסדר שבו המילים נדלקות.

#gsap-text-blur

split_chars

[attribute]While scrolling

<h2 split="blur">…</h2>                    // by word
<h2 split="blur" split_chars="">…</h2>     // by letter

Not for text with nikud

split="blur" split_chars=""

Let's talk about your project

בואו נדבר על הפרויקט שלכם

split="blur"

Let's talk about your project

בואו נדבר על הפרויקט שלכם

#gsap-count-up

counter

[attribute]Scroll into view

<div counter_up_trigger="">        // optional: starts the group together
  <span counter="">120</span>+      // units outside the span
  …rest of the code
</div>

1250

Projects Delivered

Client Satisfaction %

Team Members

3600

Hours Saved

#gsap-slot-counter

slot_counter

[attribute]Scroll into view

<span slot_counter="" data-value="40"></span>+   // units outside the span

40+

Happy Clients

86%

Come Back For More

500+

Projects Completed

$2400000

Revenue Generated

slot_counter=""

Required. Marks the element for transformation.

data-value="500"

Required. The target number to animate to.

data-duration="3.6"

Optional. Base speed in seconds. Use 1.5–2 for snappier feel.

data-separator=""

Optional. Adds comma every 3 digits → 2,400,000.

Entrances

trigger_box

ClipReveal

סטודיו שמצלם את הרגש של הספורט ומייצר ערך לכל מי שמחיה אותו

מתחילים בפגישת היכרות, ובונים את התוכנית יחד

אנשי מקצוע שמלווים אתכם מהיום הראשון

split

split_chars

Let's talk about your project

בואו נדבר על הפרויקט שלכם

Let's talk about your project

בואו נדבר על הפרויקט שלכם

counter

slot_counter

ספרו לנו על הפרויקט