Logonimation 1

In this tutorial, we will be creating a logo reveal animation with Friction.

Here’s the video version for this tutorial.

Create the base shape

1. Create a circle 200 px.
2. Convert to path and delete circle.
3. Select the object and grab the Point Tool.
4. Hold control shift to see nodes numbers.
5. Disconect nodes 1 and 2.
6. Keeping the nodes original numbers, delete node 1.
7. Connect nodes 0 and 2.
8. The new segment will be a curve, make it a line.
9. While they are selected, add a new node.
10. Hold control shift again to see nodes numbers.
11. Disconect nodes 2 and 3.
12. Delete node 2.
13. Connect nodes 1 and 3 and make it a line segment.

Create logo reveal animation

1. Remove stroke.
2. Duplicate it and group them.
3. Promote the group to layer so that the blend mode will not influence other objects.
4. Select the top object and change blend mode to DstOut. This will cover the object beneath.
5. If you notice, it doesn’t cover all of it, I believe this has something to do with antialiasing. We will fix this later.

6. While the top object is still selected, activate the rotation animation.
7. Go to frame 20 and rotate -90 degrees.
8. Enable Graph mode and smoothen animation curve.

9. To fix the antialiasing issue, duplicate the top object several times.

You can now use the animation as a building block for your design.