Pro

Push & Pull

Translating (moving) element from and into position

Overview

Use push-* or pull-* value in data-fx="" attribute to translate the element over x or y axis. Default translate distance is 0.5rem, means that element moves only this distance in any direction as default. Read more in Distance section.

Push (out)

Translate (push out) the element over x or y axis from default position into displaced one. Use data-fx="{action}:push{direction}" data attribute.

Where {action} is one of:

  • h: to animate an element when it’s hovered
  • a: to animate an element when it gets .active class
  • th: to animate an element when the parent trigger is hovered
  • ta: to animate an element when the parent trigger gets .active or .show class

… and {direction} is one of:

  • -up to translate element up over y axis
  • -down to translate element down over y axis
  • -left to translate element left over x axis
  • -right to translate element right over x axis

On hover

To translate a single element on its hover, add data-fx="h:push-{direction}" data attribute.

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

On active

To translate a single element when it gets .active class, add data-fx="a:push-{direction}" data attribute.

Click the elements to toggle its .active class
a:push-up
a:push-right
a:push-left
a:push-down
<div data-fx="a:push-up">a:push-up</div>
<div data-fx="a:push-right">a:push-right</div>
<div data-fx="a:push-left">a:push-left</div>
<div data-fx="a:push-down">a:push-down</div>

On trigger hover

Translate a single or multiple elements when the parent trigger is hovered. At first, indicate what is parent trigger element by adding data-trigger="hover" attribute to it, then add data-fx="th:push-{direction}" data attribute to elements you want to move when trigger is hovered.

Hover this trigger
th:push-up
th:push-right
th:push-left
th:push-down
<div data-trigger="hover">
  <div data-fx="th:push-up">th:push-up</div>
  <div data-fx="th:push-right">th:push-right</div>
  <div data-fx="th:push-left">th:push-left</div>
  <div data-fx="th:push-down">th:push-down</div>
</div>

On trigger active

Translate a single or multiple elements when the parent trigger gets .active or .show class. At first, indicate what is parent trigger element by adding data-trigger="{active|show}" attribute to it, then add data-fx="ta:push-{direction}" data attribute to elements you want to move when trigger is hovered.

Click this trigger to toggle its .active class
ta:push-up
ta:push-right
ta:push-left
ta:push-down
<div data-trigger="active">
  <div data-fx="ta:push-up">ta:push-up</div>
  <div data-fx="ta:push-right">ta:push-right</div>
  <div data-fx="ta:push-left">ta:push-left</div>
  <div data-fx="ta:push-down">ta:push-down</div>
</div>

Pull (in)

Translate (pull in) the element over x or y axis from displaced position into default one. Use data-fx="{action}:pull{direction}" data attribute.

Where {action} is one of:

  • h: to animate an element when it’s hovered
  • a: to animate an element when it gets .active class
  • th: to animate an element when the parent trigger is hovered
  • ta: to animate an element when the parent trigger gets .active or .show class

… and {direction} is one of:

  • -down to translate element from top down into default position over y axis
  • -up to translate element from bottom up into default position over y axis
  • -left to translate element from left into default position over x axis
  • -right to translate element from right into default position over x axis

On hover

To translate a single element from displaced position into default one on its hover, add data-fx="h:pull-from-{direction}" data attribute.

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

On active

To translate a single element from displaced position into default one when it gets .active class, add data-fx="a:pull-{direction}" data attribute.

Click the elements to toggle its .active class
a:pull-up
a:pull-left
a:pull-right
a:pull-down
<div data-fx="a:pull-up">a:pull-up</div>
<div data-fx="a:pull-left">a:pull-left</div>
<div data-fx="a:pull-right">a:pull-right</div>
<div data-fx="a:pull-down">a:pull-down</div>

On trigger hover

Translate a single or multiple elements when the parent trigger is hovered. At first, indicate what is parent trigger element by adding data-trigger="hover" attribute to it, then add data-fx="th:pull-{direction}" data attribute to elements you want to move when trigger is hovered.

Hover this trigger
th:pull-up
th:pull-left
th:pull-right
th:pull-down
<div data-trigger="hover">
  <div data-fx="th:pull-up">th:pull-up</div>
  <div data-fx="th:pull-left">th:pull-left</div>
  <div data-fx="th:pull-right">th:pull-right</div>
  <div data-fx="th:pull-down">th:pull-down</div>
</div>

On trigger active

Translate a single or multiple elements when the parent trigger gets .active or .show class. At first, indicate what is parent trigger element by adding data-trigger="{active|show}" attribute to it, then add data-fx="ta:pull-{direction}" data attribute to elements you want to move when trigger is hovered.

Click this trigger to toggle its .active class
ta:pull-up
ta:pull-left
ta:pull-right
ta:pull-down
<div data-trigger="active">
  <div data-fx="ta:pull-up">ta:pull-up</div>
  <div data-fx="ta:pull-left">ta:pull-left</div>
  <div data-fx="ta:pull-right">ta:pull-right</div>
  <div data-fx="ta:pull-down">ta:pull-down</div>
</div>

Distance

You can change the default 0.5rem moving distance by adding push-{half|full} or pull-{half|full} value to data-fx attribute where:

  • push-half or pull-half will translate the element by 50% of its width or height (depending on direction)
  • push-full or pull-full will translate the element by 100% of its width or height (depending on direction)

It can be combined it with any {action} in data-fx="{action}:push-*" or data-fx="{action}:pull-*" attribute.

Push (out)

h:push-up
h:push-up push-half
h:push-up push-full
<div data-fx="h:push-up">h:push-up</div>
<div data-fx="h:push-up push-half">h:push-up push-half</div>
<div data-fx="h:push-up push-full">h:push-up push-full</div>
Hover this trigger
th:push-up
th:push-up push-half
th:push-up push-full
<div data-trigger="hover">
  <div data-fx="th:push-up">th:push-up</div>
  <div data-fx="th:push-up push-half">th:push-up push-half</div>
  <div data-fx="th:push-up push-full">th:push-up push-full</div>
</div>

Pull (in)

h:pull-up
h:pull-up pull-half
h:pull-up pull-full
<div data-fx="h:pull-up">h:pull-up</div>
<div data-fx="h:pull-up pull-half">h:pull-up pull-half</div>
<div data-fx="h:pull-up pull-full">h:pull-up pull-full</div>
Hover this trigger
th:pull-up
th:pull-up pull-half
th:pull-up pull-full
<div data-trigger="hover">
  <div data-fx="th:pull-up">th:pull-up</div>
  <div data-fx="th:pull-up pull-half">th:pull-up pull-half</div>
  <div data-fx="th:pull-up pull-full">th:pull-up pull-full</div>
</div>