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.
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.
I stumbled on this some time ago and saved it for when my kid grows up enough. It is a collection of a few thousands kid friendly videos. I think their curation is pretty good, but check it out for yourself.
Thank you! There is nothing wrong with large libraries. But you are right, there is something very satisfactory in solving a problem in a few lines of code.
Actually that's my usual approach, but you should see the vector output from these. I tried doing it and than went back to cleaning up the raster images.
For me, pen plotting is a lot of fun. There is something so satisfying in bringing digital work to the physical world.
As for the text, I have it on my todo list to create a few single line fonts, for some time now. The obvious one is my own handwriting, ideally with some randomness built in. I would like others to be less conventional to sprinkle them in my drawings, or like you mentioned, to create some pieces that are text only.
Honestly, I don't think that is a bug. All examples are quite dense and the thumb covers multiple steps on the track. Firefox then translates every click like you clicked directly on the track. The library doesn't interfere with it in any way, it is how Firefox works.
If you can replicate this, please open a github issue [1].
Which browser and OS are you using? Because this library doesn't do anything regarding the scroll blocking (because it is using native inputs). On my phone (iOS) scroll is blocked on all input[type=range] elements, styled or not.
I think it can be theoretically done, like it is mentioned in the comment above, but you would need a new block of CSS for every slider min/max/step combination. It feels it would be harder to maintain than the javascript version.
Nice catch! Actually I thought of this and it works in Chrome and Firefox, but it seems that Safari is not triggering the focus event on mouse down, but only when you start moving the slider. Thank you for the report, I'll make sure to fix it.
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.