Hi everyone! 👋

Today we’ll continue a series of articles in which we’ll go through the process of creating animation in Flutter using Flare. What’s important, it’ll be all done from a perspective of the non-graphic-designer person (me!).

This series is split into three parts:

In this article we’ll add next steps in animation to our button using TrimPath feature from Flare:

We’ll start with the animation we’ve done previously in my first article. If you haven’t read it, you can check this animation here. You can also fork it and start from this point. Ready? Let’s start!

Step 1: Add a progress indicator

In this step we’ll focus on adding white progress indicator inside the circle button:

Firstly, switch back to the Design tab.

Add new Ellipse. Choose Shape -> Ellipse (or O on the keyboard) Change its size to 140x140. Edit properties as with the rectangle. Center ellipse. Select Align center and Align middle from top of the properties menu. Select Cap icon with rounded corners. It’s for a nice visual effect. Uncheck Fill. We want to leave only the border, so we don’t need this. Under Stroke change Thickness to 5 and change color to white. This border will indicate progress. Still, under Stroke change Trim Path to Synced and End to 0%. Why do we need this?

A little bit about Trim Path.

Trim Path is a feature that allows us to draw only the part of the shape (the part from Start to End with a proper Offset).

It’s important to pay attention to drawing right beginning and end of the path, because the point where we start drawing path — it’ll be our Start position.

You can read more about Trim Path in Flare’s documentation.

In our case, we’ll animate firstly only End value to make an impression that progress “grows”. When End will reach 20%, we’ll manipulate with Offset, so progress will move around the circle.

Let’s go back to making animation:

Step 2: Add progress indicator animation

Now switch to tab Animate and select ellipse.

Go to 00:00:30 frame and tap diamond next to End value with 0%. Go to 00:00:45 frame and change End value to 20%. It’ll make “grow” effect of progress. Still being on 00:00:45 frame, tap diamond next to Offset value with 0%. Go to 00:03:00 frame and change Offset value to 300%. It’ll make an effect of progress moving around the circle 3 times. Go back to 00:02:51 frame and tap diamond next to End value. Go back to 00:03:00 frame and change End value to 0%. It’ll make “shrink” effect of progress.

After those manipulations, let’s check how our button looks now:

Looks pretty cool! We’re almost there…

Step 3: Add Checkmark path(s)

The next part here is to create this tricky checkmark animation:

What we actually have here is two objects: a path that “morphs” from progress to checkmark (simple arc) and a apath that’s checkmark itself. Let’s create them:

Switch back to Design tab.

Select Pen tool (or P on the keyboard). Tap somewhere outside of the circle to create a single path point. (and remember to start from the top point, so Start will be from right to left) Tap two more times to create a checkmark. If you’ll make some mistake, just undo the previous point with Cmd+Z/Ctrl+Z If you have checkmark ready, choose “Done editing” on the right. (if later you’d like to edit the path, choose “Edit Vertices”) After this, you’ll see the properties of a new shape. We’ll change Stroke Thickness (to 5) and Cap (for rounded corners). Align checkmark in the center, as with rectangle and ellipse previously.

At this point we should have something like this:

Now we need to add another path to connect the end of the progress with the beginning of checkmark:

To do it, we’ll do something very similar as we did in case of checkmark:

Select Pen tool (or P on the keyboard). Tap somewhere outside of the circle to create a single path point (and remember to start from the top point!). Tap once again, and while holding, move right/left to create an arc. Tap once-twice more to create arc as shown in the picture above. If you make some mistake, you can undo changes with Cmd+Z/Ctrl+Z or move white points on the path, to change their position. If you’re done, choose “Done editing” on the right. Change Stroke as in point 5 of doing checkmark.

At this point you should have something like this:

When done, under Stroke (for both checkmark and checkmark progress) change Trim Path to Synced and End to 0%. From this point, it’ll be not visible, because at the beginning of animation we shouldn’t see those elements.

Now we can start the animation part!

Step 4: Add Checkmark animation

Now switch to tab Animate and select checkmark progress path.

Go to 00:02:59 frame (a second before last animation end) and tap diamond next to End value with 0%. Go to 00:03:10 frame, change End value to 100%, tap diamond next to Start value with 0%. Still being at 00:03:10 frame, select Checkmark path and tap diamond next to End value with 0%. Go to 00:03:25 frame, select Checkmark progress path, change Start value to 100% Still being at 00:03:25 frame, select Checkmark path and change End value to 100%.

After those manipulations frames should look like those:

And the final effect…

Step 5: Final animation!

It’s time for the final part! The last step is a simple scale checkmark animation. To make it possible, we need to set center point for a checkmark.

To do it, select Create -> Node (or G on the keyboard), tap anywhere to create Node and then move Checkmark path under newly created Node:

After this select Node, choose Freeze: Images from the menu on the right and now you’re able to move the node to the center of checkpoint:

When it’s done, we’re ready to make scale animation:

Switch to tab Animate and select Node. Go to 00:03:25 frame and tap diamond next to Scale values (for both X and Y) with 1. Go to 00:03:30 frame and change Scale values (for both X and Y) to 1.2. Go to 00:03:35 frame and change Scale values (for both X and Y) to 1.

Voilà! Our animation is ready:

You can check full file here at the 2dimensions.com website.

Summary

That’s all for today!

In this article, we extended our previous Flare animation with TrimPath animation. In the next article, we’ll integrate everything in the Flutter code.

You can check next and previous articles here:

Part 1: Create your first animation!

Part 2: More advanced animations with TrimPath

Part 3: Implement animation in Flutter project (coming soon…)

Stay tuned! 🙌