div-page-transformation-slide

Pages move without overlapping during pager scrolling.

Parameters

Parameters Description
type

string

Required parameter.

The value must always be slide.

interpolator

string

Animation speed adjustment. When the value is set to spring, it’s a damped oscillation animation truncated to 0.7, with the damping=1 parameter. Other values correspond to the Bezier curve:

  • linear — cubic-bezier(0, 0, 1, 1)
  • ease — cubic-bezier(0.25, 0.1, 0.25, 1)
  • ease_in — cubic-bezier(0.42, 0, 1, 1)
  • ease_out — cubic-bezier(0, 0, 0.58, 1)
  • ease_in_out — cubic-bezier(0.42, 0, 0.58, 1)
  • Possible values: linear, ease, ease_in, ease_out, ease_in_out, spring.

    Default value: ease_in_out.

    next_page_alpha

    number

    Minimum transparency of the next page, within the range [0, 1], when scrolling through the pager. The following page is always the page with a larger ordinal number in the items list, regardless of the scrolling direction.

    Restriction for the value x: x >= 0.0 && x <= 1.0.

    Default value: 1.0.

    next_page_scale

    number

    Scaling the next page during pager scrolling. The following page is always the page with a larger ordinal number in the items list, regardless of the scrolling direction.

    Restriction for the value x: x >= 0.0.

    Default value: 1.0.

    previous_page_alpha

    number

    Minimum transparency of the previous page, in the range [0, 1], during pager scrolling. The previous page is always the page with a lower ordinal number in the items list, regardless of the scrolling direction.

    Restriction for the value x: x >= 0.0 && x <= 1.0.

    Default value: 1.0.

    previous_page_scale

    number

    Scaling the previous page during pager scrolling. The previous page is always the page with a lower ordinal number in the items list, regardless of the scrolling direction.

    Restriction for the value x: x >= 0.0.

    Default value: 1.0.

    JSON
    {
      type*: "slide",
      interpolator: "string",
      next_page_alpha: "number",
      next_page_scale: "number",
      previous_page_alpha: "number",
      previous_page_scale: "number"
    }