91

Diya - Timeline animation directly in Sketch

6 years 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, 6 years ago

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

    8 points
  • Pablo StanleyPablo Stanley, 6 years 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 SelvarajSuresh Selvaraj, 6 years 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
  • Derek Nguyen, 6 years ago

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

    2 points
  • Matthew BlodeMatthew Blode, 6 years ago

    I like your DN icon ;)

    2 points
  • Joseph Wolf, 6 years ago

    Nice tool! I like it. Thanks.

    1 point
  • Joy Kong, 6 years ago

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

    1 point
    • Suresh SelvarajSuresh Selvaraj, 6 years 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, 6 years 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
  • Carlos AndujarCarlos Andujar, 6 years 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, 6 years 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
  • Clayton Farr, 6 years 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 SelvarajSuresh Selvaraj, 6 years 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
  • Alfred BeckmanAlfred Beckman, 6 years 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 SelvarajSuresh Selvaraj, 6 years 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
  • Henry MoranHenry Moran, 6 years 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, 6 years 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
  • Hayden K, 6 years 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
  • Philip A, 6 years ago

    Great tool and great website, well done!

    0 points
  • Ramiro RuizRamiro Ruiz, 6 years ago

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

    0 points
  • Benjamin Berger, 6 years 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, 6 years 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
  • Helen . Helen . , 6 years 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 SelvarajSuresh Selvaraj, 6 years 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 . Helen . , 6 years 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, 6 years 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, 6 years 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
  • Orhan O., 6 years ago

    Signed up. Looking forward to. Great job!

    0 points
  • Tyson KingsburyTyson Kingsbury, 6 years ago

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

    0 points