How to add Haiku animations to Sketch2React

? Wooo-peeeee-dooo!

Turns out September has been quite busy for us — thank a long vacay over the summer for that ☀️ Builds up the hunger for innovation ?‍?

We released another small but really important update — 0.56 which brings you the ability to embed Haiku animations directly into Sketch via our framework.

What is Haiku?

Haiku aims to be many things but for us Haiku means motion. That can be interactive. Depends on your needs really. But just to be able to embed this into Sketch2React inside of Sketch is mind blowing enough!

https://tenor.com/X76v.gif

How to

Download the new demo file and try it out for yourselves. Here’s a bunch of great open source animations you can play around with.

Or you can this one by us, a very basic animation that has come click-enabled interactivity.

Basic tutorial

Find you some cool example animations here
Press the Embedd Options button
Go to HTML Embed

This is where you find all relevant code

Open up our demo doc
Go to the new Haiku-animation component. It’s a symbol with overrides.

Here’s where all the magic needs to be inserted

? Let’s look at the overrides

{attribute.haikuSettings}

By default the only value here is {loop.true} but we added {loop:true, contextMenu: ‘disabled’} which disables a very annoying banner that is always included in all Haiku animations by default.

{attribute.animationSourceUrl}

This is where the animation lives on Haikus servers. And this is where you fetch that code:

Copy this code into our Haiku symbol inside of Sketch

Important! Every time you update your animation from within Haiku and re-upload everything in this code snippet changes and needs to be updated inside of Sketch.

{attribute.id}

You find it here (check below) and in this case it’s mount-Sketch2React-SuperHero. Copy+paste that into our symbol in Sketch.

{attribute.haikuCoreUrl}

This is the Haiku Core (sounds important! ?) and this one updates from time to time, be sure to check this one if your animation suddenly stops working. Even more important to check it if you’re using animations you haven’t created yourselves.

Your done!

Great work! By now you probably are very excited on how to combine Haiku with Sketch2React. Here’s a great resource for learning the app:

https://www.haiku.ai/learn/