Ultimate frisbee plays

This is a little project for learning some CSS-animations. As I play ultimate frisbee, and we often use drawings to demonstrate tactics, I wanted to try out if I could produce some plays with pure CSS. This site uses hint of JavaScript for smoother experience. Obviously, I couldn't use our teams plays, so I had to use Google to find something. Link to original plays from Playspedia can be found after every animation.

⬇ Scroll down to plays ⬇

Hurricane

Original: https://playspedia.com/play/20238
  1. The players have lined up in a vertical stack. Handler 1 throws the disc to the center to handler 2, and simultaneosly the first player in the stack activates cutting to the break side, and the last player in the stack cuts to the open side.
  2. The player cutting to the open side cuts under, and the player cutting to the break side cuts deep.
  3. The player on the open side receives the disc.
  4. The player with the disc throws it to deep.

Zipper

Original: https://playspedia.com/play/20209
  1. Players have lined up in a vertical stack. The last two players in the stack cut up and then under to the opposite sides of the stack.
  2. The third last player in the stack cuts deep.
  3. The handler with the disc throws deep.

End zone

Original: https://playspedia.com/play/20130
  1. Players have lined up in a vertical stack in the end zone with three handlers.
  2. The center handler cuts up to the side where the disc is.
  3. The first player from the vertical stack cuts for the dump and if there is no pass, cuts up to the end zone.
  4. The handler throws the disc to the player.