Skip to content

ui(motion): harmonize compound slide animations and unify transitions in workspace morphs #631

Description

@ZhuchkaTriplesix

Motivation & Problem

In WorkspacePanel._homeObjectMorph, transitions between Home (Server stats / SQL) and an Object (Table / View / Routine) combine two separate slide animations:

  • QueryaSwitchingBody applies horizontal slide (Offset(0.015, 0)).
  • The nested child is wrapped in QueryaFadeSlide, which applies vertical slide (Offset(0, 0.02)).
    When morphing between Home and an Object, the content translates diagonally on both axes simultaneously with separate curve evaluation, causing a noticeable visual wobble rather than a clean, fluid motion.

Additionally, transition styles across the workspace lack uniformity:

  • Server ↔ SQL tabs use pure opacity crossfade (QueryaCrossFadeStack, 200ms).
  • Table A ↔ Table B uses vertical fade-slide (QueryaFadeSlide, 200ms).
  • Home ↔ Object uses compound dual-axis slide.
  • Mongo / Redis Explorer ↔ Stats uses no animation at all (hard cut).

Proposed Scope & Fluid Motion

  1. Harmonize _homeObjectMorph:
    • Eliminate conflicting multi-axis slides. Use a single directional slide (e.g. subtle vertical Offset(0, 0.015) or pure crossfade for level-0 to level-1 hierarchy) across the morph layers.
    • Coordinate the entrance of new objects with the exit of the home view so both elements move in harmony along the same vector.
  2. Unified Motion Hierarchy:
    • Tab switches on the same level: pure opacity crossfade (QueryaCrossFadeStack).
    • Hierarchical drill-downs (Server → Table, or Database → Collection): single consistent forward/backward slide with QueryaMotion.enter / QueryaMotion.exit curves.
    • Sibling switches (Table A → Table B): subtle vertical cross-slide without layout shift.
  3. Accessibility:
    • Ensure QueryaMotionScope is strictly respected: on reduced motion, duration is halved and slide offsets are minimized; on off, transitions are instant.

Acceptance Criteria

  • No diagonal or dual-axis translation when switching between Home and Table views.
  • Motion is smooth, predictable, and feels like a single unified physical surface.
  • Widget layout and golden tests pass with no overflow or animation glitches.
  • Motion levels (Full, Reduced, Off) apply deterministically.

Metadata

Metadata

Assignees

No one assigned

    Labels

    enhancementNew feature or requestmotionAnimation system, transitions, motion tokensuiUser interface components and widgetsuxUser experience, keyboard shortcuts and interactions

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions