Change the element opacity using <trigger>:opacity(<value>). This is similar to Fade effect, but the opacity()* works together with the .opacity-* class. That means you can set the initial opacity using .opacity-* class and change it when the trigger has performed.
Triggers
To animate the opacity when <trigger> is performed on a single element, use data-tor-fx="<trigger>:opacity(<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> is one of 0, 5, 10, 20, 30, 40, 50, 60, 70, 80, 90, 100
To animate the opacity 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>:opacity(<value>) attribute to child elements where <trigger> is:
inview-T: - when .inview class is applied on parent Trigger element, because it's visible in the viewport
active-T: - when .active class is applied on parent Trigger element
show-T: - when .show class is applied on parent Trigger element
hover-T: - when hover state is applied on parent Trigger element
And <value> is one of 0, 5, 10, 20, 30, 40, 50, 60, 70, 80, 90, 100
