Custom Translate

Overview

Translate effect will move the element using CSS translateX and translateY property.

Syntax

Use data-tor="<trigger>:@transform=<translateX|translateY|translateZ>(<start>;<end>) to translate the element over x or y axis. The <start> value represents the beginning translate value, while the <end> is the finish value. You can use any supported CSS translate unit.

transform shortcut

You can use @T= shortcut instead of writing full @transform= to make your code shorter.

Examples

The <mouse> examples uses {method: start} for more natural behavior. Try to move the cursor from the screen top-left corner into the bottom-right, the left edge to the right one, and from the top edge into the bottom.

scroll

To translate the element when scrolling the page, use data-tor="scroll:@transform=<translateX|translateY|translateZ>(<amount>)".

<div data-tor="mouse:@transform=translateX(0px;20px)">translateX</div>
<div data-tor="mouse:@transform=translateY(0px;50px)">translateY</div>

mouse

To translate the element when moving the cursor over both x and y axis, use data-tor="mouse:@transform=translateX(<amount>)" for horizontal translate and data-tor="mouse:@transform=translateY(<amount>)" for vertical translate.

<div data-tor="mouse:@transform=translateX(0px;20px, {method: start})">translateX</div>
<div data-tor="mouse:@transform=translateY(0px;50px, {method: start})">translateY</div>
<div data-tor="mouse:[@T=translateX(0px;50px) @T=translateY(0px;50px), {method: start}]">translateX translateY</div>

mouseX

To translate the element when moving the cursor over x axis, use data-tor="mouseX:@transform=<translateX|translateY|translateZ>(<amount>)"

<div data-tor="mouseX:@transform=translateX(0px;20px, {method: start})">translateX</div>
<div data-tor="mouseX:@transform=translateY(0px;50px, {method: start})">translateY</div>

mouseY

To translate the element when moving the cursor over y axis, use data-tor="mouseY:@transform=<translateX|translateY|translateZ>(<amount>)"

<div data-tor="mouseY:@transform=translateX(0px;20px, {method: start})">translateX</div>
<div data-tor="mouseY:@transform=translateY(0px;50px, {method: start})">translateY</div>