Close

Web animation and game tools

In this post I will attempt to collect web animation and game frameworks for the web

Animation

Animated vectors with Snap SVG
Animated vectors with Snap SVG

Snap SVG – simplifies SVG animation
Greensock – adds elaborate tweening to css/javascript and even SVG.
P5.js – coding for artistic projects / installations
D3.js – advanced interactive infographics
RaphaelJS – SVG graphics and animation

Gaming

Animated DeLorean with GreenSock JS
Animated DeLorean with GreenSock JS

CreateJS – Advanced toolset for creating canvas games
Phaser
– A canvas gaming library including tweening, physics, sprite sheets, tilemaps, and all you need for a sprite-based game.
Playground.js – A basic starting point for a gaming project.
P5play.js – using P5 for gaming
Love2D – program games using the user-friendly language LUA

Front-end and prototyping

Prepros – handy UI for concatenating, minifying and compiling JS and SASS. 
Materialize.css
– CSS framework that allows quick website setup using Material Design.
Pixate – prototyping tool
Custom web elements – web snippets, install directly with npm or Bower

Creative software

If only to prove you don’t need that expensive Creative Cloud subscription.

Hype – Timeline based animation tool for HTML5
Sketch – Innovative UI and icon design tool. Works great with Swift and Xcode.
Affinity Designer – Vector design tool
Affinity Photo – Innovative editing software
Codea – Excellent app to program games in LUA – straight on your iPad
Principle – UX / prototyping tool
Stencyl – Game creating without code – based on MIT scratch
Webcode – Visual editor for creating SVG, canvas and CSS artwork