tinker.ph | Animating equations on the web: Part 3

Animating equations on the web: Part 3

Posted Jun 30, 2024

#dev

Continuing off of animated equations on the web - part 2, I finally decided to complete the last bits of work needed to animate. Spoiler, this doesn’t actually automate the transition from static equations to animated equations.

Previously, I wrote about my plan, which was to generate the diffs before animating the result with revealjs. What I actually ended up doing is taking the output of KaTeX, manually tagging the parts of the equation with data-ids, and letting revealjs animate from one slide to the next.

It’s not as shiny as I originally wanted it to be, with just simply entering the equations and letting the script do the heavy lifting, but I am still happy with the result.

Demo below:

f (2) = (1 - F) + ((1 - F) a + F b) + F b f (2) = a (1 - F)^{2} + (1 - F) F b + F b f (2) = a (1 - F)^{2} + b ((1 - F) F + F) f (2) = a (1 - F)^{2} + b (2 F - F^{2}) f (2) = a (1 - F)^{2} - b (- 2 F - F^{2}) + b f (2) = a (1 - F)^{2} - b (1 - F)^{2} + b f (2) = (a - b) (1 - F)^{2} + b