Built in Blur

Add or remove blur effect from element. Create background blur on various user interactions

Overview

A blur effect make use of filter: blur() from SVG to add or remove the blur on user’s interaction.

Triggers

Blur

To animate the blur when <trigger> is performed on a single element, use data-tor-fx="<trigger>:blur.to(<value>) where <trigger> is:

  • inview: - when element appears in the viewport and gets .inview class
  • active: - when element gets .active class
  • show: - when element gets .show class
  • hover: - when element gets :hover state
blur.to(xs)
blur.to(sm)
blur.to(md)
blur.to(lg)
blur.to(xl)
<div data-tor-fx="hover:blur.to(xs)">blur.to(xs)</div>
<div data-tor-fx="hover:blur.to(sm)">blur.to(sm)</div>
<div data-tor-fx="hover:blur.to(md)">blur.to(md)</div>
<div data-tor-fx="hover:blur.to(lg)">blur.to(lg)</div>
<div data-tor-fx="hover:blur.to(xl)">blur.to(xl)</div>
blur.to(xs)
blur.to(sm)
blur.to(md)
blur.to(lg)
blur.to(xl)
<div data-tor-fx="active:blur.to(xs)">blur.to(xs)</div>
<div data-tor-fx="active:blur.to(sm)">blur.to(sm)</div>
<div data-tor-fx="active:blur.to(md)">blur.to(md)</div>
<div data-tor-fx="active:blur.to(lg)">blur.to(lg)</div>
<div data-tor-fx="active:blur.to(xl)">blur.to(xl)</div>
blur.to(xs)
blur.to(sm)
blur.to(md)
blur.to(lg)
blur.to(xl)
<div data-tor-fx="inview:blur.to(xs)">blur.to(xs)</div>
<div data-tor-fx="inview:blur.to(sm)">blur.to(sm)</div>
<div data-tor-fx="inview:blur.to(md)">blur.to(md)</div>
<div data-tor-fx="inview:blur.to(lg)">blur.to(lg)</div>
<div data-tor-fx="inview:blur.to(xl)">blur.to(xl)</div>

Blur from

To remove the blur when <trigger> is performed on a single element, use data-tor-fx="<trigger>:blur.from(<value>) where <trigger> is:

  • inview: - when element appears in the viewport and gets .inview class
  • active: - when element gets .active class
  • show: - when element gets .show class
  • hover: - when element gets :hover state
blur.from(xs)
blur.from(sm)
blur.from(md)
blur.from(lg)
blur.from(xl)
<div data-tor-fx="hover:blur.from(xs)">blur.from(xs)</div>
<div data-tor-fx="hover:blur.from(sm)">blur.from(sm)</div>
<div data-tor-fx="hover:blur.from(md)">blur.from(md)</div>
<div data-tor-fx="hover:blur.from(lg)">blur.from(lg)</div>
<div data-tor-fx="hover:blur.from(xl)">blur.from(xl)</div>
blur.from(xs)
blur.from(sm)
blur.from(md)
blur.from(lg)
blur.from(xl)
<div data-tor-fx="active:blur.from(xs)">blur.from(xs)</div>
<div data-tor-fx="active:blur.from(sm)">blur.from(sm)</div>
<div data-tor-fx="active:blur.from(md)">blur.from(md)</div>
<div data-tor-fx="active:blur.from(lg)">blur.from(lg)</div>
<div data-tor-fx="active:blur.from(xl)">blur.from(xl)</div>
blur.from(xs)
blur.from(sm)
blur.from(md)
blur.from(lg)
blur.from(xl)
<div data-tor-fx="inview:blur.from(xs)">blur.from(xs)</div>
<div data-tor-fx="inview:blur.from(sm)">blur.from(sm)</div>
<div data-tor-fx="inview:blur.from(md)">blur.from(md)</div>
<div data-tor-fx="inview:blur.from(lg)">blur.from(lg)</div>
<div data-tor-fx="inview:blur.from(xl)">blur.from(xl)</div>

Parent triggers

Blur

To animate the blur of a single or multiple child elements when <trigger> is performed on a parent element, add data-tor-fx-trigger="<inview|active|show|hover> to indicate that this is a parent element with the desired trigger - if this parent trigger is performed, child elements will be affected (will change)

Than add data-tor-fx="<trigger>:blur.to(<value>) attribute to child elements where <trigger> is:

  • inview-T: - when .inview class is applied on parent Trigger element, because it's visible in the viewport
  • active-T: - when .active class is applied on parent Trigger element
  • show-T: - when .show class is applied on parent Trigger element
  • hover-T: - when hover state is applied on parent Trigger element
blur.to(xs)
blur.to(sm)
blur.to(md)
blur.to(lg)
blur.to(xl)
<div data-tor-fx="hover-T:blur.to(xs)">blur.to(xs)</div>
<div data-tor-fx="hover-T:blur.to(sm)">blur.to(sm)</div>
<div data-tor-fx="hover-T:blur.to(md)">blur.to(md)</div>
<div data-tor-fx="hover-T:blur.to(lg)">blur.to(lg)</div>
<div data-tor-fx="hover-T:blur.to(xl)">blur.to(xl)</div>
blur.to(xs)
blur.to(sm)
blur.to(md)
blur.to(lg)
blur.to(xl)
<div data-tor-fx="active-T:blur.to(xs)">blur.to(xs)</div>
<div data-tor-fx="active-T:blur.to(sm)">blur.to(sm)</div>
<div data-tor-fx="active-T:blur.to(md)">blur.to(md)</div>
<div data-tor-fx="active-T:blur.to(lg)">blur.to(lg)</div>
<div data-tor-fx="active-T:blur.to(xl)">blur.to(xl)</div>
blur.to(xs)
blur.to(sm)
blur.to(md)
blur.to(lg)
blur.to(xl)
<div data-tor-fx="inview-T:blur.to(xs)">blur.to(xs)</div>
<div data-tor-fx="inview-T:blur.to(sm)">blur.to(sm)</div>
<div data-tor-fx="inview-T:blur.to(md)">blur.to(md)</div>
<div data-tor-fx="inview-T:blur.to(lg)">blur.to(lg)</div>
<div data-tor-fx="inview-T:blur.to(xl)">blur.to(xl)</div>

Blur from

To remove the blur of a single or multiple child elements when <trigger> is performed on a parent element, add data-tor-fx-trigger="<inview|active|show|hover> to indicate that this is a parent element with the desired trigger - if this parent trigger is performed, child elements will be affected (will change)

Than add data-tor-fx="<trigger>:blur.from(<value>) attribute to child elements where <trigger> is:

  • inview-T: - when .inview class is applied on parent Trigger element, because it's visible in the viewport
  • active-T: - when .active class is applied on parent Trigger element
  • show-T: - when .show class is applied on parent Trigger element
  • hover-T: - when hover state is applied on parent Trigger element
blur.from(xs)
blur.from(sm)
blur.from(md)
blur.from(lg)
blur.from(xl)
<div data-tor-fx="hover-T:blur.from(xs)">blur.from(xs)</div>
<div data-tor-fx="hover-T:blur.from(sm)">blur.from(sm)</div>
<div data-tor-fx="hover-T:blur.from(md)">blur.from(md)</div>
<div data-tor-fx="hover-T:blur.from(lg)">blur.from(lg)</div>
<div data-tor-fx="hover-T:blur.from(xl)">blur.from(xl)</div>
blur.from(xs)
blur.from(sm)
blur.from(md)
blur.from(lg)
blur.from(xl)
<div data-tor-fx="active-T:blur.from(xs)">blur.from(xs)</div>
<div data-tor-fx="active-T:blur.from(sm)">blur.from(sm)</div>
<div data-tor-fx="active-T:blur.from(md)">blur.from(md)</div>
<div data-tor-fx="active-T:blur.from(lg)">blur.from(lg)</div>
<div data-tor-fx="active-T:blur.from(xl)">blur.from(xl)</div>
blur.from(xs)
blur.from(sm)
blur.from(md)
blur.from(lg)
blur.from(xl)
<div data-tor-fx="inview-T:blur.from(xs)">blur.from(xs)</div>
<div data-tor-fx="inview-T:blur.from(sm)">blur.from(sm)</div>
<div data-tor-fx="inview-T:blur.from(md)">blur.from(md)</div>
<div data-tor-fx="inview-T:blur.from(lg)">blur.from(lg)</div>
<div data-tor-fx="inview-T:blur.from(xl)">blur.from(xl)</div>