over 5 years ago from Suresh Selvaraj
I'd posted about my plugin Diya a while back on DN - a Sketch plugin to bring timeline animation directly to Sketch. Now, I'm very happy to announce that Diya is available in open beta http://diyahq.com
Diya lets you animate on a timeline to create interactive prototypes, preview them directly in Sketch and export to HTML5.
I hope you enjoy using Diya and animating your prototypes in Sketch!
The morphing shapes feature is awesome!
Thanks! Hope you enjoy using it :D
ehmmm.. i'm using abstract and i open my sketch file in untracked mode aaaannd the plugin doesn't work
Are you getting an error message? When you say it doesn't work, can you share details on what action isn't working?
there is no error message. and again we are working on design system. we have a lot of symbol. i tried hover animation using a card symbol and there was an error. the errors are animation didn't play well, the selected option while connecting artboard change by itself.
I'm seeing that everyone is using symbols slightly differently, so whenever someone reports a symbol error, I'm working with them to take care of their use case. If you're in a position to share your sketch file, I can try and work through it and fix it for you.
"selected option while connecting artboard change by itself." Do you mean the action / animation drop down was changing by itself? Diya actually tries to guess your intention based on your previous selection. For eg, if you add a transition from A to B using swipe left, then if you connect B to A, it will automatically change the action to swipe right. This is just a default setting. You should be able to manually change it after that. Is that what you mean/
here is my file --> https://simpan.ugm.ac.id/s/uu5L2jYDjITAA23 the name of the artboard will tell you the meaning. thank you =)
Thanks for the file! I see the error :). Let me get back to you with this. I have your email id from the subscription list, so I'll ping you back :)
thank you, i will wait =)
Hello! I am trying to download the beta from your site, but the signup form seems to only show me a black screen. I've tried Chrome/Firefox/Safari and the same issue. Would love to try it out! Might be a problem on my end so I'll keep trying, but figured I'd try to let you know in case it was something else! :)
Sorry about this! I'm trying to trace this issue, but until then, if you could please mail me at help at diyahq dot com, I'll send you a direct download link
Drew, could you please help me in tracing this issue. Neither me nor my host are able to replicate this issue. Can you please open the console in your browser and tell me if any error is reported when you click on "download"?
very nice! :D
Hey Suresh,
pretty cool thing you've build! Props!
I had to try it out: http://drops.rafaelalex.de/phce
The only feedback (besides what others already mentioned) is, that the live-preview doesn't work with box-shadows set in rgba. Or in other words: the opacity-thing doesn't work at all :)
Cheers, Rafael
Thanks Rafael! Love the prototype you've shared.
Can you share the box shadow settings you're using? I'm able to set opacity on the shadow so I'm wondering what issue you're seeing?
Any plans on your pricing policy? Free? Subscription-based? This is really important to me, as lately, people have been trying to leech of desperate designers trapped in tools that don't empower them.
It'll be the same as Sketch. So you get a license + 1 year updates. Every year, if you renew, you'll get another year of updates. If you prefer not to, you can still continue using the version you already paid for.
thanks for the information. Now, will you go follow the pricing trend of the other tools? Meaning, charging something in the range of 30-80€ for this sketch-plugin?
Is there any rough information on the price range that you are aiming for?
I haven't decided yet, but it probably won't be on the higher end of that spectrum. Maybe in the mid range...
It's just amazing! I was waiting for a tool like that directly in Sketch! Bravo!
I just have a small question. Is there a way to increase the "height" of the Timeline window (or even detach it)? Because with "complex" animations, the area is quite small and it would be nice to see more items :)
Thank you and congratulations again!
Thanks Yann! This is also being asked often, so it's on the roadmap :)
I've one question only. If i were to make an animation. Does it create .json file?
Yes, but depends on what you're looking for. If you go to the Diya menu and select "Copy Prototype JSON", you'll get the entire animation in JSON format including the artboards, layers, transitions, easing values etc. However, the JSON is in Diya's format. Is there any reason you're looking for JSON?
One reason might be if lets say there was a shape morph or other complex transition and you wanted to use the json in something like Lottie which would wrap that in js so you can control it. Its great to have output in html, but alot of what people will use this for is most likely mobile, so the output formats should reflect that (as a later update).
Yes, Lottie is a popular request I'm hearing. I'm exploring this :)
Well, at my office my developers say that whatever animation I create. In order to give them, I've to give .json file. For example, If i want when a something takes time to load. There should be smooth, decent animation which will keep user engaged where user wont feel that he's waiting. So, I create some decent animation. As you say that it will create in JSON format. I can give it then, right?
You can, but I would recommend you give them the specs sheet Diya generates. It'll be a lot more useful for them. In the Diya bar, click on the export button. This will generate 2 HTML files and an images folder. Let's say your prototype is called "demo.sketch". Diya will export "demo.html" and "demo specs.html". The specs file will show your devs exactly how to reconstruct the animation you made. I think it'll be more useful for them.
Also, I'm exploring Lottie export, so that could help them too :)
Thank you so much!!! I would like to help you as contributor if you are looking
This is great!
I have been spending some time playing around with it and it is really promising. It works very well for transitioning one screen to another.
I started by experimenting with morphing a FAB into a nav and the amount of control is really cool. Would be nice if there was a way to group the layers created from the morphing of one shape into another so that the easing could be adjusted as a whole rather than each individual layer in the timeline.
I did hit a wall once I tried to animate something with more than one transition. For instance when trying to animate page transitions on a web design so that images and text animate in different ways. I have not found a way to achieve these more complex motions. Maybe you could provide a tutorial demonstrating something like this.
You know if there were some way to implement the ability to set keyframes in the timeline and drag the object into position like in AE (rather than duplicate artboards) this would be a game changer. Just a thought.
As a side note it would also be cool to have some way to record a .mov for use on projects in portfolio projects. Not even sure if this is possible from within sketch. But would be a nice feature.
All in all this is awesome work! Its very impressive what you have accomplished and I am really excited to see where you take this. I definitely will be experimenting more to see what else I can do.
Thanks for your hard work!
"I did hit a wall once I tried to animate something with more than one transition. For instance when trying to animate page transitions on a web design so that images and text animate in different ways. I have not found a way to achieve these more complex motions. Maybe you could provide a tutorial demonstrating something like this.
You know if there were some way to implement the ability to set keyframes in the timeline and drag the object into position like in AE (rather than duplicate artboards) this would be a game changer. Just a thought."<
^ This is basically what i meant in my comment above. The incorporation of actual animation tools found in AE with this plugin would be golden. Alot of times you dont need to have a completely new artboard just to make a transition.
Yes, the full power of AE would be awesome :). BTW, when you don't need a completely new artboard for a transition, then typically it's because the animation is contained to one portion of the screen. In such cases, you can use symbol animations and "On load" animations to get what you want
Symbol animations: https://youtu.be/n27NLZCX2Rs There's only one artboard for this, but you'll see how we use symbols to toggle between different states
On Load animations: https://youtu.be/QxmEle3iG2k This is another quick way to move from one state to another for just one symbol
I agree it's not the full power of AE, but maybe this can address at least some of the scenarios.
Thanks D Dot!
Would be nice if there was a way to group the layers created from the morphing
That’s an interesting idea. And makes sense too. I’ll explore this possibility
I did hit a wall once I tried to animate something with more than one transition.
When you say “more than one transition”, do you mean an object that goes from A to B to C, instead of just A to B?
have some way to record a .mov
I’m exploring this as it’s often asked by users :)
And please do experiment more and let me know how it works for you!
When you say “more than one transition”, do you mean an object that goes from A to B to C, instead of just A to B?
I mean two separate objects moving from A to B on the same trigger. For instance on a home page image gallery where you tap 'next'
Animation 1: the image slides out and fades while the next appears and slides in.
Animation 2: Text fades while new text fades in and up.
Two separate animations on one trigger. Where each animation has more than one effect.
Yes, the full power of AE would be awesome
I personally do not want the full power of AE, just some of the features such as key framing. I think this would allow for the exact use I'm speaking of above and cut down on the number artboards needed. If I am wrong please correct me since I am still somewhat new to animating.
Am I thinking about this the wrong way?
Thanks for your reply!
Edits: grammar and spelling, typing from mobile.
Do you mean something like this? https://www.dropbox.com/s/9v37a8k3bjr9gr9/SimpleKeyframes.mp4?dl=0
If this is what you're looking for, then I can confirm that Diya is specifically built to handle such animations. You can check out the tutorial videos where I cover animating multiple objects in a single trigger
You can easily use Loom to record Sketch. Would be great for this tool!
Dude you need to check your site on mobile. It’s rough.
Yeah, sorry :(. Working on it now...
Are there any plans to have IOS/Android exporting support? at Wag! we are mainly mobile focused but having an all-in-one program like Sketch with a timeline would work wonders for our design-to-development process :)
I love what you've done btw, keep it up!
I'm discussing this with several users to understand what is required before committing resources to it. Can you share more about what you're looking for in iOS/Android export? Do you mean animation export or code export?
Sure. So, as an example, right now when i prototype, I use one of three things:
Principle: its great for quick prototypes and gives me alot of options for 'realistic' behaviors and animations. Downside is no code export. Id also like to see some better timeline animation tools and logic from them (EG you cant scrub through a timeline etc)
Framer: framer is a good mix between design and code especially with their new Studio app. I can export code for most applications- works best for web/web app stuff. Downside is there is a bit of coding knowledge required (the more you use CoffeeScript the easier it gets however). There is also no timeline based animation, so things you'd expect to have logic in one program operate a bit differently in Framer. EG if you wanted to expand a card to a full screen takeover, it wouldnt use two artboards- it would use one, and just expand it. While i dont mind this logic, i also get confused sometimes 'when is the best time to use multiple artboards vs just one'
After Effects: i dont really 'prototype' with this- i use it for animations. I create the animation, then use BodyMovin.js to export the json. The Json then goes into Lottie (which is amazing if you havent used it yet) and we can control the json (svg and img) objects on a native level. This saves developers a huge amount of time trying to animate complex things, paths, curves etc and is dev ready. I do like the AE timeline tools, but the program really isnt designed for mobile/web, its for animation.
Ive also tried Haiku- this aims at combining an AE like timeline with Framer like code parameters. Thusfar, i havent been impressed. Lots of users complain about bugs and the complexity of either importing their Sketch templates, or animating elements within the program. Im going to hold off on this because it seems like more work than its worth right now and they need to improve the software.
WIth all of these above, we normally hand off assets from Sketch or PS through InVision (static comps) which are the specs. For prototypes, sometimes we will give them a prototype file to replicate (if its simple enough) and sometimes I will make it in Framer or AE (animations, transitions etc) but there are times when additional front end work is needed to tweak those. We are on IOS and Android as well as mobile web (webapp).
All in all, we use Photoshop/Sketch day to day here at Wag!...so having this plugin do the work of AE while keeping Sketch like mobile/web centric tools would be great.
Im really excited to see how robust you are going to make this thing :) Thanks!
"I can export code for most application"
What do you mean with this? Framer doesn't export any native code, and all the JS you can produce there is far from production ready. The only re-usable things you can get from Framer for production use are animation values.
Ah ok! So that's what I suspected too!
There's a bit more than animation values that we use when exporting from Framer. I never said native code, what i meant was code we can work with on some level. i wouldnt say 'far' from production ready.
Thanks for the detailed explanation, Anthony!
I’m not too familiar with code export for Framer, but afaik, they export the parameters of your animation, right? As in, they don’t actually export a code module that your developers can plug into their iOS/Android code?
If it’s animation parameters you are looking for, then Diya exports “Animation Specs” for iOS, Android and Web. When you hit ‘Export’ on Diya’s bar, you’ll get 2 HTML files - one is for the prototype and the other is for your animation specs. At the bottom, you’ll see options for Apple SDK, Android SDK and Web.
Would that help your scenario?
Lottie keeps coming up in discussions very often with users, so I’m looking into this to see if it is feasible.
Anyway, this is just the start. Lots of things planned in the future for Diya :)
If it’s animation parameters you are looking for, then Diya exports “Animation Specs” for iOS, Android and Web. When you hit ‘Export’ on Diya’s bar, you’ll get 2 HTML files - one is for the prototype and the other is for your animation specs. At the bottom, you’ll see options for Apple SDK, Android SDK and Web.<
Ah ok. i wasnt sure what the output specs were without using this yet. I saw HTML and thought you had initially only made this for web or web app output of some kind. Good to know :)
That would definitely help the day to day yes. As far as Lottie, i replied to a users comment re: exporting Json. I think having those animations (or at least the more complex ones) with the ability to inject them into js is what most people are aiming for (id assume anyway).
Excited to see where this goes.
Downloading now!
Edit: This looks absolutely awesome and the tutorial videos are done really well: Short and to the point, but illustrate the process very well.
I'm looking very much forward to using Diya on a daily basis. Looks like your decision to go all-in on Sketch plugin development after Mitya was the right call. Really hope your hard work pays off.
Thanks Florian! And yes, I hope with Diya being inside Sketch, it'll be less effort for people to use it compared to Mitya :).
And thanks for your kind words on the tutorial. Glad you like them!
Is your website optimized for mobile view? Also, few examples will be great!!
I'll post examples soon. For now, there are tutorial videos that cover all the main features of Diya here: http://diyahq.com/videos.html
Are you seeing any issue on mobile? I'm using bootstrap and it seems fine for me? OK, someone just sent me a screenshot from mobile and it looks super weird :(. I'll look into it. Thanks for letting me know!
Login to Comment
You'll need to log in before you can leave a comment.
LoginRegister Today
New accounts can leave comments immediately, and gain full permissions after one week.
Register now