Animations bring liveliness to the documentation like ppt, github readme or user guides. Rather than losing the opportunity it’s better to grab people’s attention and keep them connected to the documentation for which some animation is beneficial.
Tools Required
For implementing the gif animation I suggest 2 tools:
- Draw.io
- ScreenToGif
These two tools are enough to build flow diagrams, screen recording, frames transparency and animation.
This article expects a basic understanding of making flowchart using draw.io.
Draw.io
As per my understanding, it is the one of the most popular platforms used to build any kind of diagrams or flowcharts for the documentation. Furthermore, we can add vibrancy to the flow chart with the help of its plugin extension feature
- Open draw.io and press Extras -> Plugins
2. Now, add a few extensions i.e. flow.js and ex.
3. Now, for making the diagram drag and drop a few of the elements in the draw.io chart. Let take this basic CI/CD example
4. Go to Files-> Export-> URL-> Create. Keep the default options as is and click the Preview button.
5. The flow diagram will open in a new web page and the url will appear like this
Now, few updates are needed in the url to see the ex and flow.js in action.
- In the opened preview website, change the domain address from viewer.diagrams.net to app.diagrams.net
- Add these two optional parameters:
p=ex
lightbox=1
I still don’t know if any direct procedure exists to perform this activity. If anyone is aware, please let us know in the comments.
And finally, the url will look like this and hit enter with the updated url
If the procedure is followed correctly, then just click the arrows and animation shall start like this.
ScreenToGif
Till now, we have made the animation ready but to convert them as gif we need a screen grabber. For this, we have a lightweight and awesome tool whose portable version can be downloaded from here
- Once downloaded, start the ScreenToGif.exe which appears like this:
2. Click the recording button and resize the window as per need:
3. Now, press the record button and it’s your wish till when you want to keep it running as this will be considered as one iteration of the animation loop.
4. Once done press stop button
5. Sometimes colorful background or organization logos are preferred in the ppt, hence needing complete transparency in the images or gif. For such effects select these options:
And, set the color exactly same as the color of the existing frames. For eg. in my case its white so I’ve specified this color #01FFFFFF
5. Go to File and click “Save as” and select the desired location for saving the screen recording as gif.
Finally the animation is ready and we can use it in github readme or any ppt. We can enhance the gif by adding more animated features on it using powerpoint but leaving that up to the readers.
Generally, these files are of big sizes so I suggest compressing them before use. We can use this site for gif compression.
Summary
Presentation is one of the most important parts for enhancing the overall quality of the product in the industry. There is a very famous quote by the great Albert Einstein i.e.
“If you can’t explain it to a six year old, you don’t understand it yourself.”
Light animation capture the audience’s attention and helps them understand the overall process easily which certainly adds value while selling a project within the organization or in the open market.
