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.
<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.
<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.
<div data-loop="jump duration[xl::2000ms]">Jump</div>