presets

presets

Source:

Methods

Source:
Make a blinking effect.
Name Type Description
options StateInterface
Properties
Name Type Default Description
from? number 0 start opacity
to? number 1 end opacity
duration number animation's duration
Example
// import {blink} from "scenejs";
// blink({duration: 2});
Scene.blink({duration: 2});
// Same
new SceneItem({
	"0%": {
		opacity: 0,
	},
	"50%": {
		opacity: 1,
	},
	"100%": {
		opacity: 0,
	}
}, {
	duration: 2,
});

(static) fadeIn(options, options.fromopt, options.toopt, options.duration)

Source:
Make a fade in effect.
Name Type Description
options StateInterface
Properties
Name Type Default Description
from? number 0 start opacity
to? number 1 end opacity
duration number animation's duration
Example
// import {fadeIn} from "scenejs";
// fadeIn({duration: 2});
Scene.fadeIn({duration: 2});
// Same
new SceneItem({
	"0%": {
		opacity: 0,
	},
	"100%": {
		opacity: 1,
	}
}, {
	duration: 2,
});

(static) fadeOut(options, options.fromopt, options.toopt, options.duration)

Source:
Make a fade out effect.
Name Type Description
options StateInterface
Properties
Name Type Default Description
from? number 1 start opacity
to? number 0 end opacity
duration number animation's duration
Example
// import {fadeOut} from "scenejs";
// fadeOut({duration: 2});
Scene.fadeOut({duration: 2});
// Same
new SceneItem({
	"0%": {
		opacity: 1,
	},
	"100%": {
		opacity: 0,
	}
}, {
	duration: 2,
});

(static) set(property, values, options)

Source:
Use the property to create an effect.
Name Type Description
property string | string[] property to set effect
values any[] values of 100%
options StateInterface
Example
// import {set, blink} from "scenejs";
// set("opacity", [0, 1, 0], {duration: 2});
Scene.set("opacity", [0, 1, 0], {duration: 2});

// Same
Scene.blink({duration: 2});

// Same
new SceneItem({
	"0%": {
		opacity: 0,
	},
	"50%": {
		opacity: 1,
	}
	"100%": {
		opacity: 0,
	}
}, {
	duration: 2,
});

(static) transition(item1, item2, options, options.from, options.to, options.duration, options.timeopt)

Source:
Use the property to create an effect.
Name Type Description
item1 Scene.SceneItem Item that end effect
item2 Scene.SceneItem Item that start effect
options AnimatorOptions
Properties
Name Type Description
from object The starting properties of item1 and end properties of item2
to object The starting properties of item2 and end properties of item1
duration number animation's duration
time? number start time of item1
default: item1.getDuration() - duration
Example
// import {transition} from "scenejs";
transition(item1, item2, {
	from: {
		opacity: 1,
	},
	to: {
		opacity: 0,
	},
	duration: 0.1,
});

// Same
item1.set({
	[item1.getDuration() - 0.1]: {
		opacity: 1,
	},
	[item1.getDuration()]: {
		opacity: 0,
	}
});
item2.set({
	0: {
		opacity: 0,
	},
	0.1: {
		opacity: 1,
	}
});

(static) wipeIn(options, options.propertyopt, options.fromopt, options.toopt, options.duration)

Source:
Make a wipe in effect.
Name Type Description
options AnimatorOptions
Properties
Name Type Default Description
property? string | Array.<string> "left" position property
from? number | string "-100%" start position
to? number | string "0%" end position
duration number animation's duration
Example
// import {wipeIn} from "scenejs";
// wipeIn({property: "left", duration: 2});
Scene.wipeIn({property: "left", duration: 2});
// Same
new SceneItem({
	"0%": {
		"left": "-100%",
	},
	"100%": {
		"left": "0%",
	}
}, {
	duration: 2,
});

(static) wipeOut(options, options.propertyopt, options.fromopt, options.toopt, options.duration)

Source:
Make a wipe out effect.
Name Type Description
options AnimatorOptions
Properties
Name Type Default Description
property? string | Array.<string> "left" position property
from? number | string "0%" start position
to? number | string "100%" end position
duration number animation's duration
Example
// import {wipeOut} from "scenejs";
// wipeOut({property: "left", duration: 2});
Scene.wipeOut({property: "left", duration: 2});
// Same
new SceneItem({
	"0%": {
		"left": "0%",
	},
	"100%": {
		"left": "100%",
	}
}, {
	duration: 2,
});

(static) zoomIn(options, options.fromopt, options.toopt, options.duration)

Source:
Make a zoom in effect.
Name Type Description
options AnimatorOptions
Properties
Name Type Default Description
from? number 0 start zoom
to? number 1 end zoom
duration number animation's duration
Example
// import {set, zoomIn} from "scenejs";
// zoomIn({duration: 2});
Scene.zoomIn({duration: 2});
// Same
new SceneItem({
	"0%": {
		"transform": "scale(0)",
	},
	"100%": {
		"transform": "scale(1)",
	}
}, {
	duration: 2,
});

(static) zoomOut(options, options.fromopt, options.toopt, options.duration)

Source:
Make a zoom out effect.
Name Type Description
options AnimatorOptions
Properties
Name Type Default Description
from? number 1 start zoom
to? number 0 end zoom
duration number animation's duration
Example
// import {zoomOut} from "scenejs";
// zoomOut({duration: 2});
Scene.zoomOut({duration: 2});
// Same
new SceneItem({
	"0%": {
		"transform": "scale(1)",
	},
	"100%": {
		"transform": "scale(0)",
	}
}, {
	duration: 2,
});