How to Create Hamburger Animation using QuartzCode (Beta)

In this post I'm gonna show video tutorial on how to create hamburger animation using QuartzCode without writing any code.

Without further ado, here is the video:

The steps are summarized as follow:

1. Create circle, circle extension(middle path), top and bottom path.

2. Edit middle path using vertex mode so it appear as below

3. 2. Set color and lineWidth for all paths, set line end for all paths to round then make middle path stroke end property to 0.

4. For circle path, add stroke end animation  with fromValue = 1 and toValue = -0.1. We need to make toValue -0.1 because for some reason there is leftover path when line end round type is used.

5. For middle path, add stroke end and stroke start animation with pattern shown below. For stroke end, use fromValue = 0 and toValue = 1 and for stroke start, use fromValue = 0 and toValue = 0.67. Stroke start toValue need to be adjusted later to make sure it is aligned correctly with top and bottom path.

6. Align circle and middle path using alignment tool at top right of canvas.

7. For both top and bottom path, rotate and align so that it creates 'X' symbol.

8. Add transform animation for both top and bottom path. Change zRotation of toValue to 0, Additionally set yTranslation of top path to -24 and yTranslation of bottom path to 24.

Note that the translation respect iOS coordinate system. If OSX is chosen, the the coordinate system is inverted.

9. Align the 'X' symbol to circle.

10. Now you have a working hamburger animation. However you need to align the hamburger shape correctly. This might need a few try because middlePath stroke start toValue need to be adjusted to be aligned to top and bottom paths.

11. To add spring effect to top and bottom paths, change timing function for transform property.

Now you have a nice and smooth hamburger animation!

Download example project here: