How to Create Interactive Design with a Nested Component in Sketch
Anima Animations for Sketch — Tutorial & Freebie
Anima (was Timeline) is a tool for interaction design, right inside Sketch.
On this post we’ll explore the key components of Anima Interaction Editor.
Update: Timeline is now part of Anima Toolkit — Allowing designers to create Responsive and Interactive High-Fidelity Prototypes, all inside Sketch
In the last tutorial we have demonstrated a basic interaction (link here if you haven’t seen it). In this tutorial we’ll create an interaction which combines a nested component.
On this tutorial the hamburger menu is the nested component, because it has its own mini animation when clicking it.
Nested components allows you to have one interaction inside another. This behavior is similar to Nested Symbols in Sketch. It is recommended that a Nested Component will also be a Sketch Symbol.
Let’s get started!
Create the Nested Component
Best practice is to have nested component as a symbol.
Select menu_group and make it a symbol. Now select your new symbol, and click Prototype Tab > Interaction > ‘Create’ in the plugin panel for Interaction Editor.
Now, we’ll add some states and actions to create this behavior:
Now add a Click action that will animate the menu hamburger icon into an X sign. To do that, rotate the top line by 45°, and the bottom one to (-45°), and align each one to the center.
Hide the middle line by setting opacity to 0 (or click the hide icon on the layer list).
Between the two states, add one more state where the black circle is shrinking, to make it feel like a camera. We’ll use a Timer to trigger a transition from this middle state.
Creating the Main Component
After the Nested Component is ready, It’s time to create the Main Component.
Fisrt, insert the interactive Nested Component within the layers, as a symbol instance. Then, select the artboard and click the Prototype Tab > Interaction > ‘Create’ button again to enter Interaction Editor.
Now we’re going to use a Hover animation when the menu is open. The yellow rectangles will shrink to the right when the mouse is in, and open again when the mouse is out.
First define the click action when menu is open and close. You don’t need to edit the menu since it’s already a nested component. Make sure you define transitions to both directions.
After that define each state of the open menu: Mouse in and out of each Category.
In this example we didn’t change any of the Transitions durations or the Curves default, in order to keep it simple. But You can definitely do that.
Once you’ve set everything up, you can preview the component by clicking Run Component. While running a component, you can click or hover it to see how the component behaves right inside Sketch.
Now that the design part is done, click on Export Code.
After a few seconds of upload, a popup with a link to share will appear.
This is the link for our example: http://bit.ly/menu_sample
That’s all for today!
What is Anima?
❤️ Anima team