Show HN: I made CSS-only glitch effect(muffinman.io)
muffinman.io
Show HN: I made CSS-only glitch effect
https://muffinman.io/blog/css-image-glitch/
15 comments
Doesn't work on Android DDG and FF on th site, but works in both on CodePen.
That is weird, because it is HTML/CSS only. Do you see anything that would help me debug it? Could it be that an add-on (content blocker) messes up with it? I don't have an android device to test. I don't see any issues on desktop and ios though.
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
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
<anonymous> https://muffinman.io/js/posts/glitch/index.js:10
<anonymous> https://muffinman.io/js/posts/glitch/index.js:5
I've figured it out. The error means that this call fails:
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.
const animation = animationElement.getAnimations()[0];
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.
Yep, works on DDG/A, FF/Win64 now!
Works for me on the site, FF Android
works for me in android DDG
That's truly impressive, never have seen sth like that before with CSS
Very interesting and beautiful effect!
Nice!
super cool!