Blur In

Fades in while coming into focus, like a camera lens racking focus — starts blurred (12px) and clears up.

Classes

Class	Plays
`fx-blur-in-pl`	On page load
`fx-blur-in-st`	When the element scrolls into view
`fx-blur-in`	Automatically, when its section scrolls into view

Options that matter

Duration — fx-duration-[n], default 1.2 seconds.
Delay — fx-delay-[n], default 0.
Ease — fx-ease-[name], default power2.out.
Start position — fx-start-[pos], default top 85% (scroll-triggered only).

The blur amount (12px) can only be changed from JavaScript — see JavaScript API. Blurring text can look soft on some fonts — test with your own typography before shipping this on body copy.

Example

<img src="hero.jpg" class="fx-blur-in-pl" alt="" />