Open mangonyc opened 7 years ago
HI @mangonyc! Thanks for stopping by!
I tend to prototype in code, but I've heard good things about Principle. Bodymovin also lets you create things in AfterEffect and export them to code. mo.js has some amazing tools that are like guis while you're working with the code, I personally think this is a great innovation for web developers and wouldn't be surprised if animation tools in the future head in this direction across the board. Example here: https://vimeo.com/185587462.
As it stands, nothing is really a drop-in replacement for how we used to work with flash, and personally, I'm not sure there should be one because the what you gain in GUIs you lose in the ability to actually have the code be understandable, legible and slim. Maybe in the coming years people will address this problem, though. I'm sure Val has more to say on this matter, too.
Hi @mangonyc,
Glad you could join us for the workshop! As far as I know, there aren't any tools that work as seamlessly between the visual timeline and code as Flash did. At least not yet.
For prototyping, Principle gives you a nice visual timeline and Framer has some helpful non-timline visuals as well, but neither will give you code you can use in production. Bodymovin' does a great job exporting After Effects compositions, but like Hype, the exported code isn't easy to tweak and you pretty much have to go back to the AE file and re-export to make changes.
Like Sarah, I tend to prototype directly in code for web animation projects because it feels more streamlined than any of these tools. (Though I've also used AE and Framer to prototype for client projects when they've fit the bill.)
That said, there are some projects in the works that look interesting. All of them are in the early days and probably not fit for production work yet, but they're things to keep an eye on.
There's the Snap.svg animator plug-in for Flash (aka Animate CC): https://creative.adobe.com/addons/products/12329#.VaiLmZNVhBc
Easee, which exports clean CSS for its animations (and has been bought by Invision): https://easee.design/
And the mo.js timeline editor project: https://github.com/legomushroom/mojs-timeline-editor
Exporting code made from visual things, especially animated things, is a tall order for any tool to do well. I'd still really like to see some better GUI options for web animation out there though. Hand-coding will always give you cleaner results, but a proper timeline would level the playing field a bit for folks who prefer to work more visually.
Sorry for the late response here. I appreciate the feedback and I agree for the most part. I think its good for animators to understand how things are built on the back-end. I just think there are a lot of people who create visually where the coding can be a obstacle, and the ability for them to create should not be tied to a certain level of code education.
The visual brain is very different than the logic brain, and I find them dancing together a lot when I'm working on animation for the web. The storyboard is built on one side and the code on the other. I find this is probably more common now with many people being exposed to both sides early on.
I consider both of you, and myself, part of a different approach to design problem-solving. We possess a certain amount of visual/creative skills, and a good deal of technical skills too. I think you'll agree that no one is equal in both, most of the people I met have a better comfort level in one space as opposed to another but are receptive to both, and that's the part I love the most.
Just want to say that I took the #WAW, and it was really great. I've really learned a lot and have to started to really poke my head into it.
I used to use Flash, and haven't in years, but are there any NLE or that type of software coming to help with this. Something that would offer easy to place keyframes, tweening etc.
I used Adobe Edge Animate CC, and that was clunky, I've also used Hype3 from Tumult, and that has a lot of great features, the problem is, it just exports a js file to control everything and its not easy to tweak the code after the fact, it is pretty good though.
Thanks and keep providing all this great info. Chris