Jose Tamu
January 11, 2025 /
Beginner

Blur Reading

Content tab

Animation group

Type: there are four types: v1, v2, v3 and v4. Those than can be seen at the demo.
Blur: determines the amount of blur to apply to the text before it is revealed.
Split type: determines how the text will be splitted: lines, words or 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.

ScrollTrigger group

Blur Reading animation uses ScrollTrigger Library to fire on scroll. Learn more about ScrollTrigger 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 if needed. It is specially useful when using the Scrub property.
Scroller: the element that will act as the scrolling viewport. It is the body by default.

Style tab

There are 3 groups available to style Blur Reading: Margin, Padding and Typography. If you need to apply additional styles, you can do so at the Settings Tab.