Working with Flinto — creating basic menu transition
A tutorial on how to create a very simple menu transition.
What we going to create today
A very simple menu transition with Sketch + Flinto.
- (Complexity level: 1/10)
- Time: < 15 mins
Step 1 — Sketch
Create the design in Sketch
Arrange the layers properly to ease the setup in Flinto later. I have named it as top, middle and bottom.
Step 2 — Export to Flinto
Export it to Flinto with the plugin.
Download the plugin here: https://www.flinto.com/mac_sketch_plugin
If you are designing your mockup in 1x, select 100% instead of 200%.
Step 3 — New Behaviour
Select the all the layers and create a behaviour (the button is at the top menu bar)
Step 4 — New State
Click the + button to create a new state.
Once it is created, change the opacity of the middle layer to 0%.
Shift the top layer to the middle
Shift the bottom layer to the middle
Step 5 — Create the third state
Click the plus button again to create a new state.
Then, rotate the bottom layer by 45º (you may press command and hover to the corner of the layer to rotate) or under Rotation, change the z figure.
Next, rotate the top layer by 45º.
Step 6— Create the fourth and fifth states
Click on the second state then click on the + button, it will duplicate the state.
Similarly, click on state 1 then click on the + button, it will duplicate the fifth state.
You may change states to preview the animation.
Step 7 — Define the timer
The Timer Link sets the time between two states.
Tick the Timer Link then set it too 0 ms and set the Target to next state (this means when the preview is played, it will transit directly to the next state).
Repeat this for state 2, 3 and 4.
Step 8— Preview
Once you are done with the above, tap preview to view your menu transition.
You may record it as well by clicking on the grey circle icon beside the percentage.
Remember to tap the house (home) icon if it is not working.
If you like this tutorial, click to Recommend button to boost my morale. =)