Overview
Change the element’s size using {grow|grow--out}
(scale up) or {shrink|shrink--in}
(scale down) effects on various triggers. Add --small
modifier to reduce the initial/final size of the element.
Examples
Grow and shrink animation on hover using the delay[{value}]
to create a gradual effect.
Hover me
This text will shrink
I've just grown
<div data-fx-trigger="hover hover-fix">
<h2>
<span data-fx="hover/T:shrink">This</span>
<span data-fx="hover/T:shrink delay[50ms]">text</span>
<span data-fx="hover/T:shrink delay[100ms]">will</span>
<span data-fx="hover/T:shrink delay[150ms]">shrink</span>
</h2>
<h2>
<span data-fx="hover/T:grow">I've</span>
<span data-fx="hover/T:grow delay[50ms]">just</span>
<span data-fx="hover/T:grow delay[100ms]">grown</span>
</h2>
</div>
Grow
A grow effect will apply a scale up transform animation in various variants.
Triggers
To grow an element when {trigger}
is performed on a single element, use data-fx="{trigger}:{grow-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 {grow-variant}
is one of the:
grow
set element scale from0
to1
(not applicable forhover
)grow--out
set element scale from1
to2
grow--small
set element scale from0.75
to1
grow--out--small
set element scale from1
to1.25
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}:{grow-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 {grow-variant}
is one of the:
grow
set element scale from0
to1
(not applicable forhover
)grow--out
set element scale from1
to2
grow--small
set element scale from0.75
to1
grow--out--small
set element scale from1
to1.25
Shrink
A shrink effect will apply a scale down transform animation in various variants.
Triggers
To shrink an element when {trigger}
is performed on a single element, use data-fx="{trigger}:{shrink-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 {shrink-variant}
is one of the:
shrink
set element scale from1
to2
shrink--in
set element scale from2
to1
shrink--small
set element scale from1
to0.75
shrink--in--small
set element scale from1.25
to1
Parent triggers
To shrink 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}:{shrink-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 {shrink-variant}
is one of the:
shrink
set element scale from1
to2
shrink--in
set element scale from2
to1
shrink--small
set element scale from1
to0.75
shrink--in--small
set element scale from1.25
to1