Animate Presence API

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

AnimatePresence

<T extends {key: any}> SvelteComponent<Props: AnimatePresenceProps <T>, Events: {}, Slots: {default: {item: T | {key: 1}}>
`AnimatePresence` enables the animation of components that have been removed from the tree.

You can provide an array T[] to the `list` prop, where each item has to have a unique `key` attribute. Via slot prop `item` single items of the array are passed down to children, so that for each array item one component is rendered.

Alternatively you can leave `list` undefined and supply a boolean to the `show` prop. If `true`, the child is rendered.

You can sequence exit animations throughout a tree using variants.

If a child contains multiple Motion components with `exit` props, it will only unmount the child
once all Motion components have finished animating out. Likewise, any components using
usePresence all need to call `safeToRemove`.

AnimatePresenceProps

interface <T extends {key: any}>

• list?: T[]
  The data array for the items you want to render. Every Item needs a unique `key`.
  
  Alternatively, you can leave this undefined and supply `show` prop.
• show?: boolean
  Render the child when this is set to `true`, exit it when changed to `false`.
  
  Only used when list is undefined.
• initial?: boolean
  By passing `initial={false}`, AnimatePresence will disable any initial animations on children that are present when the component is first rendered.
• custom?: any
  When a component is removed, there's no longer a chance to update its props. So if a component's `exit` prop is defined as a dynamic variant and you want to pass a new `custom` prop, you can do so via AnimatePresence . This will ensure all leaving components animate using the latest data.
• onExitComplete?: () => void
  Fires when all exiting nodes have completed animating out.
• exitBeforeEnter?: boolean
  If set to `true`, AnimatePresence will only render one component at a tim

Presence

enum {
Entering = 0,
Present = 1,
Exiting = 2
}

useIsPresent

() => Readable<boolean>
Similar to usePresence , except `useIsPresent` simply returns whether or not the component is present. There is no `safeToRemove` function.

usePresence

() => Readable< AlwaysPresent | Present | NotPresent >
When a component is the child of AnimatePresence , it can use `usePresence` to access information about whether it's still present.

• AlwaysPresent: = [true, null]
  
• Present: = [ true ]
  
• NotPresent: = [false, SaveToRemove = () => void]
  If the first value of the array in the store goes to `false`, it means that a component has been removed the tree, but AnimatePresence won't really remove it until `safeToRemove` (the second entry in the array) has been called.