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. Both custom values and duration are responsive.

Value units

Please don't combine different units when defining responsive values. Don't do this duration(1s xl::100ms) 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
<div data-tor-loop="swing(10deg xl::30deg)">Swing</div>

Custom duration

It’s also possible to set a responsive duration, too. This jump loop uses a default duration up to lg resolution, because everything up to xl (including) will use 2000ms.

Jump
<div data-tor-loop="jump duration(xl::2000ms)">Jump</div>