17

Ask DN: Software for UI Animation

over 4 years ago from , Designer

I've been wanting to test out some animations on some of the designs I've been working on, but not necessarily sure I can make a legitimate claim for After Effects just yet.

What is everyone using to do UI Animation?

43 comments

  • Marc EdwardsMarc Edwards, over 4 years ago (edited over 4 years ago )

    Framer, After Effects, Cheetah 3D (yes, really!), Hype, Photoshop (for hacky GIFs), Quartz Composer and Form are all worth taking a look at.

    But, I think the two that are likely to be best for the job are Framer and Form, if there’s any interaction:

    16 points
  • Brennan Smith, over 4 years ago (edited over 4 years ago )

    I'm going to be that guy, Keynote. It meets my needs when testing and presenting new animations and interactions for ui. I also use Webflow, I can mock something up in Webflow very easily with different states.

    12 points
    • Jonathan YapJonathan Yap, over 4 years ago

      I love Keynote for it, but I'm going to be THAT guy that says Powerpoint ;) Powerpoint has a slightly better timing control over Keynote.

      3 points
  • David WilderDavid Wilder, over 4 years ago

    I'm an After Effects guy all the way. I find it faster and much easier to get exactly what I want. But if you need an alternative, I'd suggest Pixate. I tested them during BETA. It's very cool and fairly easy to understand for us "non-programmer" types.

    8 points
  • Tori ZTori Z, over 4 years ago

    Does anyone user Edge Animate? What do you guys think?

    5 points
    • Dean HaydenDean Hayden, over 4 years ago

      Yep, used it for a couple of projects. It's good because of its constraints (in terms of the medium) and is a more realistic representation of a web based project. Good to get ideas across and to show what's possible (or not) within a browser

      1 point
      • Tori ZTori Z, over 4 years ago

        Thanks a lot! Finally someone talks about it. I wonder why it doesn't become a trend in the design community though.

        1 point
  • Mike ArndtMike Arndt, over 4 years ago

    Framer.

    3 points
  • Kenny Chen, over 4 years ago (edited over 4 years ago )

    As others have mentioned, Framer is great for testing out animations. Don't be scared that it's code heavy - there are plenty of examples and a Facebook group to help.

    I wrote a tutorial on building your first Framer prototype about a week ago that was received pretty well.

    Also, if you're ready to take the plunge after the free 14 day trial, I have a 20% off Framer coupon that I'd be happy to share.

    3 points
  • Suresh SelvarajSuresh Selvaraj, over 4 years ago

    I just released a tool today for designers to quickly test UI animations. It's a tool with a pure visual workflow, so no coding is required. You can check it out here: www.mitya-app.com

    2 points
  • Aaron Abentheuer, over 4 years ago

    Keynote, especially with "Magic Move" is incredibly powerful for a lot of patterns in modern UI-design and great for low-fidelity, very rapid prototyping. (here's a mockup I did of an interactive communications system for a museum: http://vimeo.com/97605140)

    Quartz Composer is part of my workflow for about 3 years now and Origami really moved things forward a lot. Once you get into it you can do a lot of things in high fidelity from very basic animations to very experimental stuff incredibly fast. Especially the (surprisingly reliable) networking features are often times very helpful, for example when prototyping (and demoing) second-screen experiences. Also the (macro-)patches provide a very good overview of the applications information architecture when you structure smartly. The lack of networking (and lack of flexibility due to more humane learning-curve) is one of the biggest reason why I haven't switched over to Form, although I like that they try to make patching more accessible.

    AfterEffects and Framer are very effective as well but I like QC and Keynote better, because I tend to be much more effective with them. When I go on to prototype greater parts of an application, I nowadays quickly turn to XCode with Swift.

    2 points
  • Pasquale D'SilvaPasquale D'Silva, over 4 years ago

    Everything that exists is subpar. I use a blend of tools. AE, Framer, QC, Form, etc.

    2 points
  • Matt D. SmithMatt D. Smith, over 4 years ago

    Animating UI really depends on two things:

    1. What type of animation you are trying to create
    2. What software do you feel comfortable with (or would you ideally be using)

    For me, I'm an old school Flash guy so that's what I use for the majority of my animations. The timeline is simple and straight forward and I can create most of what I need with it.

    Sometimes, I'd like to move beyond simple animations and I definitely feel like I'd like to use AE more, but for now Flash is my go to. I wrote a little more about my process here: (includes a free Flash animation file)

    http://mattdsmith.com/animated-dribbble-shots/

    1 point
    • Phil Smith, 4 years ago

      I appreciate this—it seems like Flash is a dirty word these days. :)

      Question: how would you estimate the Flash learning curve? (I am very comfortable in Adobe Il, Ps, Id.)

      1 point
      • Matt D. SmithMatt D. Smith, 4 years ago

        It's tough to speak about the learning curve since I've internalized so much of it's capabilities since learning the software 10 years ago. I will say that it seems much simpler than After Effects. There's a download link for a sample flash file at the bottom of that post if you haven't checked it out. =)

        0 points
  • Robin RaszkaRobin Raszka, over 4 years ago

    Keynote

    1 point
  • Kyle ConradKyle Conrad, over 4 years ago

    After running through this course from Chris Slowik and Scott Hurff on Quartz Composer - http://scotthurff.com/qc/ - I found Quartz (in combination with Origami and Avocado packages for it) totally perfect for UI animation. It's kind of weird getting into it at first because of the node-based structure of how you put stuff together, but once you do, it's really nice to be able to show animations mocked up inside a device in high quality and I've found it gets much quicker to put together as you go.

    1 point
    • florian fangohrflorian fangohr, over 4 years ago (edited over 4 years ago )

      Curious, did you ever translate this into an app? If so, what's your workflow? Is there X-code integration for QC?

      0 points
      • Kyle ConradKyle Conrad, over 4 years ago

        I have not, not yet at least. A past project I was working on that heavily involved using it was mostly conceptual, so didn't get the chance to put it into action.

        From what I've read, there's not a ton of Xcode integration for it (if any at all). However, Facebook Pop (https://github.com/facebook/pop) supposedly can help with this as it allows you to have similar basic animations that can use similar values (or something like that, I'm still learning Xcode/iOS dev basics so not intimately familiar with how exactly it all works).

        0 points
  • Rick WaaldersRick Waalders, over 4 years ago

    I was a big After Effects user, but since I've bought Framer Studio, I haven't opened After Effects a single time. At least not for UI animations. I find it better for so many reasons. Speed of prototyping being definitely one of them (no more rendering <3).

    0 points
  • Pep Trias, over 4 years ago

    I find Keynote fast and effective for prototyping quick animations to communicate motion ideas to developers or clients.

    In regards to After Effects, you can do whatever you want and get supersmooth results, but it often ends up taking more work and time.

    I often find Keynote being to After Effects what Sketch is to Photoshop.

    0 points
  • Eric FilkinsEric Filkins, over 4 years ago

    AfterEffects all DAY!

    0 points
  • Andrew LucasAndrew Lucas, over 4 years ago

    Quartz Composer

    0 points
  • Kyle Mitchell, over 4 years ago

    Thanks for all your input. I think I'd like to try out framer. I'm nervous about the programming aspect of it, but want to try to learn.

    0 points
  • Terence Huijgen, over 4 years ago

    After effects is my game to make animations.

    Just follow some tutorials on the internet and i'm sure you'll work it out ;)

    0 points
  • dmitry skavishdmitry skavish, over 4 years ago

    Aimatron (www.animatron.com)

    everything is in the browser, no download. export to html5, gif, video and SVG+SMIL (animated svg)

    imports images, audio, svg. video import is coming.

    much easier than most of the animation tools I know and at the same time gives you full control over the timeline. just check out staff picks animations on our site.

    disclaimer: I am the founder.

    if you have any questions just let me know.

    0 points
  • Eduardo UlrichEduardo Ulrich, over 4 years ago

    After effects & Pixate

    0 points
  • Julian ShapiroJulian Shapiro, over 4 years ago

    Velocity Motion Designer: http://velocityjs.org/#vmd

    0 points
  • mikael tellhedmikael tellhed, over 4 years ago

    I and my good friends at Topp design have just released our internal prototyping tool in closed beta. Take a look at http://getnoodl.com. We use it internally in many projects especially when intricate animation and interaction is needed. We are looking for beta testers to sign up if you are interested!

    0 points