Diya - Timeline animation directly in Sketch

7 months ago from

Hey everybody! I’m working on a plugin to bring timeline animation, directly to Sketch. Here’s what I have so far: http://diyahq.com

This should make it easier to design simple interactions, without leaving Sketch. Let me know what you think :)

42 comments

  • Andu PotoracAndu Potorac, 7 months ago

    This looks a lot like Principle, but integrated in Sketch. Something I wished the two companies do for a looong time!

    8 points
  • Derek Nguyen, 7 months ago

    Holy shit, looks like a ton of work!! Can't wait to try it out.

    2 points
  • Pablo StanleyPablo Stanley, 7 months ago

    Excited to try this out, Suresh. My two cents. Try releasing an alpha or beta version soon, so people can start trying it, but with the understanding it is still under development. That way you get your foot in the door and also start receiving feedback from us on how to improve this quickly. I would pay for this plugin!

    2 points
    • Suresh Selvaraj, 7 months ago

      Thanks Pablo, I'll surely do that! I want feedback from live workflows too, so I'm working to get this into your hands as soon as I can!

      0 points
  • Matthew BlodeMatthew Blode, 7 months ago

    I like your DN icon ;)

    2 points
  • Joseph Wolf, 7 months ago

    Nice tool! I like it. Thanks.

    1 point
  • Joy Kong, 7 months ago

    Seems awesome. is it possible for me to export as gif from there?

    1 point
    • Suresh Selvaraj, 7 months ago

      Currently, you can export to HTML which gives you an interactive prototype. I might support gif in the future if enough people want it

      0 points
      • James StorerJames Storer, 7 months ago

        The only reason I use timeline in PS is for gif outputs so would be ace if this was also supported. HTML sounds like a cracking start though

        1 point
  • Philip A, 7 months ago

    Great tool and great website, well done!

    0 points
  • Hayden K, 7 months ago

    I signed up but I'm curious as to how long I'll have to wait to try it out though? Invision Studio is coming!

    0 points
  • Henry MoranHenry Moran, 7 months ago

    Great work there with this plugin.

    I was wondering if it will be possible to create custom easing animations?

    0 points
    • Suresh SelvarajSuresh Selvaraj, 7 months ago

      Not sure if I'll launch with this ability, but probably soon after launch I'll bring in a curve editor. Until then, there will be sine, quad, cubic, quart, quint and expo for ease in, ease out and ease in-out

      2 points
  • Ramiro Ruiz, 7 months ago

    As a big Principle user this looks amazing! great job. Super interested.

    0 points
  • Benjamin Berger, 7 months ago

    This looks super interesting!

    Just out of curiosity, what is making this plugin possible today? We've seen Principle released 2 years ago with a similar concept, but as a standalone app. The Lightning plugin (bought by Invision and embedded into Craft) is close to what you got, but without the timeline – just connecting screens together.

    I always thought that going this far with a plugin was just impossible. Has anything changed to enable your work?

    0 points
    • Suresh SelvarajSuresh Selvaraj, 7 months ago

      I hadn't explored plugins deeply before this, so I can't really say what has changed to enable this. So instead, let me tell you what I'm using to do this:

      1. Actions API: Sketch lets you hook into user events, so when a layer selection changes, my code knows about it
      2. Saving custom data: I can save my plugin's data as JSON directly into the Sketch document with the new file format
      3. Loading frameworks: I don't know since when this has been available, but this is the most important feature for Diya. This way, I can develop my plugin in Xcode with proper debugging tools rather than using JS/CocoaScript
      4 points
  • Alfred BeckmanAlfred Beckman, 7 months ago

    Is anything in your demos fake? I don't want to come across as a douche bag, I just don't want to build false expectations. This looks really really good!! I'm very much looking forward to trying this my self.

    0 points
    • Suresh Selvaraj, 7 months ago

      I don't have the video editing skills to make a fake like this :). I understand what you're saying, so no issues. It's a live plugin running on my machine

      3 points
  • Helen VlingHelen Vling, 7 months ago

    Love what I'm seeing, signed up for the waitlist too.

    Definitely would be cool if you could support exporting as .MOV or .GIF

    0 points
    • Suresh Selvaraj, 7 months ago

      So one more vote for GIF export then :). If you don't mind me asking, when would you prefer to use GIF/MOV instead of an interactive HTML export?

      1 point
      • Helen VlingHelen Vling, 7 months ago

        Definitely to showcase things I've done on sites like Dribbble/Behance/instagram! I don't know too much about HTML export, but does it support being hosted on personal websites based on Wordpress?

        0 points
      • Suganth SSuganth S, 7 months ago

        In my case, any place in google Suite. Video sucks there because it puts a weird aspect ratio for the thumbnail and expects you to tap and play it. Gif is just simpler :)

        0 points
    • Suresh SelvarajSuresh Selvaraj, 7 months ago

      Ah ok, thanks for the insight Helen and Suganth. I'll add this to my list. Regarding Wordpress, well .. technically you can, but I suspect you'll need to edit the HTML to make it work, so it's not going to be just 'upload and done'

      0 points
  • Clayton Farr, 7 months ago

    Suresh, it’s fantastic seeing all this Mitya goodness available within Sketch as well. I have no idea how you find enough the time to build all this goodness.

    Do you see Diya as a companion to Mitya, or possibly replacing it?

    0 points
    • Suresh Selvaraj, 7 months ago

      Hah, thanks for the kind words Clayton! Regarding Diya and Mitya... well first, let's see how people adopt Diya into their workflow. Then we'll see :)

      0 points
  • Carlos Andujar, 7 months ago

    looks cool, and the HTML export is a big plus! would be great to export CSS/JS as well!

    0 points
    • Suresh SelvarajSuresh Selvaraj, 7 months ago

      Just to clarify the HTML export, Diya converts all your animations into Framer code that is then packaged in an HTML file for export. So, there will be HTML and JS involved, but unfortunately, I don't think CSS will be possible. Any specific reason you're interested in the CSS/JS?

      0 points
  • Orhan O., 7 months ago

    Signed up. Looking forward to. Great job!

    0 points
  • Tyson KingsburyTyson Kingsbury, 7 months ago

    This is what I'm looking for in Figma.... hope they get some animation like this soon :)

    0 points