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
classactive:
- when element gets.active
classshow:
- when element gets.show
classhover:
- when element getshover
state
And {push-variant}
is one of the:
push--up
move the element up by 1 rempush--down
move the element down by 1 rempush--left
move the element to the left by 1 rempush--right
move the elemenet to the right by 1 rem
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 viewportactive/T:
- when.active
class is applied on parent Trigger elementshow/T:
- when.show
class is applied on parent Trigger elementhover/T:
- whenhover
state is applied on parent Trigger element
And {push-variant}
is one of the:
push--up
move the element up by 1 rempush--down
move the element down by 1 rempush--left
move the element to the left by 1 rempush--right
move the elemenet to the right by 1 rem
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
classactive:
- when element gets.active
classshow:
- when element gets.show
classhover:
- when element getshover
state
And {pull-variant}
is one of the:
pull--up
move the element up by 1 rem to original positionpull--down
move the element down by 1 rem to original positionpull--left
move the element to the left by 1 rem to original positionpull--right
move the elemenet to the right by 1 rem to original position
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 viewportactive/T:
- when.active
class is applied on parent Trigger elementshow/T:
- when.show
class is applied on parent Trigger elementhover/T:
- whenhover
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 positionpull--down
move the element down by 1 rem to original positionpull--left
move the element to the left by 1 rem to original positionpull--right
move the elemenet to the right by 1 rem to original position