aptoivonen / ylimaa-animation

Create an animation about the battle of Ylimaa

Animation of the battle of Ylimaa

Create an animation about the battle of Ylimaa. See live animation here.

Personal Goals

• Create a runnable, pauseable and reversable animation of the battle of Ylimaa
• Learn SVG and GSAP while doing so

Technologies used

• Extracted the map as SVG from Openstreetmap
• Created map symbols as SVGs from symbol.army
• Animated with GSAP library
• Map control button icons from Font Awesome
• Basic html, css, and javascript

Roadmap

• Familiarize with GSAP
• Familiarize with SVG basics
• Create all symbol SVGs
  • units
  • supply
  • artillery
  • boundaries
  • strongpoints
  • battle
  • air defense ?
  • artillery barrage ?
  • bridge
• Create all animation steps
• Fill out unit info
• Clean map SVG and highlight important features

Issues

• Unit SVGs inside map and map layout shown incorrectly in Firefox

Author

Aleksi Toivonen