Measure API

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

AnimationCompleteListener

(definition: AnimationDefinition ) => void

AnimationStartListener

() => void

Axis

{ min:number, max: number }
A description of a single axis using non-axis specific terms to denote the min and max
value of any axis.

AxisBox2D

{ x: Axis , y: Axis }
A description of a bounding box describing each axis individually. This allows us
to treate each axis generically.

AxisDelta

interface
The transform delta that, when applied to Axis a will visually transform it to Axis b

• translate: number
  
• scale: number
  
• origin: number
  
• originPoint: number
  

BeforeLayoutMeasureListener

(layout: AxisBox2D ) => void

BoundingBox2D

interface
A typically user-facing description of a bounding box using traditional t/l/r/b

• top, left, bottom, right: number
  

BoxDelta

{ x: AxisDelta , y: AxisDelta }
The transform delta that, when applied to Box a will visually transform it to Box b.

LayoutAnimationCompleteListener

() => void

LayoutMeasureListener

(layout: AxisBox2D , prevLayout: AxisBox2D ) => void

LayoutProps

interface

• layout?: boolean | "position"
  If `true`, this component will automatically animate to its new position when its layout changes.
  
  This will perform a layout animation using performant transforms. Part of this technique involved animating an element's scale. This can introduce visual distortions on children, `boxShadow` and `borderRadius`.
  
  To correct distortion on immediate children, add `layout` to those too.
  
  `boxShadow` and `borderRadius` will automatically be corrected if they are already being animated on this component. Otherwise, set them directly via the `initial` prop.
  
  If `layout` is set to `"position"`, the size of the component will change instantly and only its position will animate.
• layoutId?: string
  Enable shared layout transitions between components for children of AnimateSharedLayout .
  
  When a component with a layoutId is removed from the React tree, and then added elsewhere, it will visually animate from the previous component's bounding box and its latest animated values.
  
  If the previous component remains in the tree it will either get hidden immediately or, if `type="crossfade"` is set on AnimateSharedLayout , it will crossfade to the new component.
• onLayoutAnimationComplete?: () => void
  A callback that will fire when a layout animation on this component completes.

LayoutState

interface
Data about the element's current layout. Contains the latest measurements
as well as the latest calculations of how to project from this layout
into a given TargetProjection.

• isHydrated: boolean
  Whether we've hydrated this state with the latest measurements.
• layout: AxisBox2D
  The latest viewport-box measurements of the element without transforms.
• layoutCorrected: AxisBox2D
  The measured viewport box as corrected by parent transforms up the visual element tree.
• treeScale: Point2D
  The cumulative tree scale for this element. This starts at 1 per axis.
  When a transform is applied to an element we also apply it to the tree scale.
  The final value is used for scale-correcting values like border-radius, as well as ensuring calculated CSS translations are applied to compensate for this scale.
• delta: BoxDelta
  A mutable piece of data that we write into the latest projection calculations that, when applied to an element, will project it from its layoutCorrected box into the provided TargetProjection.target
• deltaFinal: BoxDelta
  A mutable piece of data that will project an element from layoutCorrected into TargetProjection.targetFinal.
• deltaTransform: string
  The latest generated delta transform. This is used to compare against the previously-generated transform to determine whether we need to trigger a render.

LayoutUpdateListener

(layout: AxisBox2D , prevLayout: AxisBox2D , config?: SharedLayoutAnimationConfig ) => void

OnViewportBoxUpdate

(box: AxisBox2D , delta: BoxDelta ) => void

Point2D

{x: number, y: number}
A description of a two-dimensional point

RenderListener

() => void

SetAxisTargetListener

() => void

TargetProjection

interface
Represents the size and position we want to project a given visual element into.

• isEnabled: boolean
  Whether we should attempt to project into this target box.
• isHydrated: boolean
  Whether we should attempt to project into this target box.
• isTargetLocked: boolean
  Whether this target box is locked. We might want to lock the box, for
  instance if the user is dragging or animating it. Otherwise
  we want to rebase the target box ontop of the measured layout.
• relativeTarget?: AxisBox2D
  The parent-relative box we want to derive the viewport box from, if defined. This is currently all relative to the top/left of the parent box, but could be expanded in the future.
• target: AxisBox2D
  The viewport-relative box we want to project the element into.
• targetFinal: AxisBox2D
  The viewport-relative box we want to project the element into after it's had x/y/scale transforms applied.

TransformPoint2D

(point: Point2D ) => Point2D

UpdateListener

(latest: ResolvedValues ) => void