Loops

Loops

Velocity.js allows using loop animations.

To set up a loop animation use the loop option from Velocity.js. Check the doc here

The loop has two steps:

1. Apply the specified changes
2. Reverse to the original state

For example, in this case, the animation will apply the rotation of 45deg and then will be reversed to the prior state.

Pug

button(
    data-hz-resource='HzAnim',
    data-opt-hz-anim-on='click',
    data-opt-hz-anim-do={"rotateX":"45deg"},
    data-opt-hz-anim-with={loop:true}
) Go and back

HTML

<button
    data-hz-resource="HzAnim"
    data-opt-hz-anim-on="click"
    data-opt-hz-anim-do='{"rotateZ":"45deg"}'
    data-opt-hz-anim-with='{"loop":true}'
>
    Go and back for ever&ever
</button>

Resource completion in infinite loops

If a loop:true (infinite loop) is specified in a step, the resource will be marked as completed when the step with the loop starts and no more steps will be executed.

In this case, step 1 changes the background color.

After the step 1, step 2 is executed. Step 2 has an infinite loop so the resource is marked as completed just before executing the rotation.

The step 3 will never be executed.

Pug

button(
    data-hz-resource='HzAnim',
    data-opt-hz-anim-on='click',
    data-opt-hz-anim-do={"backgroundColor":"#ff0000"},
    data-opt-hz-anim-do-2={"rotateX":"45deg"},
    data-opt-hz-anim-with-2={loop:true},
    data-opt-hz-anim-do-3={"backgroundColor":"#fff"}
) Go and back

HTML

<button
    data-hz-resource='HzAnim',
    data-opt-hz-anim-on='click',
    data-opt-hz-anim-do='{"backgroundColor":"#ff0000"}',
    data-opt-hz-anim-do-2='{"rotateX":"45deg"}',
    data-opt-hz-anim-with-2='{"loop":true},
    data-opt-hz-anim-do-3='{"backgroundColor":"#fff"}'
>
    Go and back for ever&ever
</button>

Loop over a number of times

Also is possible to execute the loop a certain number of times. Set the loop with the number of times to repeat the animation

Pug

button(
    data-hz-resource='HzAnim',
    data-opt-hz-anim-on='click',
    data-opt-hz-anim-do='{"rotateZ":"45deg"}',
    data-opt-hz-anim-with={loop: 3}
) Go and back 3 times

HTML

<button
    data-hz-resource="HzAnim"
    data-opt-hz-anim-on="click"
    data-opt-hz-anim-do='{"rotateZ":"45deg"}'
    data-opt-hz-anim-with='{"loop":3}'
>
    Go and back 3 times
</button>