Skip to content

Multiple transformations

Jump to bottom
Javier Pérez Ruiz edited this page May 16, 2017 · 1 revision

Multiple transformations

It's possible to set multiple transformations to apply.

The data-opt-hz-anim-do accepts:

String

Use string to perform pre-defined animations like transition.fadeIn.

All the velocity-js effects are available.

See velocity.js Effects:Pre-Registered

Example

Pug

button(data-hz-resource="HzAnim"
        data-opt-hz-anim-on="click"
        data-opt-hz-anim-do="transition.fadeOut") Do fadeOut

or

Html

<button data-hz-resource="HzAnim"
        data-opt-hz-anim-on="click"
        data-opt-hz-anim-do="transition.fadeOut">
   Do fadeOut
</button>

JSON

To animate properties like backgrounds, colors, etc.

Note: When using HTML, all the object starts with a simple comma ( ' ) and the properties are wrapped with double commas ( " ) using the format:

'{"property":"value"}'

The properties have to be used following the properties map of velocity.js.

For more info see velocity.js properties

Example

Pug

// Single property
button(data-hz-resource="HzAnim"
       data-opt-hz-anim-on="click"
       data-opt-hz-anim-do={"backgroundColor":"#ff0000"}) Do background
// Multiple properties
button(data-hz-resource="HzAnim"
       data-opt-hz-anim-on="click"
       data-opt-hz-anim-do={"backgroundColor":"#ff0000","height":"3em","width":"20em"}) Do background, height and width

or

HTML

<!-- Single property -->
<button data-hz-resource="HzAnim"
   data-opt-hz-anim-on="click"
   data-opt-hz-anim-do='{"backgroundColor":"red"}'>
   Do background
</button>
<!-- Multiple properties -->
<button data-hz-resource="HzAnim"
   data-opt-hz-anim-on="click"
   data-opt-hz-anim-do='{"backgroundColor":"#ff0000","height":"3em","width":"10em"}'>
   Do background, height and width
</button>

It's possible perform multiple transforms at the same time.

All the properties in the object will be animated in parallel. To see sequential animations go to Array

Array

Using an array is possible to specify a property or a group of properties to be animated sequentially.

  1. Each position in the array is a step.
  2. The steps will be executed sequentially, one by one.
  3. Each step could have one or more properties.
  4. All the properties in a step will be executed in parallel.
  5. The array allows using multiple JSON objects that will be executed in order.

Example

Pug

button(data-hz-resource="HzAnim"
       data-opt-hz-anim-on="click"
       data-opt-hz-anim-do='[{"backgroundColor":"#ff0000"},{"height":"8em","width":"30em"},{"color":"#fff"}]') Do first background, then height and width, then color
<button data-hz-resource="HzAnim"
   data-opt-hz-anim-on="click"
   data-opt-hz-anim-do='[{"backgroundColor":"#ff0000"},{"height":"8em","width":"30em"},{"color":"#fff"}]'>
   Do first background, then height and width, then color
</button>

Multiple configurations

If you don't like array notation, don't worry, it's possible to do the same with multiple configuration. To specify more than one configuration, use

data-opt-hz-anim-do-{stepIndex}="properties"

Example

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='{"height":"8em","width":"30em"}'
       data-opt-hz-anim-do-3='{"color":"#fff"}') Do first background, then height and width, then color

or

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='{"height":"8em","width":"30em"}'
        data-opt-hz-anim-do-3='{"color":"#fff"}'>
        Do first background, then height and width, then color
</button>

This also allow specifying different configurations for each step, like the delay or the easing

Pug

button(data-hz-resource="HzAnim"
       data-opt-hz-anim-on="click"
       data-opt-hz-anim-do={"backgroundColor":"#ff0000"}
       data-opt-hz-anim-with={"delay":1000}
       data-opt-hz-anim-do-2={"height":"8em","width":"30em"}
       data-opt-hz-anim-with-2={"easing":"easeInSine"}
       data-opt-hz-anim-do-3={"color":"#fff"}) Do first background, then height and width, then color

or

HTML

<button data-hz-resource="HzAnim"
        data-opt-hz-anim-on="click"
        data-opt-hz-anim-do='{"backgroundColor":"#ff0000"}'
        data-opt-hz-anim-with='{"delay":1000}'
        data-opt-hz-anim-do-2='{"height":"8em","width":"30em"}'
        data-opt-hz-anim-with-2='{"easing":"easeInSine"}'
        data-opt-hz-anim-do-3='{"color":"#fff"}'>
        Do first background, then height and width, then color
</button>
Clone this wiki locally