Sass compiled using the extension for VS code "live sass compiler".
All the rest is static and quite easy to understand.
We have an index.html, some "ring fenced" css compiled through the sass extension and some vanilla "ring fenced" javascript at the end of the index.html file. Using a very specific naming convention for the CSS and JS to avoid the Wordpress website interacting with this diagram and vice versa.
You have to save the main sass file(infogr-wrap....) as well as the sass file you are editing to see the changes reflected.
TODO
bring in boxes number by number 1 to 4
border box draw in consec too
plus text anim not reversing
MAKE LINES APPEAR LAST
SLOW DOWN SO TIME TO READ
DONE Add titiles back in on 6 icon box in the popusp
DONE main blue title repeated beneath lower blue icon stat
DONE close X on 2 infogs
DONE ADD + on mobile
if time animtate border with an svg
DONE circle smaller on mbolie on 4 icons - Couldn't tweak much because of longest pop up
DONE line height
DONE new chart more time between each box coming and each blue arrow
DONE mobile new chart title space below reduce mobile