Malo
Close

Documentation

Here is our documentation on how to use Malo.

Animations

Animations are predefined methods that animate an element only once. They should normally be used for showing and hiding elements.

All animations come with 2 types, the type to show or transition "in" an element and a type to hide or transition "out" an element.

Here is a list of animation types Malo currently has.

  • Fade
  • Pop (4 Variations)
  • Bounce
  • Slide
  • Float (4 Variations)

fade

Acceptable Fields:

*animation: string
*element: string
callback: function
display: string
duration: number
timingFunction: string

All fields marked with "*" are required.

Example "fade-in"

malo.animate({ element: '#doc-modal', animation: 'fade-in', display: 'flex' });

To hide the element you need to change the animation field value to "fade-out" and remove the display field.

pop

Acceptable Fields:

*animation: string
*element: string
callback: function
direction: string
display: string
duration: number
timingFunction: string

All fields marked with "*" are required.

Pop allows "right", "left", "top" and "bottom" as values for the "direction" field

Example "pop-in"

malo.animate({ element: '#doc-modal', animation: 'pop-in', display: 'flex', direction: 'right' });

To hide the element you need to change the animation field value to "pop-out" and remove the display field.

bounce

Acceptable Fields:

*animation: string
*element: string
callback: function
display: string
duration: number
timingFunction: string

All fields marked with "*" are required.

Example "bounce-in"

malo.animate({ element: '#doc-modal', animation: 'bounce-in', display: 'flex', duration: 750 });

To hide the element you need to change the animation field value to "bounce-out" and remove the display field.

slide

Acceptable Fields:

*animation: string
*element: string
*axis: string
callback: function
display: string
duration: number
timingFunction: string

All fields marked with "*" are required.

Slide allows "y" and "x" as values for the "axis" field

Example "slide-in"

malo.animate({ element: '#doc-modal', animation: 'slide-in', axis: 'y', display: 'flex' });

To hide the element you need to change the animation field value to "slide-out" and remove the display field.

float

Acceptable Fields:

*animation: string
*element: string
*direction: string
callback: function
display: string
duration: number
timingFunction: string

All fields marked with "*" are required.

Float allows "right", "left", "top" and "bottom" as values for the "direction" field

Example "float-in"

malo.animate({ element: '#doc-modal', animation: 'float-in', display: 'flex', direction: 'up' });

To hide the element you need to change the animation field value to "float-out" and remove the display field.

Effects

Effects are predefined methods that adds effects to elements. Normally effects are used to perform a transition on a element more than once.

Here is a list of effect types Malo currently has.

  • Blink
  • Jump
  • Bounce

jump

Acceptable Fields:

*effect: string
*element: string
callback: function
delay: number
display: string
duration: number
iteration: string | number
timingFunction: string

All fields marked with "*" are required.

Example "jump"

malo.effect({ element: '#btn-effect-jump', effect: 'jump', iteration: 3, duration: 1000 });

bounce

Acceptable Fields:

*effect: string
*element: string
callback: function
delay: number
display: string
duration: number
iteration: string | number
timingFunction: string

All fields marked with "*" are required.

Example "bounce"

malo.effect({ element: '#btn-effect-bounce', effect: 'bounce', iteration: 1, duration: 750 });