10

Ask DN: Animation handoff from Design to Dev?

over 7 years ago from , Product Designer @ Match.com

Animation isn't really big here, so I'm taking some initiative in adding some animation to our new apps and stuff like that. However, I haven't done a ton. I'm making some nice little animations I'm happy with - but how can I make this as easy as possible for dev?

Initially, I was building in Edge Animate so I could have exportable code - but without an ability to export a gif from edge, and finding screen recording a kind of shitty and difficult workaround - I wasn't really sure how to prototype the interactions and get approvals. So I switched to building in After Effects, exporting PNG sequences to create GIFs in photoshop, and then creating prototypes in InVision. That's great for showing what I want, but what's the best way I can give dev more to work from? Even if dev agreed that just giving them the prototypes was acceptable, I can guarantee that easing, bounce, and anything that really makes an animation seem polished would be lost in translation.

27 comments

  • Edwin de JonghEdwin de Jongh, over 7 years ago

    I can highly recommend using Pixate for your animations and interactions. It's easy to use and and fairly easy to learn. I've been using it for a few weeks now at my startup and it seems to be working great for handoffs, since it uses the same libraries iOS does.

    3 points
  • Maciej ZadykowiczMaciej Zadykowicz, over 7 years ago

    If that's iOS devs you're talking about, try looking into integrating Facebook's Pop framework into your projects. This way you can export copy-paste ready code from Origami - also by Facebook- that allows for easy tweaking. You can also get your hands dirty in Xcode, the syntax for animations is easy enough to read and correct by yourself. To be honest I never had much luck in handing over movie files to developers, the differences in timing, easing, curves always meant that I had to correct stuff manually but your mileage may vary. There's also Framer.js which uses code to accomplish things, so it might be easier for devs to follow along.

    1 point
    • Sean LesterSean Lester, over 7 years ago

      Yeah, I don't think the developers feel comfortable building from movie files either - they're going to want something more from me. I was going to try Origami, but I'm not set up with an apple dev account so I can't get quartz and ended up getting really frustrated.

      0 points
      • Eric Chu, over 7 years ago

        I'm sure your devs would be happy to set you up with an account, especially if it means working better together in the long run...

        0 points
  • Guy Gunaratne, over 7 years ago

    I started off with exporting Sketch designs into png and then animating in AE but looked around to do this with higher fidelity - tried InVision - but it seems like Framer.js is the best option for what I needed. However, it is far more of a commitment an steeper learning curve, since you'll need to use Coffeescript. Pixate is probably the quickest, easiest option for you - and has a great source of video tutorials to help you get started.

    1 point
  • Joey Di Nardo, over 7 years ago

    I love this question.

    If you're willing to get your hands dirty with some Coffeescript, FramerJS is a great choice for communicating interactive prototypes to your front-end team.

    As someone on the front-end, there's no better way to communicate than seeing someone's exact intentions realized in code, and in JS to boot; the ambiguity is marginalized and becomes a near non-issue.

    1 point
  • Valentina BeroisValentina Berois, almost 6 years ago

    I know this threat is old, but just in case...have you now tried the Lottie plug in for After effects? You can export an .JSON file straight ahead.

    0 points
    • Sean LesterSean Lester, almost 6 years ago

      Yes I have, I'm a fan! It has a somewhat limited use-case, though. It's great for like animated graphics, but no way to use it for transitional UI animation type things that would require multiple UI elements and variable positioning etc... not that it should be expected that you could use it that way.

      1 point
      • Valentina BeroisValentina Berois, 5 years ago

        I understand. Im also a big fan, so far so good! They've improve it a lot regarding effects and features support!

        0 points
  • Jonathan HowellJonathan Howell, over 7 years ago

    I think you're over thinking it a bit, the dev should have no problem getting it fairly close to how it looks from the gif as this is the exact same way I do things. If the end result isn't exactly what you envisioned it to be then sit down next to the "dev" or "John Doe" whatever you want to call him and tell him what isn't working and he should be able to fix it at a moments notice considering it isn't too far off from the original gif. I do this on a regular basis and it works seamlessly :)

    0 points
    • Sean LesterSean Lester, over 7 years ago

      I wish that were the case. I was expressly asked to provide code. Actually, the original request (from a product manager) was to "find a github of the code for the animation" (as if someone out there created the exact code of my custom animation for our specific UI). So while that's obviously impossible, I'm trying to comply by providing more than a GIF. These devs aren't really solid front end guys even in general, much less when it comes to UI animation... something they previously haven't really had to do here. Literally I don't know that most of them would even see the difference between something that just slides in at one speed vs. something that eases and fades in, and then bounces before settling in place. I'm not meaning to insult them, this just isn't the work they do or how they think. Actually, in this specific scenario - they're handing it off to some off-site code-named team that I know nothing about... so it probably won't be an issue. I'd definitely like to work out a long term solution, though. I think the Origami suggestion is the one I'm most excited about.

      0 points
  • Spencer HoltawaySpencer Holtaway, over 7 years ago

    I usually diagram/storyboard it, then when I talk to Rob (God forbid I say "dev") we do a bunch of talking and handwaving around it until we're both on the same page.

    In some cases I'll do an after effects animation to illustrate, but ultimately Rob is going to build the thing and we're going to have to do a bunch of hand waving and talking to get it to the polished state you want. There's no such thing as getting things the way you want by punting a file to someone.

    0 points
  • Ryan MurphyRyan Murphy, over 7 years ago

    Best way is to not refer to dev as dev, any by their name, and working closely with them to figure out the best workflow together.

    0 points
    • Filipe FigueiredoFilipe Figueiredo, over 7 years ago (edited over 7 years ago )

      You expected Sean to address the dev by name for this comments purpose? Really? Otherwise, heck of an assumption.

      3 points
    • Sean LesterSean Lester, over 7 years ago

      As Filipe said, saying "Brian" might have been a bit confusing for the DN community. I have a pretty good relationship with my developer coworkers and have frequently made everyone's jobs easier by simply getting together with them and having a frank conversation about the project. In this case, however, they're not very familiar with UI animation - and neither are the other designers here. They're really looking to me to take the lead and set a precedent here. Maybe that's a bit much, I'm really getting actively involved here to make UI animation something that actually happens here so that our apps etc. look more like premium products. I feel we're very behind here in the UI/UX front.

      0 points
  • Jian Wei LiauJian Wei Liau, over 7 years ago

    I use Tumult's Hype 3 to simulate animation and screen to screen transitions for my web projects. It's a dead simple tool using keyframe-based animation which I could export it as a HTML.

    If I need to make a gif, I would use LICEcap to record it.

    I'm lucky to work with amazing developers that are able to reproduce when I show them my prototype without needing the actual code.

    0 points
    • Sean LesterSean Lester, over 7 years ago

      I attempted to use LICEcap to record animations I was making in Adobe Edge - but it was too difficult for me to capture the exact area and get a GOOD capture for a realistic looking prototype. My results were too sloppy.

      0 points
  • Raffaello SanzioRaffaello Sanzio, over 7 years ago (edited over 7 years ago )

    I can guarantee that easing, bounce, and anything that really makes an animation seem polished would be lost in translation

    I can sympathize with you. The key is to use tools that are as close as possible to the technology you're designing to. That way you'll have a better idea of the power and, especially, the limitations of such technology, which will help you keep your expectations accordingly.

    I use CodePen when creating animations for the Web and FramerJS for Native apps. Both of them require you to hand code the animations, so Devs will know what to do with them.

    0 points
  • Riho KrollRiho Kroll, over 7 years ago

    The most accurate way would be to show code that produces the animation (CSS transitions for example). Anything other than that will always be tricky, since it will come down to interpretation, and information will always be lost in that process.

    From my experience AE videos worked pretty well too, but I often included a slowed-down version when it came to more complex animations, as it makes it easier to see smaller nuances in the animation.

    Why are you exporting gifs instead of actual video by the way?

    0 points
  • Robert PaigeRobert Paige, over 7 years ago

    Honestly, there's no faster way, than the way your are doing it.

    After Effects is great for animation prototyping, but the removal of the option to export gifs since CS4, would be even faster. There's no reason why they shouldn't bring it back!

    Maybe we should revolt and go on strike!

    ADOBE!!! WE WANT OUR GIF EXPORT OPTION BACK!!! Who's with me? Strike Strike Strike!

    0 points
    • Riho KrollRiho Kroll, over 7 years ago (edited over 7 years ago )

      Woah, hold on there. Adobe moved a lot of the export options out of AE directly (since I believe CS6 and after) , and instead put them into the Adobe Media Encoder (which works across Premiere and AE). This also includes gif export.

      Just use File > Export > Add to Adobe Media Encoder Queue and then from the media encoder simply choose the gif preset (I say simply, but actually this is a pretty elaborate and weird process of course).

      2 points
    • Sean LesterSean Lester, over 7 years ago

      I'm not worried about speed - and I can create GIFs from the PNG sequence (or just video files), but what I can't get out of AE is code to make the dev's job easier. They can't really be expected to faithfully recreate the animations I show them. They just can't. It isn't what they do. But out of Edge where I can get code, I can't create GIFs or anything to prototype from.

      0 points
      • Robert PaigeRobert Paige, over 7 years ago

        I hear you.

        Why is there not a Image Sequence Generator App on the market?

        For example: Put your image sequence in the app, and it spits out a movie. Like (http://www.gifrocket.com/)

        I know you can use Media Encoder, but I just hate using that thing.

        0 points