Intermediate

Animation

Animation Config

Animation is implemented within multiview and pager components. It sets the way the views will be changed as you switch between views or page through the component.

There exist two animation types with their own subtypes:

slide - in, out, together
flip - horizontal, vertical

Or, instead, you can choose one of the four animation directions:

direction - left, right, top, bottom

Animation in Multiview and Pager

Multiview uses slide:"together" animation type by default.

Animation can be switched off:

{view:"multiview", animate:false }

Enabling Animation

1 . The simplest means is including the animate property into the multiview or pager constructor and define the necessary type and subtype:

webix.ui({
   view:"multiview",
   animate:{
      type:"flip", 
      subtype:"vertical"
   },
   cells:[]   
});

2 . The values for the animate property can be assigned directly out of the multiview constructor. If some values have already been defined with the help of the above-mentioned method, direct assignment will rewrite them:

$$("multi").config.animate.type = "flip";
$$("multi").config.animate.subtype = "vertical";

3 . By means of the show() method. The changes will be applied once while showing the stated view. Then, the default values (initial or 'rewritten') will be used.

 $$(id).show({type:"flip", subtype:"horizontal"})

Related sample: Animated Multiview

Related sample: Paging Animation Types

Animating View Initialization

The moment of a Webix view initialization can be animated as well. It works for views created dynamically in the existing Webix layout.

To instantiate the component with animation, you should call the webix.ui.animate() method instead of the standard webix.ui():

webix.ui.animate(obj, parent, config);

where:

obj (object) - configuration of the new component;
replace (string, number) - ID of the component that will be replaced by the one stated in obj;
config (object) - optional, animation configuration, described above.
If not defined the { type:"slide", direction:"left" } animation will be used.

 webix.ui.animate({
    id:"aboutView", template:"About page...",
}, $$("listView"));

Related sample: Manual View Recreating