effects

effects

Source:

Methods

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

Source:
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:
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:
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:
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:
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:
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:
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:
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:
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:
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:
See:
Make the CSS Keyframes Playable Animator(SceneItem).
Name Type Description
name string The name of the keyframes(`CSSKeyframes​Rule`) 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:
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:
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:
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:
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:
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
Source:
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:
See:
Properties:
[key: string]: any
interface EffectState extends SceneItemState
Type:
  • TSInterface

KineticType

Source:
Properties:
leftProperty: string | string[]
topProperty: string | string[]
left: string | number
top
top: string | number
Type:
  • TSInterface