Program Statement: Designing mesmerizsing, interactive timeline for the user’s weight loss journey.
For the past few months, we have been working on a health app that helps users in their weight loss journey. Here, we call it more of a Wellness Journey. This app keeps track of your weight, your inches, water intake, and, of course, your calories. We are creating a platform that acts as a personal assistant in their journey.
Lately, our users have been asking us for a feature in the app where they can view their entire journey i.e what was their weight when they started, and how things progressed along the weeks, their major achievements (things like the 1st pound lost, after a month and so on….). So we decided to give it a go. Read along to see what we came up with.
Solution: After brainstorming with our UX designer, UI designer, and fellow developers, and discussing multiple approaches from a simple listing to complex timelines, we finally settled on the one which had maximum opportunity for micro-interactions, animation, and user engagement.
The idea was to show the weight loss journey to a user, quite symbolic to the journey on the road which can have milestones in between based on the achievements the user has attained. A path which will be laid out in front of the user and then will be filled accordingly to the point where the user has reached at a particular point in the duration of the program.
Below is the final implementation of the feature in our app.
I am only going to cover the animating path in this blog and other animation and interaction in the next one.
Drawing leader line
Leader Line is basically the center line (dotted line in above video), which is equidistant from the inner and outer contour line.
This is the simplest part of this animation. We have to draw a series of connected horizontal lines and semicircles.
The above illustration explains how we draw in SVG. You can read more about SVG paths here. The negative sign in horizontal lines means we want our lines drawn from right to left. Arcs in SVG require extra attention.
Arcs accept parameters, as `rx`, `ry`, `x-axis rotation`, `large arc flag`, `sweep flag`, `finalX`, `finalY`. As we are basically drawing a semicircle, we don’t need `x-axis rotation flag` and `large arc flag`. `Sweep flag` determines which side we want to draw. 1 means the positive side and 0 means the negative side. To know more about SVG arc check this link.
From the above line of code, we have our leader line ready.
For this step, I want you to stop and have a look at the animation video above. Our ultimate goal is to animate the path. For smooth animation, we have to break down into smaller segments and then attach them piece by piece.
To divide the leader line into smaller chunks, we will use svg-path-properties library.
Suppose the height of the road is 20pt. Then, to make a close path from a single line, we need an outer and inner line having 10 points distance from the leader line each. In the above lines of codes, we get points for the leader line directly. Now, we have to calculate the same for the inner and outer line.
Another point of significance that I would like to mention here is that we just can’t subtract or add 10 to the leader lines to get our outer and the inner path without considering direction.
Just like vectors, we will also use direction here and for this we will use our old friend ‘Trigonometry’. We will get two points on the leader line and find the angle between the line formed by the last two points and the x-axis.
If you have two points, (x0, y0) and (x1, y1), then the angle of the line joining them (relative to the X axis) is given by:
theta = atan2((y1 – y0), (x1 – x0))
tanθ = Perpendicular / Base = (Difference in height)/(Difference in width).
We can calculate θ by using formula for tan inverse. After calculating angle we calculate x and y position as:
Δx = radius * sin(θ)
Δy = radius * cos(θ)
Now, since we have coordinates for the inner and outer path, we need to translate them into a closed SVG path to form our road. Here, the D3 library comes to our rescue. We use d3-shapes’
area method to get our path.
Please note that I am appending the Inner path point at the end of the Outer path point.
Until now, we have only laid down the solid block of the path. Now, we have to animate the path as well. As I said earlier, for animating the path, we will render pieces after pieces. By pieces, I meant we will take a small subset from the outer and inner path segment array and convert it into a path and render it.