Custom Scale

Overview

Scale effect will resize the element using CSS scaleX and scaleY property.

Syntax

Use data-tor="<trigger>:@transform=<scaleX|scaleY|scaleZ>(<start>;<end>) to scale the element over x or y axis. The <start> value represents the beginning scale value, while the <end> is the finish value.

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 scale the element when scrolling the page, use data-tor="scroll:@transform=<scaleX|scaleY|scaleZ>(<amount>)".

<div data-tor="mouse:@transform=scale(0;1)">scale</div>
<div data-tor="mouse:@transform=scaleX(0;1)">scaleX</div>
<div data-tor="mouse:@transform=scaleY(0;1)">scaleY</div>

mouse

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

<div data-tor="mouse:@transform=scale(0;1, {method: start})">scale</div>
<div data-tor="mouse:@transform=scaleX(0;1, {method: start})">scaleX</div>
<div data-tor="mouse:@transform=scaleY(0;1, {method: start})">scaleY</div>

mouseX

To scale the element when moving the cursor over x axis, use data-tor="mouseX:@transform=<scaleX|scaleY|scaleZ>(<amount>)"

<div data-tor="mouseX:@transform=scale(0;1, {method: start})">scale</div>
<div data-tor="mouseX:@transform=scaleX(0;1, {method: start})">scaleX</div>
<div data-tor="mouseX:@transform=scaleY(0;1, {method: start})">scaleY</div>

mouseY

To scale the element when moving the cursor over y axis, use data-tor="mouseY:@transform=<scaleX|scaleY|scaleZ>(<amount>)"

<div data-tor="mouseY:@transform=scale(0;1, {method: start})">scale</div>
<div data-tor="mouseY:@transform=scaleX(0;1, {method: start})">scaleX</div>
<div data-tor="mouseY:@transform=scaleY(0;1, {method: start})">scaleY</div>