Built in Push & Pull

Move the element in four directions from the original place or into

Overview

Move (translate) the element over x and y axis on various {triggers} from the its initial position (push), or into its initial position (pull). These effects can be used to create a hover micro interactions on linkable elements, flying-in effects during scroll, or

Examples

Example of gradual pull and fade in effect on heading title made with pull.up(sm) fade.in and delay(<value>).

Hover me

Push up effect made super easy with Torus Kit

CSS clip effect example 
<div data-tor-parent="hover hover-fix" data-tor-group=".d-block span => hover(p):[pull.up(sm) fade.in] delay(/+50ms/) slow bounce;">
  <h2>
    <span class="d-block">
      <span>Push</span><span>up</span><span>effect</span>
    </span>
    <span class="d-block">
      <span>made</span><span>super</span><span>easy</span>
    </span>
    <span class="d-block">
      <span>with</span><span>Torus</span><span>Kit</span>
    </span>
  </h2>
</div>

Push

A push effect will translate the element from its original position to the new one.

Triggers

To push an element when <trigger> is performed on a single element, use data-tor-fx="<trigger>:push.<direction>(<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

The <direction> is one of the:

  • push.up move the element up
  • push.down move the element down
  • push.left move the element to the left
  • push.right move the element to the right

And <value> is one of the: xs, sm, md, lg, xl.

push.up(sm)
push.right(sm)
push.down(sm)
push.up(sm)
<div data-tor="hover:push.up(sm)">push.up(sm)</div>
<div data-tor="hover:push.right(sm)">push.right(sm)</div>
<div data-tor="hover:push.down(sm)">push.down(sm)</div>
<div data-tor="hover:push.up(sm)">push.up(sm)</div>
push.up(sm)
push.right(sm)
push.down(sm)
push.up(sm)
<div data-tor="active:push.up(sm)">push.up(sm)</div>
<div data-tor="active:push.right(sm)">push.right(sm)</div>
<div data-tor="active:push.down(sm)">push.down(sm)</div>
<div data-tor="active:push.up(sm)">push.up(sm)</div>
push.up(sm)
push.right(sm)
push.down(sm)
push.up(sm)
<div data-tor="inview:push.up(sm)">push.up(sm)</div>
<div data-tor="inview:push.right(sm)">push.right(sm)</div>
<div data-tor="inview:push.down(sm)">push.down(sm)</div>
<div data-tor="inview:push.up(sm)">push.up(sm)</div>

Parent triggers

To push an element 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>:push.<direction>(<value>) attribute to child elements where <trigger> is:

  • inview(p): - when .inview class is applied on Parent trigger element, because it's visible in the viewport
  • active(p): - when .active class is applied on Parent trigger element
  • show(p): - when .show class is applied on Parent trigger element
  • hover(p): - when hover state is applied on Parent trigger element

The <direction> is one of the:

  • push.up move the element up
  • push.down move the element down
  • push.left move the element to the left
  • push.right move the element to the right

And <value> is one of the: xs, sm, md, lg, xl.

push.up(sm)
push.right(sm)
push.down(sm)
push.up(sm)
<div data-tor="hover(p):push.up(sm)">push.up(sm)</div>
<div data-tor="hover(p):push.right(sm)">push.right(sm)</div>
<div data-tor="hover(p):push.down(sm)">push.down(sm)</div>
<div data-tor="hover(p):push.up(sm)">push.up(sm)</div>
push.up(sm)
push.right(sm)
push.down(sm)
push.up(sm)
<div data-tor="active(p):push.up(sm)">push.up(sm)</div>
<div data-tor="active(p):push.right(sm)">push.right(sm)</div>
<div data-tor="active(p):push.down(sm)">push.down(sm)</div>
<div data-tor="active(p):push.up(sm)">push.up(sm)</div>
push.up(sm)
push.right(sm)
push.down(sm)
push.up(sm)
<div data-tor="inview(p):push.up(sm)">push.up(sm)</div>
<div data-tor="inview(p):push.right(sm)">push.right(sm)</div>
<div data-tor="inview(p):push.down(sm)">push.down(sm)</div>
<div data-tor="inview(p):push.up(sm)">push.up(sm)</div>

Pull

A pull effect will translate the element into its original position.

Triggers

To create a pull animation when <trigger> is performed on a single element, use data-tor-fx="<trigger>:pull.<direction>(<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

The <direction> is one of the:

  • pull.up move the element up to its original position
  • pull.down move the element down to its original position
  • pull.left move the element to the left to its original position
  • pull.right move the element to the right to its original position

And <value> is one of the: xs, sm, md, lg, xl.

pull.up(sm)
pull.right(sm)
pull.down(sm)
pull.up(sm)
<div data-tor="hover:pull.up(sm)">pull.up(sm)</div>
<div data-tor="hover:pull.right(sm)">pull.right(sm)</div>
<div data-tor="hover:pull.down(sm)">pull.down(sm)</div>
<div data-tor="hover:pull.up(sm)">pull.up(sm)</div>
pull.up(sm)
pull.right(sm)
pull.down(sm)
pull.up(sm)
<div data-tor="active:pull.up(sm)">pull.up(sm)</div>
<div data-tor="active:pull.right(sm)">pull.right(sm)</div>
<div data-tor="active:pull.down(sm)">pull.down(sm)</div>
<div data-tor="active:pull.up(sm)">pull.up(sm)</div>
pull.up(sm)
pull.right(sm)
pull.down(sm)
pull.up(sm)
<div data-tor="inview:pull.up(sm)">pull.up(sm)</div>
<div data-tor="inview:pull.right(sm)">pull.right(sm)</div>
<div data-tor="inview:pull.down(sm)">pull.down(sm)</div>
<div data-tor="inview:pull.up(sm)">pull.up(sm)</div>

Parent triggers

To create a pull animation 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>:pull.<direction>(<value>) attribute to child elements where <trigger> is:

  • inview(p): - when .inview class is applied on Parent trigger element, because it's visible in the viewport
  • active(p): - when .active class is applied on Parent trigger element
  • show(p): - when .show class is applied on Parent trigger element
  • hover(p): - when hover state is applied on Parent trigger element

The <direction> is one of the:

  • pull.up move the element up to its original position
  • pull.down move the element down to its original position
  • pull.left move the element to the left to its original position
  • pull.right move the element to the right to its original position

And <value> is one of the: xs, sm, md, lg, xl.

pull.up(sm)
pull.right(sm)
pull.down(sm)
pull.up(sm)
<div data-tor="hover(p):pull.up(sm)">pull.up(sm)</div>
<div data-tor="hover(p):pull.right(sm)">pull.right(sm)</div>
<div data-tor="hover(p):pull.down(sm)">pull.down(sm)</div>
<div data-tor="hover(p):pull.up(sm)">pull.up(sm)</div>
pull.up(sm)
pull.right(sm)
pull.down(sm)
pull.up(sm)
<div data-tor="active(p):pull.up(sm)">pull.up(sm)</div>
<div data-tor="active(p):pull.right(sm)">pull.right(sm)</div>
<div data-tor="active(p):pull.down(sm)">pull.down(sm)</div>
<div data-tor="active(p):pull.up(sm)">pull.up(sm)</div>
pull.up(sm)
pull.right(sm)
pull.down(sm)
pull.up(sm)
<div data-tor="inview(p):pull.up(sm)">pull.up(sm)</div>
<div data-tor="inview(p):pull.right(sm)">pull.right(sm)</div>
<div data-tor="inview(p):pull.down(sm)">pull.down(sm)</div>
<div data-tor="inview(p):pull.up(sm)">pull.up(sm)</div>

Custom values

You are not limited to use just predefined values. Add your own as you need.

hover:push.up(1rem)
hover:push.down(10px)
<div class="btn btn-primary" data-tor="hover:push.up(1rem)">hover:push.up(1rem)</div>
<div class="btn btn-primary" data-tor="hover:push.down(10px)">hover:push.down(10px)</div>