Blur Reading

Blur Reading includes four different approaches available at the demo. You can easily switch between them using “Type” control.

Typography
Blur: determines the blur applied to the text that will animate to 0px. The demo uses 5px at all types.

Split type: determines how the title will be splitted: lines, words or chars. The demo is splitted in chars.
Stagger: the delay to apply between lines, words or chars. This means, when the first line, word or char starts animating, the second will fire after “x” seconds determined by the stagger and so on.
GSAP easing: you can choose from a wide variety of easings. Learn more about GSAP easings here.

Start: determines the position of the Trigger to fire the animation. “top bottom” means when the top of the element hits the bottom of the viewport.
End: determines the end of the animation.
Scroller: the element that will act as the scrolling viewport. It is the body by default.

– Tamu