Interface TranslateOptions

Options for the translate animation.

interface TranslateOptions {
    selfOffset:
        | `${number}px, ${number}px`
        | `${number}px, ${number}rem`
        | `${number}px, ${number}%`
        | `${number}rem, ${number}px`
        | `${number}rem, ${number}rem`
        | `${number}rem, ${number}%`
        | `${number}%, ${number}px`
        | `${number}%, ${number}rem`
        | `${number}%, ${number}%`;
    translate:
        | `${number}px, ${number}px`
        | `${number}px, ${number}rem`
        | `${number}px, ${number}%`
        | `${number}rem, ${number}px`
        | `${number}rem, ${number}rem`
        | `${number}rem, ${number}%`
        | `${number}%, ${number}px`
        | `${number}%, ${number}rem`
        | `${number}%, ${number}%`;
}

Hierarchy

  • TranslationOffset
    • TranslateOptions

Properties

selfOffset translate

Properties

selfOffset

selfOffset:
    | `${number}px, ${number}px`
    | `${number}px, ${number}rem`
    | `${number}px, ${number}%`
    | `${number}rem, ${number}px`
    | `${number}rem, ${number}rem`
    | `${number}rem, ${number}%`
    | `${number}%, ${number}px`
    | `${number}%, ${number}rem`
    | `${number}%, ${number}%`

determines offsets to apply to both X and Y positional components

  • the offset is applied after alignment is applied
  • string in the form "CssLength, CssLength"

Example

{selfOffset: "12px, 50%"}

translate

translate:
    | `${number}px, ${number}px`
    | `${number}px, ${number}rem`
    | `${number}px, ${number}%`
    | `${number}rem, ${number}px`
    | `${number}rem, ${number}rem`
    | `${number}rem, ${number}%`
    | `${number}%, ${number}px`
    | `${number}%, ${number}rem`
    | `${number}%, ${number}%`

distances to travel in the X and Y directions

Example

{translate: "12px, 50%"} // move 12px right and 50% of own height down

Settings

Member Visibility

On This Page

Properties