Loops Responsiveness

Fine-tune the animation on multiple resolutions thanks to responsive loop values

Overview

Sometimes the animation looks good on one resolution, but it’s too annoying on smaller one. It this case you can use Torus Kit responsive loop possibilities and define the custom value for each resolution.

Value units

Please don't combine different units when defining responsive values. Don't do this jump(10px xl::3rem) or jump(50px xl::1rem). Use the same units across the whole definition.

Syntax

Use <variant>(<resolution>::<value>) to set responsive values. Resolution must be defined with double colon ::.

Resolution definitionDescription
noneCustom value for all resolutions
sm::Custom value from sm resolution up
md::Custom value from md resolution up
lg::Custom value from lg resolution up
xl::Custom value from xl resolution up
xxl::Custom value from xxl resolution up

Examples

Custom value

Here’s how to set a custom value for md (medium) resolution and up. Other resolutions up to sm will use a default value.

Pulse
<div data-tor="loop:pulse(md::1.5)">Pulse</div>

You can also change the default value to custom one and combine it with the responsive value. In this case, we’ve set 10deg custom value for all resolutions, but specify the 30deg value only on xl and up.

Swing
Swing
<div data-tor="loop:swing(10deg xl::30deg)">Swing</div>
<div data-tor="loop:float(10px xl::3rem)">Swing</div>