Repository navigation
Improve animations and motion handling across the app - #54
Merged
Merged
Conversation
Fixes found while auditing motion, each covered by a new regression block (33–41) that fails on the previous code: - Collapsed entry cards showed a 35px strip of body and the whole Edit / Copy / Delete bar, inert and dead to taps. The grid-rows collapse held two padded children; it now holds one unpadded .entry-body-clip, and the content fades with the height. - Switching from one dialog to another rebuilt the overlay, so its fade-in restarted from 0 and the page blinked through. The overlay now stays, the card morphs between heights, and focus moves into the new dialog. - The Undo countdown bar never ran: its end state was set before it had been styled, so it sat at scaleX(0). It is a CSS animation now, inset inside the pill's rounded ends. - Toasts glide when a neighbour arrives or leaves instead of jumping a whole slot, and are removed when their exit ends, not 20ms before it. - Pinning the first coping card inserted a ~300px strip above the list and the starred card dropped 320px from under the finger. Re-renders that change content above the tap point now hold the tapped element still. - View and step changes jump to the top under the fade-in instead of smooth-scrolling through the new content; re-tapping the current tab still scrolls smoothly. Saving an entry lands at the top of the journal. - Deleting an entry closes its space with a placeholder; Undo, new capture rows and the pivot follow-up grow their slot open. - Patterns charts draw in on arrival (their transitions could never run) and don't replay on a background render. - The PIN field shakes once per failed try, not again on "Forgot PIN?", and unlocking fades the lock screen off. Details: every hard-coded duration now uses the motion tokens, and JS timers read the tokens instead of copying them. Hover lifts are gated to devices that really hover, so cards and buttons don't stay raised after a tap. The theme switch cross-fades where View Transitions exist. The service worker update / precache banners and the install panel use the theme tokens and the app's type instead of inline system-ui styles, and slide in and out. Print output skips animations and transient chrome. Reduced motion takes the instant path everywhere, delays included. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01Vg8Y3obwoznhSjSfg1zgSj
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
This PR significantly enhances the app's animation system and motion handling, making transitions smoother and more responsive to user interactions and accessibility preferences.
Summary
Refactored the animation system to use Web Animations API for better control and consistency, improved toast notifications with proper slot animations, enhanced dialog transitions, and added comprehensive motion utilities that respect reduced-motion preferences.
Key Changes
Animation Infrastructure
animateSlot()function to smoothly grow/close element slots in stacks (used for toasts, entries, etc.) with proper handling of gaps, padding, borders, and marginsmotionMs()utility to read CSS motion duration tokens from styles, ensuring JS timers stay in sync with CSS transitionsmotionEase()utility to read the app's standard easing function for Web Animations callsmarkArrival(),fadeViewIn(),spotlight(),growIn(),closeGap(),closeGapAfterRender()Toast Notifications
.toast-countdown) that properly animates from full to emptydismissLockScreen()for smooth fade-out of lock screen when unlockingDialog & View Transitions
switchThemeSmoothly()to use View Transitions API for theme changes (Chromium 111+, Safari 18+).is-freshclass to views after navigation to trigger entrance animations for Patterns chartsEntry Cards & Collapsing
.entry-body-clipwrapper for proper opacity fade during collapserenderAnchored()to hold scroll position when pinning/unpinning coping cardsLock Screen
lockShakestate to shake PIN field once per failed attempt (not on "Forgot PIN?" click)Patterns Charts
CSS Updates
var(--dur-short),var(--dur-medium), etc.)@media (hover: hover)guards for hover states to prevent buttons/cards staying raised on touch devices.is-moving,.is-leaving,.is-arriving,.is-spotlitanimation classesbox-shadoweasing.gap-closerand slot animation stylesAccessibility
prefers-reduced-motionpreference (animations run at ~0ms)Notable Implementation Details
animation-durationrather than transition, solving the issue where the end state was set before the element was styledfill: "forwards"for "out" direction to keep closed state until removalhttps://claude.ai/code/session_01Vg8Y3obwoznhSjSfg1zgSj