As some of you know, our team recently launched Diez, the open-source design language framework. Part of the work of shipping an open-source project is to write guides so teams can learn how to use and adopt it. Recently, we created this animation using Haiku Animator to help illustrate some of the concepts in one of our guides.
In this tutorial, we’re going to cover how to create this animation step-by-step in Animator, using some of the techniques we’ve employed in previous tutorials.
Starting off on paper (sort of)
The first thing we did was lay down the basic concept of the animation and what we wanted it to look like. We did that in the form of a very simple storyboard made out of Sketch art-boards, and a written description of the different effects and transitions we were envisioning for the final result.
Preparing the slices
This part, while simple, is very important. You basically have two choices:
- Export one big group containing all your slices, and then ungrouping in Animator, which allows you to maintain the exact position of the slices.
- Export the pieces you need to animate separately. If you choose this option you would have to manually organize your pieces into your exact composition but since you won’t be ungrouping, you wouldn’t break the connection between your slices in Animator and your slices in Sketch, which allows you to easily swap colors or other properties and have them automatically reflect in Animator.
In this case, we went with the second option because it was a rather simple composition, which we replicated by importing a JPEG of the art-board into Animator with a 0.5 Opacity and use that as a sort of “Onion skin” template to place the slices in the correct locations. This decision later allowed us to easily make some changes to a few of the original slices, like the dotted lines. In any case, you can swap slices if you need to.
Tip: In this case, we used Sketch to design and export our slices, but you can also do it from Figma, Illustrator or using SVG's.
Animation mode ON
The first couple effects and transitions used on this animation are really very simple, using basic properties like Opacity and Position to create the desired effects. Here’s a breakdown of how it all starts:
- The “Diez” card fades in using the
Opacityproperty and then slides up, via thePosition Yproperty.
-
The iOS, Android and Web cards stagger in using a combination of
OpacityandPosition Y, plus theEaseOutBackEasing Curve.
-
The light-purple background of the connecting lines fades-in via
Opacity.
And now for the fun part...
Here’s were the animation escalates a little bit in complexity, and we use some other tools and techniques available in Animator.
First, a purple ball appears using Opacity and Scale, and then it follows the curved path of one of the connecting lines. For an in-depth tutorial of animating elements along a curved path, click here.
Then, that ball disappears, and a purple container appears in its place, again using the same properties as before. This process repeats, at different points in the timeline, for the rest of the connecting lines.
You’ll notice that after the ball goes through each of the connecting lines, the dots of said line start to move, and they keep moving on a loop. To accomplish that effect, we:
- Made each dotted line a Subcomponent.
- Replicated the exact same fade-in effect as the light-purple background, as described before.
- Animated the dotted lines using Line Animations
StrokeDashOffset, making sure that the dotted line originated and finished in the exact same position. - Set the Subcomponent Playback to
Loop.
Take a closer look
If you want to see first-hand how everything is wired, you can fork the original animation, inspect it and play with it as much as you like!
https://share.haiku.ai/u/Tina/whatYouScaffoldedOutWOExample
That’s all folks!
As you can see, Animator is not only great at producing codebase-ready, functioning UI components, it can also be your best ally when it comes to delighting your users by adding simple, yet attractive, and most importantly, didactic animations to your website, product, or your documentation and other learning materials, like we did. You can either embed your animation into your codebase, or you can export it as Video or even as a GIF!
If you created something that you’re proud of and want to show it off, let us know! If you set it to Public, we can add it to the Showcase.
