Does solid have a good animation framework? I'm thinking of creating an integration for @okikio/animate.
@okikio/animate is an animation library that uses the Web Animation API (you can read more about it on CSS-Tricks). While going through Solid's docs I remember seeing a demo that used the Web Animation API, so, I thought it might be a good idea. The problem is that I'm rather inexperienced with using reactive frameworks, so, I'm not sure how I should go ahead designing an animation framework for solidjs?
This a bit of an aside but solidjs's createResource method is difficult to use for asynchronous tasks that aren't fetch operations, it was the main reason I had to abandon using solidjs for one my projects, namely bundle.js.org. bundle.js.org had a web worker to handle building and bundling but I found it difficult to setup an asynchronous loading system for when building and bundling was done within the worker.
I did a quick port of Transition Groups like you find in Vue or React. But I haven't anything nice to that scale. I think currently it is a hole so I'd love to see work done in this area.
Honestly, I'd defer to anyone who has the experience of using these libraries for what makes the most sense. Animation is a weakspot for me. I've always leveraged mostly manual CSS techniques etc and focused more on the mechanics of features than the polish working on large long running projects. I often delegated animations to other developers on my team. So my opinion on animation wrappers is limited.
Random thought: could it be possible to move animations to dom-expressions, and let people hook into it with different libs (f.e. Tween.js, Anime.js, Green Sock, etc).
Maybe.. but unclear what the hooks are. It's possible with the right understanding we could atleast animate native elements. I just don't know what the right solution would look like.
Just for motivation: I think it would be a great thing if the solidjs ecosystem has a flexible, tailored and capable js animation lib (or bindings) which is at least for me something very important for a mobile-focused pwa.
For the syntax: this is something to explore but I do like framer-motions syntax for the most parts which would translate to e.g. "create_" reactive constructs for interpolation/motions. I'm too new to solid to even have any idea how a good approach would look like and there is probably a ton of other stuff to figure out.
Additionally - I'm no animation expert at all (I guess this became clear in the first two paragraphs). Just someone who has used react with motion for some apps. But I do wonder if/how stuff like
Does solid have a good animation framework? I'm thinking of creating an integration for @okikio/animate.
@okikio/animateis an animation library that uses the Web Animation API (you can read more about it on CSS-Tricks). While going through Solid's docs I remember seeing a demo that used the Web Animation API, so, I thought it might be a good idea. The problem is that I'm rather inexperienced with using reactive frameworks, so, I'm not sure how I should go ahead designing an animation framework for solidjs?This a bit of an aside but solidjs's
createResourcemethod is difficult to use for asynchronous tasks that aren't fetch operations, it was the main reason I had to abandon using solidjs for one my projects, namely bundle.js.org.bundle.js.orghad a web worker to handle building and bundling but I found it difficult to setup an asynchronous loading system for when building and bundling was done within the worker.I did a quick port of Transition Groups like you find in Vue or React. But I haven't anything nice to that scale. I think currently it is a hole so I'd love to see work done in this area.
Should I aim for a react-motion like syntax or aim for a custom one for solid js?
Honestly, I'd defer to anyone who has the experience of using these libraries for what makes the most sense. Animation is a weakspot for me. I've always leveraged mostly manual CSS techniques etc and focused more on the mechanics of features than the polish working on large long running projects. I often delegated animations to other developers on my team. So my opinion on animation wrappers is limited.
Ok, thanks
Random thought: could it be possible to move animations to dom-expressions, and let people hook into it with different libs (f.e. Tween.js, Anime.js, Green Sock, etc).
Maybe.. but unclear what the hooks are. It's possible with the right understanding we could atleast animate native elements. I just don't know what the right solution would look like.
Just for motivation: I think it would be a great thing if the solidjs ecosystem has a flexible, tailored and capable js animation lib (or bindings) which is at least for me something very important for a mobile-focused pwa.
For the syntax: this is something to explore but I do like framer-motions syntax for the most parts which would translate to e.g. "create_" reactive constructs for interpolation/motions. I'm too new to solid to even have any idea how a good approach would look like and there is probably a ton of other stuff to figure out.
Additionally - I'm no animation expert at all (I guess this became clear in the first two paragraphs). Just someone who has used react with motion for some apps. But I do wonder if/how stuff like
<AnimatePresence />is feasible with solidjs?
I think so, I was discussing @okikio/animate with @mattgperry (the creator of Motion & Framer) yesterday, I'll ask for his opinion on solid js.
You can use motion one - motion.dev/solid/quick-start