Scale up or down the elements or images with predefined values, or add your custom one
Overview
This effect will make resizing (scaling) of your elements a piece of cake. It can be also used to scale the regular images or background images when they’re used within the .bg wrapper.
Triggers
Scale
To scale the element when <trigger> is performed on a single element, use data-tor-fx="<trigger>:scale.to(<value>) 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 <value> can be any CSS decimal such as 0.2 or percentage number such 20%.
To scale the element back to its original size when <trigger> is performed on a single element, use data-tor-fx="<trigger>:scale.from(<value>) 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 <value> can be any CSS decimal such as 0.2 or percentage number such 20%.
To scale the element of a single or multiple child elements when <trigger> is performed on a parent element, add data-tor-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 be affected (will change)
Than add data-tor-fx="<trigger>:scale.to(<value>) attribute to child elements where <trigger> is:
inview(p): - when .inview class is applied on Parent trigger element, because it's visible in the viewport
active(p): - when .active class is applied on Parent trigger element
show(p): - when .show class is applied on Parent trigger element
hover(p): - when hover state is applied on Parent trigger element
And <value> can be any CSS decimal such as 0.2 or percentage number such 20%.
To scale the element back to its original size of a single or multiple child elements when <trigger> is performed on a parent element, add data-tor-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 be affected (will change)
Than add data-tor-fx="<trigger>:scale.from(<value>) attribute to child elements where <trigger> is:
inview(p): - when .inview class is applied on Parent trigger element, because it's visible in the viewport
active(p): - when .active class is applied on Parent trigger element
show(p): - when .show class is applied on Parent trigger element
hover(p): - when hover state is applied on Parent trigger element
And <value> can be any CSS decimal such as 0.2 or percentage number such 20%.