services/mtg-online-drafter
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
b0dc734859f01d323323f9c9d72da31aefd5370a
mtg-online-drafter/docs/development/devlog/2025-12-17-010500_mobile_preview_animations.md

976 B
Raw Blame History

Mobile Preview Animations

Objective

Implement smooth "Phase In" and "Phase Out" animations for the mobile fullscreen card preview to replace the instant appear/disappear behavior.

Changes

  • Modified src/client/src/components/CardPreview.tsx:
    • Updated CardHoverWrapper to handle component unmounting with a delay (300ms) when the preview should be hidden on mobile.
    • Passed a new isClosing prop to FloatingPreview during this delay period.
    • In FloatingPreview (Mobile View):
      • Added transition-all duration-300 base classes.
      • Used conditional classes:
        • Entrance: animate-in fade-in zoom-in-95
        • Exit: animate-out fade-out zoom-out-95 (triggered when isClosing is true).
    • Fixed syntax errors introduced in previous steps (removed spaces in class names).

Result

On mobile, the card preview now fades and zooms in smoothly when long-pressed, and fades/zooms out smoothly when released.