Install and Simple use

Install

NPM

npm i --save @haztivity/hz-anim hz-anim uses velocity.js under the hood.

Dependencies

• JQuery
• velocity.js
• haztivity/core

Usage

1. Import @haztivity/hz-anim
2. Add HzAnim to the page
3. Assign an event to listen with data-hz-anim-on
4. Set the properties o transition to anim with data-opt-hz-anim-do

Ts

import {PageFactory, Page, PageController, PageRegister} from "@haztivity/core";
import template from "./page.pug";
import {HzAnimResource} from "@haztivity/hz-anim";
export let page: PageRegister = PageFactory.createPage(
    {
        name: "myPage",
        resources: [
            HzAnimResource
        ],
        template: template
    }
);

Pug

button(
    data-hz-resource="HzAnim"
    data-opt-hz-anim-on="click"
    data-opt-hz-anim-do={"rotateZ":"45deg"}
) Do to me

or

HTML

<button
    data-hz-resource="HzAnim"
    data-opt-hz-anim-on="click"
    data-opt-hz-anim-do='{"rotateZ":"45deg"}'
>
    Do to me
</button>

This will perform a rotate in the Z axis from 45 degrees.

By default, the animation is performed to the item itself, to see how to apply the animation to other element plase go to Apply animation to other targets

HzAnim uses velocity.js, a very efficient js library to perform animations.

It's possible to animate any of the properties and transitions available in velocity.js and use all the options.

Apply animation to other targets

To apply the transforms to other elements, use the data-opt-hz-anim-to, accepts any jquery valid selector. See jquery selectors for more info.

Example

Pug

button(
    data-hz-resource="HzAnim"
    data-opt-hz-anim-on="click"
    data-opt-hz-anim-do={"rotateZ":"45deg"}
    data-opt-hz-anim-to=".target"
) Do to .target

button.target Target

or

HTML

<button
    data-hz-resource="HzAnim"
    data-opt-hz-anim-on="cli###ck"
    data-opt-hz-anim-do='{"rotateZ":"45deg"}'
    data-opt-hz-anim-to=".target"
>
    Do to .target
</button>
<button class="target">Target</button>

Repeatable

By default, the animation is repeatable and could be performed multiple times.

For one time execution, set the repeatable option to false

Pug

    button(
        data-hz-resource="HzAnim"
        data-opt-hz-anim-repeatable="false"
        data-opt-hz-anim-on="click"
        data-opt-hz-anim-do={"rotateZ": "+=45deg"}
    ) Do to me only once

or

HTML

<button
    data-hz-resource="HzAnim"
    data-opt-hz-anim-repeatable="false"
    data-opt-hz-anim-on="click"
    data-opt-hz-anim-do='{"rotateZ":"+=45deg"}'
>
    Do to me only once
</button>