Overview

By using sensorX|sensorY" you can create sensor-linked effects that reacts to motion sensor orientation.

Syntax

To create a sensor-based effect add data-tor-fx="<sensorX|sensorY>:<effect> to your desired element.

• sensorX - change the values while sensor cursor is moving in x axis
• sensorY - change the values while sensor cursor is moving in y axis

Examples

These are basic example with default options and behavior. To see more examples of what is possible check Options.

sensorX

Change the values on x axis cursor movement by using data-tor-fx="sensorX:<effect>".

<div data-tor-fx="sensorX:@transform.scale(0;1)">Scale</div>
<div data-tor-fx="sensorX:@transform.rotateZ(0deg;20deg)">Rotate</div>
<div data-tor-fx="sensorX:@transform.translateX(0px;50px)">Translate</div>

sensorY

Change the values on y axis cursor movement by using data-tor-fx="sensorY:<effect>".

<div data-tor-fx="sensorY:@transform.scale(0;1)">Scale</div>
<div data-tor-fx="sensorY:@transform.rotateZ(0deg;20deg)">Rotate</div>
<div data-tor-fx="sensorY:@transform.translateY(0px;50px)">Translate</div>