Show HN: I made CSS-only glitch effect
muffinman.io
muffinman.io
site glitch doesn't work on the desktop FF too, not in any of three, with various staleness but nothing too old
works on the CodePen, but if I replace CSS there with the response of glitch.css from the Network tab - it blanks and never shows anything
no ad-blockers, no errors while loading
GET https://muffinman.io/js/posts/glitch/parser.js [HTTP/1.1 200 OK 138ms]
Uncaught TypeError: animation is undefined
parse https://muffinman.io/js/posts/glitch/parser.js:263
Monorail https://muffinman.io/js/posts/glitch/monorail.js:327
<anonymous> https://muffinman.io/js/posts/glitch/index.js:10
<anonymous> https://muffinman.io/js/posts/glitch/index.js:5
FF 138.0.1 (May 1, 2025) const animation = animationElement.getAnimations()[0];
As Firefox supports `getAnimations` since 2020, I figured something else is messing up with it. I've tried to enable "reduced motion" in the system settings and it broke the animation!It is because I had force-disabled all animations on the site when this option is enabled.
I patched it, it should work now. Thank you for your help!
EDIT: typo
EDIT2: I also added simple error handling to display a message if parsing the animation fails.