Motion
Text
Ways text arrives and catches the eye. Each one is a port of the React Bits effect the dashboard or the website uses, with the same timing.
Split text
The dashboard greeting: GSAP SplitText cuts the line and each piece rises in from behind a clip.
| Prop | Values | Default | What it does |
|---|---|---|---|
text / tag | string · tag | · 'p' | The words and the element they sit in |
splitType | 'chars' | 'words' | 'lines' | 'chars' | What moves on its own |
effect | 'rise' | 'fade' | 'blur' | 'pop' | 'flip' | 'skew' | 'rise' | A ready-made way in |
from / to / ease | GSAP vars · ease | — | Your own way in (overrides effect) |
delay / duration | ms between pieces · s | 50 · 1.25 | Pace |
trigger | 'view' | 'load' | 'view' | Start on scroll into view, or at once |
Blur text
Section titles on the vitals cards and the website: each word comes out of a blur and settles on a spring.
How the business is breathing
| Prop | Values | Default | What it does |
|---|---|---|---|
text / delay | string · ms | · 200 | The words; time between them |
animateBy | 'words' | 'letters' | 'words' | What moves on its own |
direction / distance / blur | 'top' | 'bottom' | 'left' | 'right' · px · px | 'top' · 50 · 10 | Where it comes from, how far, how soft |
stepDuration | s | 0.35 | Half the blur time; the spring settles in this |
trigger | 'view' | 'load' | 'view' | When it starts |
Shiny text
A band of light sweeps across a quiet link, every 3 seconds.
Gradient text
Colours slide back and forth through the letters (website headline).
Rotating text
The website's product line: the word leaves letter by letter from the end, the box springs to the new width, the next word springs in.
One place for your finances
| Prop | Values | Default | What it does |
|---|---|---|---|
texts / interval | string[] · ms | · 2000 | The words and how long each stays |
splitBy | 'characters' | 'words' | 'characters' | What moves on its own |
staggerDuration / staggerFrom | s · 'first' | 'last' | 'center' | 'random' | index | 0 · 'first' | The order letters move in |
enter / exit | GSAP vars | { y: '100%', opacity: 0 } · { y: '-120%', opacity: 0 } | Where letters come from and go to |
transition | { stiffness, damping, mass } | { damping: 25, stiffness: 300 } | The spring |
Count up
use:countUp — figures count up when they reach the screen, and from the old value to the new one when they change (easeOutCubic).