Skip to content

Refactor Enter to pure CSS web component#113

Merged
gavmck merged 2 commits intomainfrom
refactor/pure-css-enter
Mar 23, 2026
Merged

Refactor Enter to pure CSS web component#113
gavmck merged 2 commits intomainfrom
refactor/pure-css-enter

Conversation

@gavmck
Copy link
Copy Markdown
Member

@gavmck gavmck commented Mar 20, 2026

Summary

  • Converts the dmd-enter component from a Lit component to a pure CSS web component, removing all JavaScript (LitElement, IntersectionObserver, render logic)
  • Uses animation-timeline: view() and animation-range for scroll-triggered entrance animations instead of IntersectionObserver
  • Uses CSS attr(delay s, 0s) to read the delay value directly from the HTML attribute

Browser support

  • animation-timeline: view() — Chrome 115+, Edge 115+, Firefox 131+. No Safari support yet.
  • attr() with type coercion — Chrome/Edge only. Delay gracefully degrades (no delay applied in unsupported browsers).

Test plan

  • Verify entrance animations (fade, fade-in-up, boing) play on mount
  • Verify enter-on-scroll triggers animation when scrolling element into view
  • Verify delay attribute delays the animation start
  • Verify fill attribute applies grid display
  • Test in Chrome/Edge and verify scroll-driven + delay behaviour
  • Test in Firefox and verify scroll-driven animation works
  • Test in Safari and verify graceful degradation (animation plays immediately without scroll trigger)

@mergify mergify bot requested review from a team and JoshTheWanderer and removed request for a team March 20, 2026 16:23
DanWebb
DanWebb previously approved these changes Mar 23, 2026
@mergify mergify bot requested a review from a team March 23, 2026 11:37
@gavmck gavmck merged commit 2060605 into main Mar 23, 2026
7 checks passed
@gavmck gavmck deleted the refactor/pure-css-enter branch March 23, 2026 14:06
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Development

Successfully merging this pull request may close these issues.

2 participants