I ran into a technical challenge while developing our new Faros about page. There’s one part of the page that you can probably guess required additional work. The SVG in the timeline (the purple line in the below GIF).
Getting to this solution was not easy. I couldn’t find any articles about solving this challenge either so I figured I’d document my solution in case it helps you.
I’ll skip the multiple attempts I made and get right to the good stuff.
Note: The code snippets in this article are trimmed to provide a simplified, higher-level view.
You’ll notice the three path elements. While it’d be ideal to have just one, as it goes with responsive web design, the structure of the page changes enough between mobile, tablet, and desktop that three different paths are required.
The good stuff
The key component to this solution is the variable vertical portions of the path. Since the aspect ratio of the SVG must be maintained (otherwise the SVG would overflow off the page upon resizing) the vertical portions of the SVG must grow as the horizontal portions shrink. In path speak, each v must be dynamic while each h and a can be fixed.
You may have noticed the scale attribute on the SVG. Using your preferred method or framework, you can attach a function to your SVG containing this attribute. The function can look something like this:
Note: You will need to call the above onResize in a window event listener. You can figure that one out on your own :)
More math than you may have expected, eh? Same. It took me a while to get to the above formulas and while the formulas can most definitely be improved (I’m no mathematician) they give you an idea as to what kind of formulas can work to make your SVG responsive.
So what’s going on here?
The reason for the if else statements is that as the window width shrinks below 600px I couldn’t find a one-size-fits-all formula (see what I did there?) for the path height coefficient. Any brilliant people out there may be able to figure one out and please do enlighten me if so.
Since I used a different path for tablet, you may notice that path doesn’t have any dynamic vertical portions. This is because our responsive tablet design has a fixed width between 600px and 960px so the width of the SVG doesn’t change and therefore the height doesn’t have to either.
The only noteworthy piece of CSS is the vector-effect. This needs to be set to non-scaling-stroke if you want to keep your path stroke the same width on all screen sizes.
The reason for setting the stroke-dasharray and stroke-dashoffset is for animating the SVG in the next bonus section.
Bonus: Reveal on scroll
You may have noticed the scroll-reveal attribute on the SVG. Using your preferred method or front-end framework, you can attach a function to your SVG that has this attribute. I kept it simple with the following logic that adds a class to the element when the top of the element enters the viewport.
Note: This needs to be configured appropriately depending on your framework of choice.
By using Sass variables, it’s easy to keep the animation properly timed as more items are added to the timeline. We hope to add many more items to our Faros timeline, after all!