Documentation

Building the examples assuming that => const malo = new Malo(1000, true)

Frames

Fade

malo.frame(operation, method, properties)


                            malo.frame(MALOCONSTANTS.OPERATIONS.SHOW, MALOCONSTANTS.METHODS.FADE, { element: '.sample-modal' , display: 'flex' });

Pop

malo.frame(operation, method, properties)


                            malo.frame(MALOCONSTANTS.OPERATIONS.SHOW, MALOCONSTANTS.METHODS.POP, { element: '.sample-modal' , display: 'flex' });

BOUNCE

malo.frame(operation, method, properties)


                            malo.frame(MALOCONSTANTS.OPERATIONS.BOUNCE, MALOCONSTANTS.METHODS.BOUNCE, { element: '.sample-modal' , display: 'flex' });

Bounce frame accepts "bounce" field inside the properties object, which accepts "double" as a value.


                            malo.frame(MALOCONSTANTS.OPERATIONS.SHOW, MALOCONSTANTS.METHODS.BOUNCE, { element: '.sample-modal' , display: 'flex', bounce: 'double', duration: 1000 });

SLIDE

malo.frame(operation, method, properties)

Slide frame accepts "axis" field inside the properties object, which accepts "x" or "y" as a value.


                            malo.frame(MALOCONSTANTS.OPERATIONS.SLIDE, MALOCONSTANTS.METHODS.SLIDE, { element: '.sample-modal' , display: 'flex', axis: 'y' });


                            malo.frame(MALOCONSTANTS.OPERATIONS.SHOW, MALOCONSTANTS.METHODS.SLIDE, { element: '.sample-modal' , display: 'flex', axis: 'x' });

FLOAT

malo.frame(operation, method, properties)

Float frame accepts "direction" field inside the properties object, which accepts "up" or "down" or "right" or "left" as a value.


                            malo.frame(MALOCONSTANTS.OPERATIONS.FLOAT, MALOCONSTANTS.METHODS.FLOAT, { element: '.sample-modal' , display: 'flex', direction: 'up' });


                            malo.frame(MALOCONSTANTS.OPERATIONS.FLOAT, MALOCONSTANTS.METHODS.FLOAT, { element: '.sample-modal' , display: 'flex', direction: 'down' });


                            malo.frame(MALOCONSTANTS.OPERATIONS.FLOAT, MALOCONSTANTS.METHODS.FLOAT, { element: '.sample-modal' , display: 'flex', direction: 'right' });


                            malo.frame(MALOCONSTANTS.OPERATIONS.FLOAT, MALOCONSTANTS.METHODS.FLOAT, { element: '.sample-modal' , display: 'flex', direction: 'left' });

Effects

BLINK

malo.effect(effect, properties)


                            malo.effect(MALOCONSTANTS.EFFECTS.BLINK, { element: '.sample-div.blink .sample-div-content' , iteration: 2, duration: 500 });

Apply Effect Here

JUMP

malo.effect(effect, properties)


                            malo.effect(MALOCONSTANTS.EFFECTS.JUMP, { element: '.sample-div.jump .sample-div-content' , iteration: 1, duration: 1000 });

Apply Effect Here

BOUNCE

malo.effect(effect, properties)


                            malo.effect(MALOCONSTANTS.EFFECTS.BOUNCE, { element: '.sample-div.bounce .sample-div-content' , iteration: 1, duration: 500 });

Apply Effect Here

Operations

HIDE


                        MALOCONSTANTS.OPERATIONS.HIDE; // Returns "hide"

SHOW


                        MALOCONSTANTS.OPERATIONS.SHOW; // Returns "show"