# Smooth polygon animations using turf.js

In a recent mapping project I included subtle animation to help highlight different areas. As the map flies around to each bounding box, the boxes (polygons) themselves become visible and their boundaries are drawn. After automating this functionality to a certain extent, I thought it would be nice to share how it was done. To see all of the code in one place please visit this Github repo.

To summarize, animating any polygon/polyline in Mapbox can be done by measuring the total length of a polygon boundary

, calculating equidistant points along the boundary **turf.lineDistance()**

, and then updating the animated map layer with **turf.along()****map.getSource().setData()**

Previously I had used functions in QGIS like ‘Points along geometry’ to calculate evenly spaced points along a line for a smooth animation. The obvious drawback was that each polygon I wanted to animate would need to be analyzed in QGIS first. Turf allows you to generate the ‘Points along geometry’ dynamically – meaning it can calculate a smooth animation path for any series of coordinates.

For fun, I wanted to show this functionality on something not traditionally thought of as a map to show that turf can handle almost any shape. I thought a ‘connect the dots’ worksheet would be perfect.