SvelteScene

SvelteScene

Source:

Methods

(static) useFrame(props) → {SvelteFrameResult}

Source:
Name Type Description
props Reactive.FrameReactiveData Can be used as frame, cssText, cssObject, etc.
Example
import { useFrame } from "svelte-scenejs";

const { cssText } = useFrame("text-align: center; transform: translate(10px, 10px);");

$cssText;
Returns:
- You can use Frame methods and cssText, cssObject, ...etc
Type
SvelteFrameResult

(static) useNowFrame(item) → {SvelteNowFrameResult}

Source:
Name Type Description
item SceneItem item to get the current frame
Example
import { useSceneItem, useNowFrame } from "svelte-scenejs";

const sceneItem = useSceneItem(...);
const { cssText } = useNowFrame(sceneItem);

$cssText;
Returns:
- You can use Frame methods and cssText, cssObject, ...etc State
Type
SvelteNowFrameResult

(static) useScene(propsopt, optionsopt) → {SvelteSceneResult}

Source:
Name Type Description
props? Reactive.SceneReactiveProps Items and properties that make up the scene
options? Partial<SceneOptions> Scene and Animator options
Example
import { useScene, useNowFrame } from "svelte-scenejs";

const scene = useScene({ ... });
const { cssText } = useNowFrame(scene.getItem("a1"));

$cssText
Returns:
- You can use Scene methods and Animator State
Type
SvelteSceneResult

(static) useSceneItem(propsopt, optionsopt)

Source:
Name Type Description
props? Reactive.SceneItemReactiveProps Items and properties that make up the scene item
options? Partial<SceneItemOptions> SceneItem and Animator options
Example
import { useSceneItem, useNowFrame } from "svelte-scenejs";

const item = useSceneItem({ ... });
const { cssText } = useNowFrame(item);

$cssText
Returns:
- You can use SceneItem methods and Animator State.

Type Definitions

SvelteFrameResult

Source:
See:
Properties:
cssText
cssText: string
Returns the frame's cssText.
cssObject
cssObject: Record<string, any>
Returns the frame's css object (kebab-case).
camelCasedCSSObject
camelCasedCSSObject: Record<string, any>
Returns an object in camel case type of frame. It can be used in React.
You can use reactive state and frame methods. To access the state in Svelte you need to add $ prefix.
Type:
  • TSInterface

SvelteNowFrameResult

Source:
To access the state in Svelte you need to add $ prefix.
Type:
  • TSInterface

SvelteSceneItemResult

Source:
Properties:
duration optional
duration?: number
The duration property defines how long an animation should take to complete one cycle.
fillMode optional
fillMode?: "none" | "forwards" | "backwards" | "both"
The fillMode property specifies a style for the element when the animation is not playing (before it starts, after it ends, or both).
iterationCount optional
iterationCount?: "infinite" | number
The iterationCount property specifies the number of times an animation should be played.
easing optional
easing?: array | function
The easing(timing-function) specifies the speed curve of an animation.
delay optional
delay?: number
The delay property specifies a delay for the start of an animation.
direction optional
direction?: "normal" | "reverse" | "alternate" | "alternate-reverse"
The direction property defines whether an animation should be played forwards, backwards or in alternate cycles.
totalDuration
totalDuration: number
Total time the animation played
To access the state in Svelte you need to add $ prefix.
Type:
  • TSInterface

SvelteSceneResult

Source:
Properties:
duration optional
duration?: number
The duration property defines how long an animation should take to complete one cycle.
fillMode optional
fillMode?: "none" | "forwards" | "backwards" | "both"
The fillMode property specifies a style for the element when the animation is not playing (before it starts, after it ends, or both).
iterationCount optional
iterationCount?: "infinite" | number
The iterationCount property specifies the number of times an animation should be played.
easing optional
easing?: array | function
The easing(timing-function) specifies the speed curve of an animation.
delay optional
delay?: number
The delay property specifies a delay for the start of an animation.
direction optional
direction?: "normal" | "reverse" | "alternate" | "alternate-reverse"
The direction property defines whether an animation should be played forwards, backwards or in alternate cycles.
totalDuration
totalDuration: number
Total time the animation played
To access the state in Svelte you need to add $ prefix.
Type:
  • TSInterface