Built in Fade PRO
Create fading animation to fade in or fade out any element. Use modifier to fade it only a little
Overview
Fading animation uses CSS opacity
transition to fade in or fade out a desired element. Add a --small
modifier to limit the fading opacity.
Example
Example of gradual fade in effect on heading title made with fade--in
, pull--up
and delay[{value}]
.
Hover me
Fade in effect made super easy with Torus Kit
<div data-fx-trigger="hover hover-fix" data-fx-group=".d-block span => hover/T:fade--in slow delay[(0+50ms)]">
<h2>
<span class="d-block">
<span>Fade</span><span>in</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>
Triggers
To fade an element when {trigger}
is performed on a single element, use data-fx="{trigger}:{fade-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 {fade-variant}
is one of the:
fade--in
set element opacity from0
to1
fade--out
set element opacity from1
to0
fade--in--small
set element opacity from0.8
to1
fade--out--small
set element opacity from1
to0.8
Parent triggers
To animate fading 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}:{fade-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 {fade-variant}
is one of the:
fade--in
set element opacity from0
to1
fade--out
set element opacity from1
to0
fade--in--small
set element opacity from0.8
to1
fade--out--small
set element opacity from1
to0.8