Custom Scroll-linked effects

Animate the CSS style based on page scroll


By using scroll" you can create scroll-linked effects that reacts to page scroll.


To create a scroll-linked effect add data-tor="scroll:<effect> to your desired element.

  • scroll - change the values while the page is scrolling in y direction


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


Change the values on both x and y axis cursor movement by using data-tor="mouse:<effect>".

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


Override a default options.


The offset option defines how the percentage (and so custom value) is calculated based on the element position against the viewport height. In other words, it defines where the effect starts and where it ends. The default value is middle - the element is exactly in the middle of the screen.

The full syntax markup: data-tor="<trigger>:<effect>(<start>;<end>)".

By default, the <start> value is 0, which means that start of percentage calculation is at the bottom edge of the viewport. If you are not using a <start> value, you don’t need to define it. The <end> value tells where is the finish state for the percentage calculation. If you set 80%, then effect finishes in the 80% of the viewport height.

<!-- Default `middle` origin -->
<div data-tor="scroll:@transform=scale(0;1)">Scale</div>

<!-- Effect ends in the 80% of the viewport height -->
<div data-tor="scroll:@transform=scale(0;1, {end: 80})">Scale</div>

<!-- Effect starts in the 50% and ends in the 80% of the viewport height -->
<div data-tor="scroll:@transform=scale(0;1, {start: 50, end: 80})">Scale</div>
Value Type Percentage Description Example
<start> Custom Based on mouse, mouseX, mouseY
middle string Middle: 100% mouseX, mouseY