Layout

Easily animate changes in css with the layout prop

In the firs example, only the justify-content value changes in css. Only a prop layout is neccessary for the smooth animation of the switch-handle.

One change in the syntax is necessary, if you compare to the React original of this example: The Motion component is outside of the outer div. The Svelte and React update orders are a bit different, if the Motion component was inside the outer div, it would not be informed in time about the change.

Optional update parameter

A difference between React and Svelte is that a prop change triggers all child components to re-render in React, while only directly affected components change in Svelte. If you need to inform a Motion component with the layout prop about a change, you can supply the prop update. The value is not important, when it changes the Motion component will remeasure its target.

Shared Layout

AnimateSharedLayout is a component, that coordinates the behavior of several Motion components with the layout prop. When a layout-descendant of it changes, the AnimateSharedLayout notifies all of the descendants, so that the complete layout animates smoothly.

Here is also a REPL, demonstrating that the layout prop also plays very well with Sveltes stock transitions.

Layout ID

Scale correction

Child elements might be affected by the animation of one of its parents. If that effect is not wanted, you can wrap the child with a Motion component and set layout-prop to true. Apparently, there is an interferring bug with scroll:

Crossfade

When two targets of a layoutId are different, you can set the type property of the AnimateSharedLayout component to “crossfade”. Svelte motion tries to gently fade over from one presence to the next. Click on a dot in the example below and see how the border of the opening menu smoothly appears an disappears on exit.

<AnimateSharedLayout type="crossfade">

Also in this example, you can see how easy you can animat reordering of css grids. Simply Wrap the grid in both a AnimateSharedLayout component and a Motion component and also wrap all grid items in a Motion component. Don’t forget the layout prop on every Motion. The data about most eponymous mathematicians is from wikidata.