Live data from Hacker News

Show HN: I made CSS-only glitch effect

muffinman.io

11–16 of 16 posts

Re: Show HN: I made CSS-only glitch effect

#11
post #7

Earlier quoted context omitted.

Quite amusingly: 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

Thanks for checking, I’ll try to see what is going on.

Shoulda checked it in the first place:

    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
         https://muffinman.io/js/posts/glitch/index.js:10
         https://muffinman.io/js/posts/glitch/index.js:5
FF 138.0.1 (May 1, 2025)

Re: Show HN: I made CSS-only glitch effect

#15
post #7

Earlier quoted context omitted.

Thanks for checking, I’ll try to see what is going on.

Shoulda checked it in the first place: 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 https://muffinman.io/js/posts/glitch/index.js:10 https://muffinman.io/js/posts/glitch/index.js:5 FF 138.0.1 (May 1, 2025)

I've figured it out. The error means that this call fails:

    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.

Re: Show HN: I made CSS-only glitch effect

#16
post #15

Earlier quoted context omitted.

Shoulda checked it in the first place: 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 https://muffinman.io/js/posts/glitch/index.js:10 https://muffinman.io/js/posts/glitch/index.js:5 FF 138.0.1 (May 1, 2025)

I've figured it out. The error means that this call fails: 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 n…

Yep, works on DDG/A, FF/Win64 now!
Post reply on HN