Modifiers Transition types
Change how the transition of the effect flows
Overview
Torus Kit’s transition type means what CSS transition-timing-function
is used by the effect. It changes how the transition of the effect flows during the transition duration. Torus Kit includes six different transition for different scenarios.
Syntax
There are six predefined transition types: quad
, exponential
, bounce
, bounce-exponential
, linear
and ease-out
. Pick one and add it into data-tor-fx
.
Examples
Hover over the blue element to see the each transition type in action.
Quad
<div data-tor-fx="hover:scaleX.to(200) quad"></div>
Exponential
<div data-tor-fx="hover:scaleX.to(200) exponential"></div>
Bounce
<div data-tor-fx="hover:scaleX.to(200) bounce"></div>
Bounce exponential
<div data-tor-fx="hover:scaleX.to(200) bounce-exponential"></div>
Linear
<div data-tor-fx="hover:scaleX.to(200) linear"></div>
Ease out
<div data-tor-fx="hover:scaleX.to(200) ease-out"></div>