Togglers are functions, that are called on render step to animate item show and hide. Toggler structure:
"togglerName": {
"show": function(item, grid, ...other params) {
// Show animation code here
},
"hide": function(item, grid, ...other params) {
// Hide animation code here
}
}
grid.toggle("scale"); // Default toggler
grid.toggle("scaleWithFade");
grid.toggle("fade");
grid.toggle("visibility");
// Slide out all items from specified side
// of the grid relative to item position.
grid.toggle("slideLeft");
grid.toggle("slideRight");
grid.toggle("slideTop");
grid.toggle("slideBottom");
// Slide out all items from specified corner of the grid.
grid.toggle("slideLeftTop");
grid.toggle("slideLeftBottom");
grid.toggle("slideRightTop");
grid.toggle("slideRightBottom");
grid.toggle("slideTopLeft");
grid.toggle("slideTopRight");
grid.toggle("slideBottomLeft");
grid.toggle("slideBottomRight");
// Slide out first item from first specified side of the grid,
// second item from second specified side of the grid, etc...
grid.toggle("slideLeftThenRight");
grid.toggle("slideTopThenBottom");
// Slide out first item from first specified corner of the grid,
// second item from second specified corner of the grid, etc...
grid.toggle("slideLeftTopThenRightTop");
grid.toggle("slideTopThenBottom");
grid.toggle("slideLeftTopThenRightTop");
grid.toggle("slideTopLeftThenBottomLeft");
grid.toggle("slideLeftBottomThenRightBottom");
grid.toggle("slideTopRightThenBottomRight");
// Slide out items sequentially from 4 sides clockwise.
grid.toggle("slideClockwiseFromSides");
// Slide out items sequentially from 4 corners clockwise.
grid.toggle("slideClockwiseFromCorners");
// All slides can be called with 'WithFade' postfix like this:
grid.toggle("slideLeftWithFade");
// Notice: slide togglers will work correctly only with mirrored prepends.
// Default/reversed prepends are not supported.
// Rotate using similar CSS properties
grid.toggle("rotateX");
grid.toggle("rotateY");
grid.toggle("rotateZ");
// Rotate using rotate3d CSS property
grid.toggle("rotate3dX");
grid.toggle("rotate3dY");
grid.toggle("rotate3dZ");
grid.toggle("rotate3dXY");
grid.toggle("rotate3dXZ");
grid.toggle("rotate3dYZ");
grid.toggle("rotate3dXYZ");
// All rotates can be called with "WithFade" or "WithFadeOut" postfix like this:
grid.toggle("rotateXWithFade");
grid.toggle("rotateYWithFadeOut");
// You can set rotate parameters through settings:
// Be careful with horizontal rotates - too big perspective will overlap browser's
// scrollbar almost in all browsers(except Chrome) and cause scrolling 'jumps'.
// (It seems, that Chrome is the only browser which renders browsers scrollbar
// on higher layer than page content)
grid.set("rotatePerspective", "500px");
grid.set("rotateBackface", true);
grid.set("rotateBackface", false);
// angles array:
// [0] - front frame init, [1] - back frame init,
// [2] - front frame target, [3] - back frame target
grid.set("rotateAngles", [-180, -360, 180, 0]);
// You can use rotate function to trigger rotate animation
// anytime on any grid items.(Can be used for looped animations)
// Logo grid on homepage is using rotate to trigger
// rotate animation after each 6 seconds.
// 2-nd param is rotator toggler name.
// 3-rd and 4-rd params are optional.(batchSize and batchDelay)
grid.rotate(domCollection, "rotateX", 1, 100);
// Notice. All rotators are creating item clone and applying rotate animation to it.
// This is required because item should be wrapped in additional elements per scene and frames.