Tilts upright in 3D as you scroll it into view. Unlike the other effects, Tilt In is scrub-based — it's tied directly to your scroll position rather than playing once when triggered, so scrolling up partially un-tilts it.
Classes
Tilt In only has one form — it's always scroll-linked, so -pl, -st and the bare class all behave the same:
| Class | Plays |
|---|---|
fx-tilt-in-st (recommended) | Tied to scroll position from the moment it enters the viewport |
Options that matter
- Ease —
fx-ease-[name], defaultpower3.out. - Start position —
fx-start-[pos], defaulttop 85%.
Duration has no effect here, since the animation's progress is driven by scroll position instead of a timer. The tilt angle, starting scale and how tightly the animation tracks the scrollbar (scrub smoothing) can only be changed from JavaScript — see JavaScript API.
Example
<div class="fx-tilt-in-st">Tilts upright as you scroll</div>