effects - Documentation

Source:

effects.ts, line 6

Methods

(static) zoomOut(optionsopt, options.fromopt, options.toopt, options.duration) → {SceneItem}

Source:

effects.ts, line 103

Make a zoom out effect.

Name Type Default Description

options?

Partial<EffectState>

{}

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/effects";
// Scene.zoomOut({ duration: 2 });
zoomOut({ duration: 2 });

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

Returns:

Type: SceneItem

(static) zoomIn(optionsopt, options.fromopt, options.toopt, options.duration) → {SceneItem}

Source:

effects.ts, line 75

Make a zoom in effect.

Name Type Default Description

options?

Partial<EffectState>

{}

Properties

Name	Type	Default	Description
`from`?	number	`0`	start zoom
`to`?	number	`1`	end zoom
`duration`	number		animation's duration

Example

import { zoomIn } from "@scenejs/effects";

// Scene.zoomIn({duration: 2});
zoomIn({duration: 2});

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

Returns:

Type: SceneItem

(static) wipeOut(optionsopt, options.propertyopt, options.fromopt, options.toopt, options.duration) → {SceneItem}

Source:

effects.ts, line 160

Make a wipe out effect.

Name Type Default Description

options?

Partial<EffectState>

{}

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/effects";
// Scene.wipeOut({property: "left", duration: 2});
wipeOut({property: "left", duration: 2});
// Same
new SceneItem({
	"0%": {
		"left": "0%",
	},
	"100%": {
		"left": "100%",
	}
}, {
	duration: 2,
});

Returns:

Type: SceneItem

(static) wipeIn(optionsopt, options.propertyopt, options.fromopt, options.toopt, options.duration) → {SceneItem}

Source:

effects.ts, line 132

Make a wipe in effect.

Name Type Default Description

options?

Partial<EffectState>

{}

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/effects";

// Scene.wipeIn({ property: "left", duration: 2 });
wipeIn({ property: "left", duration: 2 });
// Same
new SceneItem({
	"0%": {
		"left": "-100%",
	},
	"100%": {
		"left": "0%",
	}
}, {
	duration: 2,
});

Returns:

Type: SceneItem

(static) typing(optionsopt, options.propertyopt, options.textopt, options.startopt, options.endopt, options.prefixopt, options.suffixopt) → {SceneItem}

Source:

effects.ts, line 674

Make a typing effect that is typed one character at a time like a typewriter. The `html` property only works with javascript animations. The `content` property of CSS animations works only on desktop Chrome.

Name Type Default Description

options?

Partial<EffectState>

{}

Properties

Name	Type	Default	Description
`property`?	string \| Array.<string>	`["html"]`	Property to apply the typing animation
`text`?	string	`""`	Text to type
`start`?	number	`0`	Index to start typing
`end`?	number	`0`	Index to end typing
`prefix`?	number	`""`	The prefix string to be attached before text
`suffix`?	number	`""`	The suffix string to be attached after text

Example

import { typing } from "@scenejs/effects";

typing({ text: "Make a typing effect with Scene.js."})
  .setDuration(7)
  .setSelector(".target")
  .play();

Returns:

Type: SceneItem

(static) transition(item1, item2, transitionObject) → {void}

Source:

effects.ts, line 196

Switch the scene from `item1` to `item2`.

Name	Type	Description
`item1`	SceneItem	Item that end effect
`item2`	SceneItem	Item that start effect
`transitionObject`	SceneItem \| IObject<any>	`transitionItem` or `transitionObject` to switch from `item1` to `item2`

Example

import Scene from "scenejs";
import {transition, zoomIn, fadeOut} from "@scenejs/effects";

var transitionScene = new Scene({
  "[data-transition] .target": {},
  "[data-transition] .target2": {},
}, {
  delay: 0.1,
  easing: "ease-in-out",
  selector: true,
});
Scene.transition(
  transitionScene.getItem("[data-transition] .target"),
  transitionScene.getItem("[data-transition] .target2"),
  {
    0:  [
      fadeOut({ duration: 1 }),
      zoomIn({ from: 1, to: 2, duration: 1 }),
      "opacity: 1; transform: rotate(0deg)",
    ],
    1: "opacity: 0; transform: rotate(40deg)",
  }
);
transitionScene.play();

Returns:

Type: void

(static) shakeY(optionsopt, options.yopt, options.frequencyopt)

Source:

effects.ts, line 568

Make a vertical shake effect.

Name Type Default Description

options?

Partial<EffectState>

{}

Properties

Name	Type	Default	Description
`y`?	string \| Array.<string>	`["-5px", "5px"]`	range of y's movement
`frequency`?	number	`10`	frequency of shakes

Example

import { shake, shakeY } from "@scenejs/effects";

// shakeY({ y: ["-5px", "5px"], frequency: 10 })
shakeY()
  .setDuration(0.2)
  .setIterationCount("infinite")
  .setSelector("[data-shakey] .target")
  .play();

shake({
    properties: {
      transform: {
        // translateY: ["-5px", "5px"]
        translateY: "5px",
      },
    },
    frequency: 10,
  })
  .setDuration(0.2)
  .setIterationCount("infinite")
  .setSelector("[data-shakey] .target2")
  .play();

(static) shakeX(optionsopt, options.xopt, options.frequencyopt)

Source:

effects.ts, line 522

Make a horizontal shake effect.

Name Type Default Description

options?

Partial<EffectState>

{}

Properties

Name	Type	Default	Description
`x`?	string \| Array.<string>	`["-5px", "5px"]`	range of x's movement
`frequency`?	number	`10`	frequency of shakes

Example

import { shake, shakeX } from "@scenejs/effects";

// shakeX({ x: ["-5px", "5px"], frequency: 10 })
shakeX()
  .setDuration(0.2)
  .setIterationCount("infinite")
  .setSelector("[data-shakex] .target")
  .play();

shake({
    properties: {
      transform: {
        // translateX: ["-5px", "5px"]
        translateX: "5px",
      },
    },
    frequency: 10,
  })
  .setDuration(0.2)
  .setIterationCount("infinite")
  .setSelector("[data-shakex] .target2")
  .play();

(static) shake(optionsopt, options.propertiesopt, options.frequencyopt) → {SceneItem}

Source:

effects.ts, line 448

Make a shake effect.

Name Type Default Description

options?

Partial<EffectState>

{}

Properties

Name	Type	Default	Description
`properties`?	object \| string	`"transform: translateX(5px) translateY (5px) rotate(5deg)"`	The range of properties to be moved.
`frequency`?	number	`10`	frequency of shakes

Example

import { shake } from "@scenejs/effects";

shake()
  .setDuration(0.2)
  .setIterationCount("infinite")
  .setSelector("[data-shake] .target")
  .play();

shake({
    properties: {
      transform: {
        // translateX: ["-5px", "5px"]
        translateX: "5px",
        translateY: ["-5px", "5px"],
        rotate: "5deg",
        // set range
        scale: [0.8, 1],
      },
    },
    frequency: 10,
  })
  .setDuration(0.2)
  .setIterationCount("infinite")
  .setSelector("[data-shake] .target2")
  .play();

Returns:

Type: SceneItem

(static) kineticFrame(optionsopt, options.leftPropertyopt, options.topPropertyopt, options.leftopt, options.topopt) → {Frame}

Source:

effects.ts, line 638

Create a frame that moves the origin in the opposite direction as it moves through the transform.

Name Type Default Description

options?

Partial<KineticType>

{}

Properties

Name	Type	Default	Description
`leftProperty`?	string \| Array.<string>	`["transform", "translateX"]`	Property name corresponding to left
`topProperty`?	string \| Array.<string>	`["transform", "translateY"]`	Property name corresponding to top
`left`?	string \| number	`"0px"`	Numbers to move horizontally
`top`?	string \| number	`"0px"`	Numbers to move vertically

Example

import { SceneItem } from "scenejs";
import { kineticFrame } from "@scenejs/effects";

new SceneItem({
    0: kineticFrame({ left: "0px", top: "0px" }).set({ transform: "rotate(0deg)"}),
    1: kineticFrame({ left: "50px", top: "0px" }).set({ transform: "rotate(90deg)"}),
    2: kineticFrame({ left: "50px", top: "50px" }).set({ transform: "rotate(180deg)"}),
    3: kineticFrame({ left: "0px", top: "50px" }).set({ transform: "rotate(270deg)"}),
    4: kineticFrame({ left: "0px", top: "0px" }).set({ transform: "rotate(360deg)"}),
}).setSelector(".target").play();

Returns:

Type: Frame

(static) keyframer(name, options) → {SceneItem}

Source:

effects.ts, line 614

See:

https://github.com/daybrush/keyframer

Make the CSS Keyframes Playable Animator(SceneItem).

Name	Type	Description
`name`	string	The name of the keyframes(`CSSKeyframesRule`) in the stylesheet(`CSSStyleSheet`).
`options`	Partial<SceneItemOptions>	SceneItem's options

Example

`@keyframes keyframes {
    0%, 7.69% {
      border-width:35px;
      transform: translate(-50%, -50%) scale(0);
    }
    84.61% {
      border-width: 0px;
      transform: translate(-50%, -50%) scale(1);
    }
    100% {
      border-width: 0px;
      transform: translate(-50%, -50%) scale(1);
    }
}`

import { keyframer } from "@scenejs/effects";

keyframer("keyframes", {
    duration: 1,
    iterationCount: "infinite",
    selector: ".rect",
}).play();

Returns:

Type: SceneItem

(static) flipY(optionsopt, options.yopt, options.backsideopt) → {SceneItem}

Source:

effects.ts, line 405

You can create an effect that flips horizontally around the y-axis.

Name Type Default Description

options?

Partial<EffectState>

{}

Properties

Name	Type	Default	Description
`y`?	number	`1`	Indicates the direction and amount of movement.
`backside`?	boolean	`false`	Indicates whether to start from the back.

Example

import { flip, flipY } from "@scenejs/effects";

// flip({ x: 0, y: 1, backside: false })
// flipY({ y: 1, backside: false })
flipY()
  .setDuration(1)
  .setSelector("[data-flipy] .target")
  .play();
flipY({ backside: true })
  .setDuration(1)
  .setSelector("[data-flipy] .target2")
  .play();

Returns:

Type: SceneItem

(static) flipX(optionsopt, options.xopt, options.backsideopt) → {SceneItem}

Source:

effects.ts, line 375

You can create an effect that flips vertically around the x-axis.

Name Type Default Description

options?

Partial<EffectState>

{}

Properties

Name	Type	Default	Description
`x`?	number	`1`	Indicates the direction and amount of movement.
`backside`?	boolean	`false`	Indicates whether to start from the back.

Example

import { flip, flipX } from "@scenejs/effects";

// flip({ x: 1, y: 0, backside: false })
// flipX({ x: 1, backside: false })
flipX()
  .setDuration(1)
  .setSelector("[data-flipx] .target")
  .play();
flipX({ backside: true })
  .setDuration(1)
  .setSelector("[data-flipx] .target2")
  .play();

Returns:

Type: SceneItem

(static) flip(optionsopt, options.xopt, options.yopt, options.backsideopt)

Source:

effects.ts, line 318

You can create a flip effect horizontally, vertically, or diagonally.

Name Type Default Description

options?

Partial<EffectState>

{}

Properties

Name	Type	Default	Description
`x`?	number	`1`	Indicates the direction and amount to be moved by the x-axis.
`y`?	number	`1`	Indicates the direction and amount to be moved by the y-axis.
`backside`?	boolean	`false`	Indicates whether to start from the back.

Example

import { flip } from "@scenejs/effects";

// flip({ x: 1, y: 1, backside: false })
flip()
  .setDuration(1)
  .setSelector("[data-flip] .target")
  .play();
flip({ backside: true })
  .setDuration(1)
  .setSelector("[data-flip] .target2")
  .play();

(static) fadeOut(optionsopt, options.fromopt, options.toopt, options.duration) → {SceneItem}

Source:

effects.ts, line 266

Make a fade out effect.

Name Type Default Description

options?

Partial<EffectState>

{}

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/effects";
// Scene.fadeOut({duration: 2});
fadeOut({duration: 2});
// Same
new SceneItem({
	"0%": {
		opacity: 1,
	},
	"100%": {
		opacity: 0,
	}
}, {
	duration: 2,
});

Returns:

Type: SceneItem

(static) fadeIn(optionsopt, options.fromopt, options.toopt, options.duration) → {SceneItem}

Source:

effects.ts, line 239

Make a fade in effect.

Name Type Default Description

options?

Partial<EffectState>

{}

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/effects";
// Scene.fadeIn({duration: 2});
fadeIn({duration: 2});
// Same
new SceneItem({
	"0%": {
		opacity: 0,
	},
	"100%": {
		opacity: 1,
	}
}, {
	duration: 2,
});

Returns:

Type: SceneItem

(static) blink(optionsopt, options.fromopt, options.toopt, options.duration) → {SceneItem}

Source:

effects.ts, line 295

Make a blinking effect.

Name Type Default Description

options?

Partial<EffectState>

{}

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/effects";
// Scene.blink({duration: 2});
blink({duration: 2});
// Same
new SceneItem({
	"0%": {
		opacity: 0,
	},
	"50%": {
		opacity: 1,
	},
	"100%": {
		opacity: 0,
	}
}, {
	duration: 2,
});

Returns:

Type: SceneItem

Type Definitions

EffectState

Source:

types.ts, line 9

See:

SceneItemState

Properties:

[key: string]

[key: string]: any

interface EffectState extends SceneItemState

Type:

TSInterface

KineticType

Source:

types.ts, line 16

Properties:

leftProperty

leftProperty: string | string[]

topProperty

topProperty: string | string[]

left

left: string | number

top

top: string | number

Type:

TSInterface