Animate Shared Layout API

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

AnimateSharedLayout

SvelteComponent<Props: SharedLayoutProps , Events: {}, Slots: {default:{}}>
Wrap several Motion components with the `layout` or `layoutId` prop with this component, so that all react smoothly to the change of a single component.

CrossfadeAnimationOptions

{
lead?: VisualElement ;
follow?: VisualElement ;
prevValues?: ResolvedValues ;
crossfadeOpacity?: boolean;
preserveFollowOpacity?: boolean;
}

Crossfader

{
isActive(): boolean;
getCrossfadeState(element: VisualElement ): ResolvedValues | undefined;
toLead(transition?: Transition ): PlaybackControls ;
fromLead(transition?: Transition ): PlaybackControls ;
setOptions(options: CrossfadeAnimationOptions ): void;
reset(): void;
stop(): void;
getLatestValues(): ResolvedValues ;
}

PlaybackControls

{stop: () => void}
From popmotion , Copyright © 2019 Framer BV, MIT License

SharedLayoutAnimationConfig

{
visibilityAction?: VisibilityAction ;
originBox?: AxisBox2D ;
targetBox?: AxisBox2D ;
transition?: Transition ;
crossfadeOpacity?: MotionValue <number>;
shouldStackAnimate?: boolean;
onComplete?: () => void;
isRelative?: boolean;
prevParent?: VisualElement ;
}

SharedLayoutProps

{
type?: "switch" | "crossfade"
}
When combined with AnimatePresence , SharedLayoutProps can customise how to visually switch
between `layoutId` components as new ones enter and leave the tree.

- "switch" (default): The old `layoutId` component will be hidden instantly when a new one enters, and the new one will perform the full transition. When the newest one is removed, it will perform the full exit transition and then the old component will be shown instantly.
- "crossfade": The root shared components will crossfade as `layoutId` children of both perform the same transition.

VisibilityAction

enum { Hide = 0, Show = 1 }

createBatcher

() => SyncLayoutBatcher
Create a batcher to process VisualElements

createCrossfader

() => Crossfader