Visual Element API

Detailed listing of all visual element related features of Svelte Motion. A lot of the wording is directly copied from framer-motion, Copyright (c) 2018 Framer B.V. MIT License.

DragControlsProps

{transformPagePoint?: TransformPoint2D } & DraggableProps

FlatTree

class

• add: (child: WithDepth ) => void
  
• remove: (child: WithDepth ) => void
  
• forEach: (callback: (child: WithDepth ) => void) => void
  

JobSetter

(job: () => void) => void

ReadWrites

(read: JobSetter , write: JobSetter ) => void

ScrapeMotionValuesFromProps

(props: MotionProps ) => {[key: string]: MotionValue | string | number

VisualElement

<Instance = any, RenderState = any> {
treeType: string;
depth: number;
parent?: VisualElement ;
children: Set<VisualElement >;
variantChildren?: Set<VisualElement >;
current: Instance | null;
layoutTree: FlatTree ;
manuallyAnimateOnMount: boolean;
blockInitialAnimation?: boolean;
presenceId: number | undefined;
projection: TargetProjection ;
isProjectionReady: () => boolean;
isMounted(): boolean;
mount(instance: Instance): void;
unmount(): void;
isStatic?: boolean;
getInstance(): Instance | null;
path: VisualElement [];
sortNodePosition(element: VisualElement ): number;
addVariantChild(child: VisualElement ): undefined | (() => void);
getClosestVariantNode(): VisualElement | undefined;
setCrossfader(crossfader: Crossfader ): void;
layoutSafeToRemove?: () => void;
animateMotionValue?: typeof startAnimation;
/**
* Visibility
*/
isVisible?: boolean;
setVisibility(visibility: boolean): void;
hasValue(key: string): boolean;
addValue(key: string, value: MotionValue <any>): void;
removeValue(key: string): void;
getValue(key: string): undefined | MotionValue ;
getValue(key: string, defaultValue: string | number): MotionValue ;
getValue(key: string, defaultValue?: string | number): undefined | MotionValue ;
forEachValue(callback: (value: MotionValue , key: string) => void): void;
readValue(key: string): string | number | undefined | null;
setBaseTarget(key: string, value: string | number | null): void;
getBaseTarget(key: string): number | string | undefined | null;
getStaticValue(key: string): number | string | undefined;
setStaticValue(key: string, value: number | string): void;
getLatestValues(): ResolvedValues ;
scheduleRender(): void;
setProps(props: MotionProps ): void;
getProps(): MotionProps ;
getVariant(name: string): Variant | undefined;
getDefaultTransition(): Transition | undefined;
getVariantContext(startAtParent?: boolean): undefined | {
initial?: string | string[];
animate?: string | string[];
exit?: string | string[];
whileHover?: string | string[];
whileDrag?: string | string[];
whileFocus?: string | string[];
whileTap?: string | string[];
};
build(): RenderState;
syncRender(): void;
enableLayoutProjection(): void;
lockProjectionTarget(): void;
unlockProjectionTarget(): void;
rebaseProjectionTarget(force?: boolean, sourceBox?: AxisBox2D ): void;
measureViewportBox(withTransform?: boolean): AxisBox2D ;
getLayoutState: () => LayoutState ;
getProjectionParent: () => VisualElement | false;
getProjectionAnimationProgress(): MotionPoint ;
setProjectionTargetAxis(axis: "x" | "y", min: number, max: number, isRelative?: boolean): void;
startLayoutAnimation(axis: "x" | "y", transition: Transition , isRelative: boolean): Promise<any>;
stopLayoutAnimation(): void;
updateLayoutProjection(): void;
updateTreeLayoutProjection(): void;
resolveRelativeTargetBox(): void;
makeTargetAnimatable(target: TargetAndTransition , isLive?: boolean): TargetAndTransition ;
scheduleUpdateLayoutProjection(): void;
notifyLayoutReady(config?: SharedLayoutAnimationConfig ): void;
pointTo(element: VisualElement ): void;
resetTransform(): void;
restoreTransform(): void;
shouldResetTransform(): boolean;
isPresent: boolean;
presence: Presence ;
isPresenceRoot?: boolean;
prevDragCursor?: Point2D ;
prevViewportBox?: AxisBox2D ;
getLayoutId(): string | undefined;
animationState?: AnimationState ;
} & LifecycleManager

VisualElementConfig

<Instance, RenderState, Options> {
treeType?: string;
getBaseTarget?(props: MotionProps , key: string): string | number | undefined | MotionValue ;
build(visualElement: VisualElement <Instance>, renderState: RenderState, latestValues: ResolvedValues , projection: TargetProjection , layoutState: LayoutState , options: Options, props: MotionProps ): void;
sortNodePosition?: (a: Instance, b: Instance) => number;
makeTargetAnimatable(element: VisualElement <Instance>, target: TargetAndTransition , props: MotionProps , isLive: boolean): TargetAndTransition ;
measureViewportBox(instance: Instance, options: Options): AxisBox2D ;
readValueFromInstance(instance: Instance, key: string, options: Options): string | number | null | undefined;
resetTransform(element: VisualElement <Instance>, instance: Instance, props: MotionProps ): void;
restoreTransform(instance: Instance, renderState: RenderState): void;
render(instance: Instance, renderState: RenderState): void;
removeValueFromRenderState(key: string, renderState: RenderState): void;
scrapeMotionValuesFromProps: ScrapeMotionValuesFromProps ;
}

VisualElementDragControls

class

• start: (originEvent: MouseEvent | TouchEvent | PointerEvent, { snapToCursor, cursorProgress }?: DragControlOptions ) => void;
  Instantiate a PanSession for the drag gesture.
• resolveDragConstraints: () => void
  
• resolveRefConstraints: (layoutBox: AxisBox2D , constraints: Node) => {x:{min: number, max: number}, y: {min: number, max: number} }
  
• cancelDrag: () => void
  
• stop: (event : MouseEvent | TouchEvent | PointerEvent, info: PanInfo ) => void
  
• snapToCursor: (point: Point2D ) => boolean
  
• updateAxis: (axis: DragDirection , point: Point2D , offset?: Point2D ) => void
  Update the specified axis with the latest pointer information.
• updateAxisMotionValue: (axis: DragDirection , offset: Point2D ) => void
  
• updateVisualElementAxis: (axis: DragDirection , point: Point2D) => void
  
• setProps: (props: DragControlsProps & MotionProps ) => void
  
• stopMotion: () => void
  
• scalePoint: () => void
  
• updateConstraints: (onReady?: () => void) => void
  
• mount: (visualElement: VisualElement ) => () => void
  

VisualElementOptions

<Instance, RenderState = any> = {
visualState: VisualState <Instance, RenderState>;
parent?: VisualElement <unknown>;
variantParent?: VisualElement <unknown>;
snapshot?: ResolvedValues ;
presenceId?: number | undefined;
props: MotionProps ;
blockInitialAnimation?: boolean;
}

VisualState

<Instance, RenderState> {
renderState: RenderState;
latestValues: ResolvedValues ;
mount?: (instance: Instance) => void;
}

WithDepth

{depth: number}

batchLayout

(callback: ReadWrites ) => () => boolean;

flushLayout

() => void

snapshotViewportBox

(visualElement: VisualElement ) => void
Record the viewport box as it was before an expected mutation/re-render

visualElement

<Instance, MutableState, Options>(config: VisualElementConfig <Instance, MutableState, Options>) => (visualElementOptions: VisualElementOptions <Instance, any>, options?: Options) => VisualElement <Instance, any>