Early this year our team worked on some new mobile prototypes. The need for hi fidelity, element-based prototyping has especially grown with the release of of Google Materials.
One thing I was struck with was the lack of tools that allowed for element-based animations. There were some tools already excelling at prototyping on mobile using screen-to-screen animations. However, that didn’t work to visually show how I wanted lists to load, have control over timing or any other animation properties. This didn't seem possible without using code or learning more in-depth animation tools. It’s not that I’m against learning new tools but the reality is that we don’t all have time to learn something in depth on the spot. But that doesn't mean we need to sacrifice those details.
With the release of Facebook’s Paper in Summer 2014, they shared the free tool they’d created to prototype this exploratory app called Origami. I feel that this initiative also opened up the conversation about in-depth prototyping a bit more, as nothing was filling this gap well. The app included fresh animation, interactive content layouts and interactions. A company like Facebook making their own tool and sharing it highlighted this need. A bonus for me: until then I didn’t even know what Apple's Quartz Composer was. Granted it isn't usable in this way without the Origami tools installed, but it was definitely something new with more potential now.
I suspect many mobile designers don’t even include something like this in their workflow if they hand off to developers, or they code using web tools. For me, using something visual allows for a bit more creativity, as I don’t get stuck on limitations of what I already see everywhere. This keeps the focus on innovating in context. These are the few I tried out with some things I learned about each. None of these export to usable code, which was not what I was looking to do. Some are for both web and mobile prototyping with some more focused on mobile.
Origami
As outlined above, Facebook developed this tool while working on their Paper app. This is a powerful tool, and works by connecting states and defining transitions using exported screens. I feel it’s a pretty steep learning curve but if you have the time could be worthwhile for many uses.
Update: New releases promise even more long term toolbox necessity! Origami Live (for use with iPhone and iPad) and Origami 2 (Code export, presentation mode, Sketch integration, more resources).
InVision
InvisionApp has a lot of really nice screen-to-screen transitions and I love the ability to prototype on your phone quickly. They have tons of integrations into your existing design workflow which saves a lot of time and assists heavily with collaboration and approvals. They are working on some neat things that you can sign up for beta including transitions in overlays and Insight (specs exporting for developer hand-off).
Pixate
Pixate was since purchased by Google and now has a desktop app. I haven’t checked it out since the changes but remember the process to preview on mobile was pretty smooth. Again, they were screen-to-screen transitions.
Adobe Edge Animate
This one had two advantages for me. The familiar timeline layout of animations and use of tweens between keyframes (dating myself here…) and export of html. While I was looking for a mobile solution it was nice to pass along using embedded html for developers to see (not use the code). Many of these tools I had to do a short screen recording to pass along without focus on the non-usable code, if it existed.
Keynote
While not purely an animation or prototyping tool, Apple’s Keynote has a strong and simple subset of tools that could easily be used to pull together a few element-level animations or interactions.
Added November 17, 2015:
I also recommend this class on Skillshare (If you enroll with this link you'll get a free month!) Mobile Prototyping: Designing Custom Interactions.