Skip to content

Add a new CoverflowMode.cylinder preset option to the package. #6

Description

@GalaxyPhoenix716

Visual Behavior:
This mode projects the carousel cards onto a virtual 3D cylinder. The rotation behavior adapts automatically depending on the carousel's scrollDirection:

  1. For Horizontal Scrolling (scrollDirection == Axis.horizontal):

    • The cylinder rotates around a vertical axis (like a carousel / merry-go-round).
    • Y-axis Rotation (Yaw): Cards rotate left and right as they move away from the center, looking like they are wrapping around a vertical drum.
    • Z-depth Translation: Cards translate backwards into the screen (Z-depth) on both sides of the focal point.
  2. For Vertical Scrolling (scrollDirection == Axis.vertical):

    • The cylinder rotates around a horizontal axis (like a slot machine reel or Ferris wheel).
    • X-axis Rotation (Pitch): Cards tilt forward and backward as they scroll up and down.
    • Z-depth Translation: Cards translate backwards into the screen (Z-depth) as they slide away from the center.

Example Use Case:

  • Horizontal: Rotating 3D carousel menus, circular dashboards.
  • Vertical: Slot machine reels, date pickers, rolling lists.

Metadata

Metadata

Assignees

No one assigned

    Labels

    enhancementNew feature or request

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions