Context API

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

LayoutGroupContext

() => Writable<string | null>
This is both the context target object and fallback, since Svelte Contexts don't have a default.

Usage:

import { LayoutGroupContext } from 'svelte-motion'
import { getContext } from 'svelte'

const LayoutGroupContext = getContext(LayoutGroupContext) || LayoutGroupContext()

MotionConfigContext

() => Writable<MotionConfigContextObject >
This is both the context target object and fallback, since Svelte Contexts don't have a default.

Usage:

import { MotionConfigContext } from 'svelte-motion'
import { getContext } from 'svelte'

const motionConfigContext = getContext(MotionConfigContext) || MotionConfigContext()

MotionConfigContextObject

interface

• transition: Transition
  Defines a new default transition for the entire tree.

PresenceContext

() => Writable<PresenceContextProps | null>
This is both the context target object and fallback, since Svelte Contexts don't have a default.

Usage:

import { PresenceContext } from 'svelte-motion'
import { getContext } from 'svelte'

const PresenceContext = getContext(PresenceContext) || PresenceContext()

PresenceContextProps

{
id: number;
isPresent: boolean;
register: (id: number) => () => void;
onExitComplete?: (id: number) => void;
initial?: false | VariantLabels ;
custom?: any;
}

SharedLayoutContext

() => Writable<SyncLayoutBatcher | SharedLayoutSyncMethods >
This is both the context target object and fallback, since Svelte Contexts don't have a default.

Usage:

import { SharedLayoutContext } from 'svelte-motion'
import { getContext } from 'svelte'

const SharedLayoutContext = getContext(SharedLayoutContext) || SharedLayoutContext()

SharedLayoutSyncMethods

SyncLayoutBatcher

{
add: (child: VisualElement ) => void;
flush: (handler?: SyncLayoutLifecycles ) => void;
}
The exposed API for children to add themselves to the batcher and to flush it.

SyncLayoutLifecycles

{
layoutReady: (child: VisualElement ) => void;
parent?: VisualElement ;
}
Handlers for batching sync layout lifecycles. We batches these processes to cut down on layout thrashing