sdras
commented
7 years ago Hi @jsnoble!
Thanks for all of the well-considered questions! I'll do my best to answer each one and maybe @valhead has something to add, too.
- I wrote up a comprehensive comparison of all of the libraries/native technologies I've worked with here. The addendum I would add now is that I've also worked with mo.js a lot since then, and I think it has a lot of promise. It's a little more OOP-y than some other alternatives like React-Motion, but that said, there are beautiful out-of-the-box things to expore like burst, and swirl, as well as great tooling. The tl;dr of the article is probably: use CSS for small interactions so you don't have to load an external library, use GreenSock for more complexity, use Canvas when you have to move a ton of elements.
- I think image sprites can be great for a lot of really refined detail in movement, and I use them in a few different ways myself. They can make really beautiful effects but are a significant amount more work to create, and a ton of work to refactor over time. If you can, it's always best to use the browser to do the heavy lifting of interpolation for you, so that it's adjustable. Hover, making a sprite means you can really draw anything with no limitations to the type of movement you'd like, the sky's the limit.
- So, SVG is vector images, they are one in the same (SVG stands for Scalable Vector Graphics). I've written a book all about SVG Animations! It is out on early release now with O'Reilly. That goes in to a ton of detail about how to animate them, but the tl;dr for what you're asking is probably that SVGs offer a navigable DOM, so it's very simple to apply a class or ID to different elements inside of them and animate to your hearts content.
- I usually use Illustrator to create my SVGs, because I've been working with it forever and it has great export settings. Sketch is unfortunately not that great with SVGs because they dump a lot of weird stuff in the DOM on export and will turn regular paths into clipping paths and other pains. I've heard Inkscape is wonderful and a free alternative but haven't personally used them much.
- I would recommend following @ihatetomatoes, @cssanimation, @greensock, @_chenglou, @legomushroom, @chrisgannon, and @rachsmithtweets. Gosh, there are so many more, but you'll see them mention others you should follow as well :)
Thanks for stopping by and I hope this helps!
valhead
Hi, I have a few questions concerning the currently animation technologies and wanted your opinion what would be the best to use for my situation. Im currently a back-end guy with barely passable front-end skills, unfortunately css is my weakest skill set (new years resolution to fix that!). My wife and sister-in-law always wanted to create semi-animated children's book and are turning to me for help. 1) There are so many animation libraries (greensock, anime.js, velocity and so much more) and I think there is a native animations api in the browser. What are your thoughts on the best ones to uses right now? I heard great things about greensock but the license fee is big starting out. How do other open source compare? 2) I see some people use image sprites and loop through them for motion and others I see break up the image into multiple individual pieces and animate that. From your perspective what are the pro's and con's to these approaches? 3) How does svg image performance compare to vector images (I totally might be confusing myself here). Im trying to figure out a performant way to make these characters, make them look pretty and add some animations to them. 4) kinda in line with the questions before but do what framework/software do you recommend for creation of svg or vector images that will be animates later? 5) Im currently following you, Sara Soueidan and Rachel Nabors on twitter. Is there anyone else I could follow or check out their blog to further increase my css/animation skills? Any recommended books?
I apologize for the many questions, let me know if I need to make a separate issue per questions. Thanks so much!