Science Animations - M13 Phage

Created SVG web animations to aid a scientific research paper demonstrating a new way to exploit the M13 Phage life cycle for DNA synthesis. Analyzed dozens of publications on the various proteins and systems involved (p1, p2, p3, p4, p5, p6, p7, p8, p9, OmpF, Tol-Pal, Flagellar Motor), discussing at length with the Principal Investigator to discern their approximate structure, geometry, and transformation. I first modeled in 3D all pertinent components of an E. Coli bacterium and M13 phage based on these publications. I then created 2D assets based on the 3D models and animated several stages of the process in After Effects. Using a plugin called Bodymovin, I exported the animation as SVG image sequences. Using Javascript I created a browser interface with a slider to scrub through the animation.

The advantages of this method are the extremely small size of the animations (on the order of KB) and the ability to animate the SVG's layers in a browser.

Example Time Slider:
https://bodymovin-web-slider.vercel.app/