Anyside Button
Arrow Button
Arrow Button v2
Arrow Button v3
Arrow Button v4
Arrow Button v5
Arrow Button v6
Arrow Button v7
Arrow Button v8
Blurry Button
Bubbles Button
Crystal Button
Dot Button
Dot Button v2
Dot Button v3
FlipFlop Button
FlipFlop Button v2
FlipFlop Button v3
Glowing Button
Marquee Button
Marquee Button v2
Mask Button
Modal Button
Nudge Button
Pixels Button
Prism Button
Prism Button v2
Rainbow Button
Reel Button
Ripple Button
Ripple Button v2
Ripple Button v3
Ripple Button v4
Ripple Button v5
Ripple Button v6
Ripple Button v7
Shiny Button
Squeezy Radius Button
Strip Button
Stripes Button
Blur Reading
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.