There are 10 defaults animations preloaded with Ixhibition, which use the naming
convention "ixb_#", where # is a number from 1 to 10. These defaults can be used using
the
loadOption
function.
The following show a demo for each option, as well providing the code (serving as
examples for creating and saving Options:
saveOption
).
ixb.saveOption("ixb_1", function(data){
return {
"segueType" : "stack",
"phaseInDuration" : 0,
"phaseInAnimations" : [],
"phaseOutDuration" : 0,
"phaseOutAnimations" : [],
"phaseOverlap" : 0,
"segueDuration" : "full",
"fadeIn" : false,
"fadeOut" : false
};
});
ixb.saveOption("ixb_2", function(data){
var pIn = ( data.phaseInDuration >= 1 ? data.phaseInDuration : 1 ),
pOut = ( data.phaseOutDuration >= 1 ? data.phaseOutDuration : 1);
pIn = pOut = Math.min(pIn, pOut);
return {
"segueType" : "vertical",
"phaseInDuration" : pIn,
"phaseInAnimations" : [],
"phaseOutDuration" : pOut,
"phaseOutAnimations" : [],
"phaseOverlap" : pIn,
"segueDuration" : "full",
"fadeIn" : false,
"fadeOut" : false
};
});
ixb.saveOption("ixb_3", function(data){
var pIn = ( data.phaseInDuration >= 1 ? data.phaseInDuration : 1 ),
pOut = ( data.phaseOutDuration >= 1 ? data.phaseOutDuration : 1);
pIn = pOut = Math.min(pIn, pOut);
return {
"segueType" : "vertical-reverse",
"phaseInDuration" : pIn,
"phaseInAnimations" : [],
"phaseOutDuration" : pOut,
"phaseOutAnimations" : [],
"phaseOverlap" : pIn,
"segueDuration" : "full",
"fadeIn" : false,
"fadeOut" : false
};
});
ixb.saveOption("ixb_4", function(data){
var pIn = ( data.phaseInDuration >= 1 ? data.phaseInDuration : 1 ),
pOut = ( data.phaseOutDuration >= 1 ? data.phaseOutDuration : 1);
pIn = pOut = Math.min(pIn, pOut);
return {
"segueType" : "horizontal",
"phaseInDuration" : pIn,
"phaseInAnimations" : [],
"phaseOutDuration" : pOut,
"phaseOutAnimations" : [],
"phaseOverlap" : pIn,
"segueDuration" : "full",
"fadeIn" : false,
"fadeOut" : false
};
});
ixb.saveOption("ixb_5", function(data){
var pIn = ( data.phaseInDuration >= 1 ? data.phaseInDuration : 1 ),
pOut = ( data.phaseOutDuration >= 1 ? data.phaseOutDuration : 1);
pIn = pOut = Math.min(pIn, pOut);
return {
"segueType" : "horizontal-reverse",
"phaseInDuration" : pIn,
"phaseInAnimations" : [],
"phaseOutDuration" : pOut,
"phaseOutAnimations" : [],
"phaseOverlap" : pIn,
"segueDuration" : "full",
"fadeIn" : false,
"fadeOut" : false
};
});
ixb.saveOption("ixb_6", function(data){
var pIn = ( data.phaseInDuration >= 1 ? data.phaseInDuration : 1 ),
pOut = ( data.phaseOutDuration >= 1 ? data.phaseOutDuration : 1);
pIn = pOut = Math.min(pIn, pOut);
return {
"segueType" : "stack",
"phaseInDuration" : pIn,
"phaseInAnimations" : [],
"phaseOutDuration" : pOut,
"phaseOutAnimations" : [],
"phaseOverlap" : (pIn / 2),
"segueDuration" : "full",
"fadeIn" : true,
"fadeOut" : true
};
});
ixb.saveOption("ixb_7", function(data){
var pIn = ( data.phaseInDuration >= 2 ? data.phaseInDuration : 2 ),
pOut = ( data.phaseOutDuration >= 2 ? data.phaseOutDuration : 2);
pIn = pOut = Math.min(pIn, pOut);
return {
"segueType" : "stack",
"phaseInDuration" : pIn,
"phaseInAnimations" : [],
"phaseOutDuration" : pOut,
"phaseOutAnimations" : [
{"transform" : "translateY(0)", "-webkit-transform" : "translateY(0)", "opacity" : "1"},
{"transform" : "translateY(10%)", "-webkit-transform" : "translateY(10%)", "opacity" : "0.8"},
{"transform" : "translateY(100%)", "-webkit-transform" : "translateY(100%)", "opacity" : "0"}
],
"phaseOverlap" : (pIn / 2),
"segueDuration" : "full",
"fadeIn" : true,
"fadeOut" : false
};
});
ixb.saveOption("ixb_8", function(data){
var pIn = ( data.phaseInDuration >= 2 ? data.phaseInDuration : 2 ),
pOut = ( data.phaseOutDuration >= 2 ? data.phaseOutDuration : 2);
pIn = pOut = Math.min(pIn, pOut);
return {
"segueType" : "vertical",
"phaseInDuration" : pIn,
"phaseInAnimations" : [
{"transform" : "scale(0.7, 0.7)", "-webkit-transform" : "scale(0.7, 0.7)"},
{"transform" : "scale(0.7, 0.7)", "-webkit-transform" : "scale(0.7, 0.7)"},
{"transform" : "scale(1, 1)", "-webkit-transform" : "scale(1, 1)"}
],
"phaseOutDuration" : pOut,
"phaseOutAnimations" : [
{"transform" : "scale(1.05, 1.05)", "-webkit-transform" : "scale(1.05, 1.05)"},
{"transform" : "scale(0.7, 0.7)", "-webkit-transform" : "scale(0.7, 0.7)"},
{"transform" : "scale(0.7, 0.7)", "-webkit-transform" : "scale(0.7, 0.7)"}
],
"phaseOverlap" : (pIn / 2),
"segueDuration" : "overlap",
"fadeIn" : false,
"fadeOut" : false
};
});
ixb.saveOption("ixb_9", function(data){
var pIn = ( data.phaseInDuration ? data.phaseInDuration : 1 ),
pOut = ( data.phaseOutDuration ? data.phaseOutDuration : 1);
pIn = pOut = Math.min(pIn, pOut);
return {
"segueType" : "horizontal",
"phaseInDuration" : pIn,
"phaseInAnimations" : [],
"phaseOutDuration" : pOut,
"phaseOutAnimations" : [
{
"transform-origin" : "right center", "-webkit-transform-origin" : "right center",
"transform" : "scaleX(1)", "-webkit-transform" : "scaleX(1)"
},
{
"transform-origin" : "right center", "-webkit-transform-origin" : "right center",
"transform" : "scaleX(0)", "-webkit-transform" : "scaleX(0)"
}
],
"phaseOverlap" : pIn,
"fadeIn" : false,
"fadeOut" : false
};
});
ixb.saveOption("ixb_10", function(data){
var pIn = ( data.phaseInDuration >= 2 ? data.phaseInDuration : 2 ),
pOut = ( data.phaseOutDuration >= 2 ? data.phaseOutDuration : 2);
pIn = pOut = Math.min(pIn, pOut);
return {
"segueType" : "stack",
"phaseInDuration" : pIn,
"phaseInAnimations" : [
{
"transform-origin" : "right center", "-webkit-transform-origin" : "right center",
"transform" : "scale(0.5, 0.5) rotateY(90deg)", "-webkit-transform" : "scale(0.5, 0.5) rotateY(90deg)"
},
{
"transform-origin" : "right center", "-webkit-transform-origin" : "right center",
"transform" : "scale(0.5, 0.5) rotateY(45deg)", "-webkit-transform" : "scale(0.5, 0.5) rotateY(45deg)"
},
{"transform" : "scale(1, 1)", "-webkit-transform" : "scale(1, 1)"}
],
"phaseOutDuration" : pOut,
"phaseOutAnimations" : [
{"transform" : "scale(1, 1)", "-webkit-transform" : "scale(1, 1)"},
{
"transform-origin" : "left center", "-webkit-transform-origin" : "left center",
"transform" : "scale(0.5, 0.5) rotateY(-45deg)", "-webkit-transform" : "scale(0.5, 0.5) rotateY(-45deg)"
},
{
"transform-origin" : "left center", "-webkit-transform-origin" : "left center",
"transform" : "scale(0.5, 0.5) rotateY(-90deg)", "-webkit-transform" : "scale(0.5, 0.5) rotateY(-90deg)"
}
],
"phaseOverlap" : pIn,
"fadeIn" : false,
"fadeOut" : false
};
)};