Enhanced Bootstrap Responsiveness

Loop animations Responsiveness PRO

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 effect[{value} {resolution::value}] to set responsive values. Resolution must be defined with double colon ::.

Value Resolution definition Description
{value} none Custom value for all resolutions
{resolution} sm:: Set the value from sm resolution up
md:: Set the value from md resolution up
lg:: Set the value from lg resolution up
xl:: Set the value from xl resolution up
xxl:: Set the 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-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-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-loop="jump duration[xl::2000ms]">Jump</div>