Menu
Rain Drop Text
RAIN DROP
Customize
Text
Stagger Delay (s)0.07
Duration (s)0.9
Drop Height (px)100
Repeat Delay (s)1.2
Props
| Property | Type | Default | Description |
|---|---|---|---|
text | string | "RAIN DROP" | Display text to animate. |
delay | number | 0.07 | Stagger delay (s) between each character starting its drop. |
duration | number | 0.9 | Fall + settle duration (s) for each character. |
dropHeight | number | 100 | Distance in pixels each character falls from before landing. |
ease | string | "bounce.out" | GSAP ease string, e.g. "bounce.out", "elastic.out(1,0.5)", "back.out(1.7)". |
repeat | boolean | false | Loop the drop animation indefinitely. |
repeatDelay | number | 1.2 | Pause (s) between loops when `repeat` is true. |
color | string | "#111111" | CSS color value for the text, e.g. "#378ADD" or "crimson". |
fontSize | string | "3.75rem" | CSS font-size applied to each character. |
className | string | "" | Extra classes applied to the root wrapper div. |
textTypestring
Default
"RAIN DROP"Display text to animate.
delayTypenumber
Default
0.07Stagger delay (s) between each character starting its drop.
durationTypenumber
Default
0.9Fall + settle duration (s) for each character.
dropHeightTypenumber
Default
100Distance in pixels each character falls from before landing.
easeTypestring
Default
"bounce.out"GSAP ease string, e.g. "bounce.out", "elastic.out(1,0.5)", "back.out(1.7)".
repeatTypeboolean
Default
falseLoop the drop animation indefinitely.
repeatDelayTypenumber
Default
1.2Pause (s) between loops when `repeat` is true.
colorTypestring
Default
"#111111"CSS color value for the text, e.g. "#378ADD" or "crimson".
fontSizeTypestring
Default
"3.75rem"CSS font-size applied to each character.
classNameTypestring
Default
""Extra classes applied to the root wrapper div.
Dependencies
gsap 3.15.0
Crafted withbyMohammad Tasin