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

There are a couple of ways to enable animation:

include 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:[]   
});

assign the values for the animate property 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";

use 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