Built in Push & Pull PRO

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 fade--in and delay[{value}].

Hover me

Push up effect made super easy with Torus Kit

<div data-fx-trigger="hover hover-fix" data-fx-group=".d-block span => hover/T:pull--up hover/T:fade--in delay[(0+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-fx="{trigger}:{push-variant} 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

And {push-variant} is one of the:

• push--up move the element up by 1 rem
• push--down move the element down by 1 rem
• push--left move the element to the left by 1 rem
• push--right move the elemenet to the right by 1 rem

          













<div data-fx="hover:push--up">Push up</div>
<div data-fx="hover:push--down">Push down</div>
<div data-fx="hover:push--left">Push left</div>
<div data-fx="hover:push--right">Push right</div>
          

          













<div data-fx="active:push--up">Push up</div>
<div data-fx="active:push--down">Push down</div>
<div data-fx="active:push--left">Push left</div>
<div data-fx="active:push--right">Push right</div>
          

          













<div data-fx="inview:push--up">Push up</div>
<div data-fx="inview:push--down">Push down</div>
<div data-fx="inview:push--left">Push left</div>
<div data-fx="inview:push--right">Push right</div>
          

Parent triggers

To grow an element of a single or multiple child elements when {trigger} is performed on a parent element,
add data-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 change.

Than add data-fx="{TRIGGER}:{push-variant} 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

And {push-variant} is one of the:

• push--up move the element up by 1 rem
• push--down move the element down by 1 rem
• push--left move the element to the left by 1 rem
• push--right move the elemenet to the right by 1 rem

          













<div data-fx-trigger="hover">
  <div data-fx="hover/T:push--up">Push up</div>
  <div data-fx="hover/T:push--down">Push down</div>
  <div data-fx="hover/T:push--left">Push left</div>
  <div data-fx="hover/T:push--right">Push right</div>
</div>
      
          

          













<div data-fx-trigger="active">
  <div data-fx="active/T:push--up">Push up</div>
  <div data-fx="active/T:push--down">Push down</div>
  <div data-fx="active/T:push--left">Push left</div>
  <div data-fx="active/T:push--right">Push right</div>
</div>
      
          

          













<div data-fx-trigger="inview">
  <div data-fx="inview/T:push--up">Push up</div>
  <div data-fx="inview/T:push--down">Push down</div>
  <div data-fx="inview/T:push--left">Push left</div>
  <div data-fx="inview/T:push--right">Push right</div>
</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-fx="{trigger}:{pull-variant} 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

And {pull-variant} is one of the:

• pull--up move the element up by 1 rem to original position
• pull--down move the element down by 1 rem to original position
• pull--left move the element to the left by 1 rem to original position
• pull--right move the elemenet to the right by 1 rem to original position

          













<div data-fx="hover:pull--up">Pull up</div>
<div data-fx="hover:pull--down">Pull down</div>
<div data-fx="hover:pull--right">Pull right</div>
<div data-fx="hover:pull--left">Pull left</div>
          

          













<div data-fx="active:pull--up">Pull up</div>
<div data-fx="active:pull--down">Pull down</div>
<div data-fx="active:pull--right">Pull right</div>
<div data-fx="active:pull--left">Pull left</div>
          

          













<div data-fx="inview:pull--up">Pull up</div>
<div data-fx="inview:pull--down">Pull down</div>
<div data-fx="inview:pull--right">Pull right</div>
<div data-fx="inview:pull--left">Pull left</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-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 change.

Than add data-fx="{TRIGGER}:{pull-variant} 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

And {pull-variant} is one of the:

• pull--up move the element up by 1 rem to original position
• pull--down move the element down by 1 rem to original position
• pull--left move the element to the left by 1 rem to original position
• pull--right move the elemenet to the right by 1 rem to original position

          













<div data-fx-trigger="hover">
  <div data-fx="hover/T:pull--up">Pull up</div>
  <div data-fx="hover/T:pull--down">Pull down</div>
  <div data-fx="hover/T:pull--right">Pull right</div>
  <div data-fx="hover/T:pull--left">Pull left</div>
</div>
      
          

          













<div data-fx-trigger="active">
  <div data-fx="active/T:pull--up">Pull up</div>
  <div data-fx="active/T:pull--down">Pull down</div>
  <div data-fx="active/T:pull--right">Pull right</div>
  <div data-fx="active/T:pull--left">Pull left</div>
</div>
      
          

          













<div data-fx-trigger="inview">
  <div data-fx="inview/T:pull--up">Pull up</div>
  <div data-fx="inview/T:pull--down">Pull down</div>
  <div data-fx="inview/T:pull--right">Pull right</div>
  <div data-fx="inview/T:pull--left">Pull left</div>
</div>