16

How do you handoff your animation to developers?

over 6 years ago from , Product designer

Hi DN, I haven't find the right process to create and handoff developers with ui animations (i'm using: AE, pixate rip, principle). Please share your process:

45 comments

  • Suresh SelvarajSuresh Selvaraj, over 6 years ago

    I'm developing Mitya (www.mitya.com) and here's how you do animation handoff: https://goo.gl/tyXkGx

    Mitya can export to HTML so it gives developers a live animation specs file. As you navigate the HTML prototype, the specs data will automatically update to show all the animation details of that screen. You get the animation property, time, duration and easing for each layer. Give it a try and let me know if it helps!

    11 points
    • Benoit Massé, over 6 years ago

      Hey!! I can't believe I haven't heard of this tool! Just played around with it and it look soooooooo nice! Versions! (what a nice Idea) Timeline scrubbing! Framer integration!

      Man, this is awesome. A bit buggy on scolling stuff, but otherwise, it seems to step up Principles!

      0 points
      • Suresh SelvarajSuresh Selvaraj, over 6 years ago

        Thanks Benoit! Glad you like those ideas in there :). I've been low key on marketing for now until I get the bugs ironed out. BTW, what bug did you hit on scrolling? If you can share more details, I'll fix it up.

        0 points
    • Juan F. MenaJuan F. Mena, over 6 years ago

      This is very very interesting. I loved the onboarding, it's the first time I try one without wanting to skip steps.

      The Specs.html may be the most unique and valuable idea in Mitya when compared against other tools. I see there's a Framer integration but, could I import a Framer file and then export it to get its specs file?

      Awesome work man.

      0 points
      • Suresh SelvarajSuresh Selvaraj, over 6 years ago

        Thanks Juan! Very happy you enjoyed the onboarding :) For Mitya's Framer integration, the idea is to let Mitya handle all your layout and animation, but allow you to customize any behavior and handling when you need something beyond the current UI. So, if you're planning to copy paste code between Framer Studio and Mitya to get specs, that may unfortunately not be possible. But, if you build it inside Mitya and customize just what you need, then it will of course work :)

        0 points
    • Adi Didi Inbar, over 6 years ago

      Looking really promising! Are you planing to support iOS and Android as well?

      0 points
    • Jon MyersJon Myers, over 6 years ago

      I just downloaded it and went through the onboarding. Awesome. I'm looking forward to seeing this progress.

      0 points
    • Daniel GoldenDaniel Golden, over 6 years ago (edited over 6 years ago )

      This is pretty awesome. Is the Sketch plugin still available? Hitting a 404 when I click the link from the email.

      0 points
    • Mario RocchiMario Rocchi, over 6 years ago

      Looks very interesting, will give a try and let you know :)

      0 points
    • Vinay ChilukuriVinay Chilukuri, over 6 years ago

      This is great stuff, Suresh. I remember trying this out in an early phase of the product. It has evolved beautifully.

      I'm asking my team of designers to try this out.

      Versions and Specs are killer!

      0 points
      • Suresh SelvarajSuresh Selvaraj, over 6 years ago

        Thanks Vinay! I remember our quick chat on the earlier announcement too :). It's great that you're getting your team to try it out. Ping me at suresh at mitya dot com if you need anything!

        0 points
  • Vince P.Vince P., over 6 years ago

    I use Framer, so I can send them the animation code in CoffeeScript with timing, easing, spring values, etc. They basically just have to copy paste the values.

    5 points
    • Perttu Talasniemi, over 6 years ago

      This only works on web? What if the devs are doing iOS or Android? For example the easings and velocities could be different etc...

      1 point
      • Andu PotoracAndu Potorac, over 6 years ago

        It works on both web and mobile. But the code is CoffeeScript.

        2 points
      • Rhys MerrittRhys Merritt, over 6 years ago

        I've been working on iOS and Android for the last few years - and since Framer released, I've found it to be incredible for handing off animations to both devs.. The feedback I receive from the devs on my team is usually incredibly positive.. If there is a better way - I'm all ears - but the guys on my team seem to absolutely love it, and I love using Framer :)

        2 points
  • Andu PotoracAndu Potorac, over 6 years ago

    The question is basically if any of the existing prototyping tools allow designers to export the animations in Java (for Android) or Swift (for iOS). For the web, js (but framer does it like that already).

    3 points
  • Rhys MerrittRhys Merritt, over 6 years ago

    I'm really surprised that there aren't more FramerJS advocates for handing off animations to developers.. It's just such a no-brainer for me! FramerJS makes it incredibly easy to create and specify animations by using things like auto-code:

    http://blog.framerjs.com/posts/introducing-autocode-animation.html?utm_source=frontpage&utm_medium=banner&utm_campaign=aca

    The fact that you can define the animations in code just means that your developers are able to look at something and physically see the properties that make up that animation.. No guess-work required..

    In terms of being hard to learn, sure - there is a learning curve.. But the community that exists on Slack and the Facebook group is beyond incredible, and are ready to help you out with anything, from super basic beginner stuff, all the way to highly complex API driven stuff.

    Seriously - FramerJS is the perfect tool for this.

    2 points
  • Tomas Rolejček, over 6 years ago

    I usually make a prototype in Principle, send it to them and explain all details like timing, curves,.. but i think it is not best workflow. Final animation looks slightly different, developers have to waste their time to recreating animation and complex animations has to be exported to gif or pngs. It would be great to make animation and export it directly to code, send it to developers...ta da finished. If you know tool like this, please let me know. :)

    2 points
  • nabeel khalidnabeel khalid, over 6 years ago

    It depends on the item and the output. If its a png sequence i export it from after effects drop the pngs in [image optim] (imageoptim.com) then check it with a sqchecker

    For interactions i work with the devs to match a prototype.

    Hope this helps.

    2 points
  • Or Arbel, over 6 years ago (edited over 6 years ago )

    Anima App exports animations to native ObjC/Swift and creates a framework that can be installed via Cocoapods/Carthage.

    For example this repo is completly auto-generated: https://github.com/orarbel/animation-demo-ui-kit

    and here is the animation code in it: here

    So basically you hand-off native code that developers can integrate in seconds

    And here is how you create animation with the timeline:

    Here is the hand-off:

    1 point
  • Robert PaigeRobert Paige, over 6 years ago

    Use this for AE https://github.com/bodymovin/bodymovin

    1 point
    • Gidralisk Zerg, over 6 years ago

      Does it work good? I used a few plugins like this and they export really bad :)

      0 points
    • Aaron WadeAaron Wade, over 6 years ago

      This tool is rock solid for complicated animations, but not for the purpose OP is asking about. Using something like this for UI interactions would be overkill.

      1 point
  • David PaliwodaDavid Paliwoda, over 6 years ago

    Video of the motion and AE Project file, PDF doc that includes timing + easing curves and stills of start/end of key elements/transitions. HTML/CSS Prototype if there's extra time/needs to be detailed further

    1 point
  • Adam Hopwood, over 6 years ago

    Haven't used it in a commercial context but Flinto has built in animation curve presents (RK4 & UIKit) which are more easily translatable into code.

    1 point
  • Emanuel S.Emanuel S., over 6 years ago

    I usually show them my prototype in Principle ( that's what I've used most ) - usually they get it without explaing and all I have to do next is tell them the timing and what effects I used.

    1 point
  • Joshua MillerJoshua Miller, almost 6 years ago

    Anyone created a template like: this article's example or this: this template from Creative Market ?

    0 points
  • Michael Nino EvensenMichael Nino Evensen, over 6 years ago (edited over 6 years ago )

    I build it myself. CSS / Swift both have some of the easiest animations paradigms / frameworks there is to work with. Takes the same amount of effort to get into as any prototyping tool avoids the overhead of having to sit and explain or try to convey and I get exactly the thing I was aiming for. OH and as an added bonus, if it can't be built then it can't be done!

    0 points
  • Vitor FernandesVitor Fernandes, over 6 years ago

    Principle!

    0 points
  • Ron Besseling, over 6 years ago

    I'm experiencing the same issue Adi and asked a similar question on the Pixate (RIP) Facebook group a while back: https://www.facebook.com/groups/pixate/permalink/1394171800882397/?match=cm9uIGJlc3NlbGluZw%3D%3D . We switched from Pixate to Flinto, so we still have the same problem. Right now, I manually include all relevant animation details in an ascii art format and post it on GitHub together with a video of the prototype. It's far from ideal.

    0 points
  • Matt WalkerMatt Walker, over 6 years ago

    Working alongside them and showing them the intention of the interaction using whatever tools necessary.

    0 points