How AngularJS and GSAP brought our Magento Ninja web design game to life

This is a quick introduction to how we integrated AngularJS and GSAP into the project, which will help you to start to using them in your next web design project.

AngularJS
AngularJS is an open source, clientside JavaScript toolset for building a framework for adding interactivity to HTML in web applications. It’s developed and maintained by Google and can be used with jQuery straight out the box, although it already comes with a small subset called jqLite as default.
If you’re thinking about using AngularJS for the first time we would advise you start without jQuery, as it can be difficult to separate the logic ‘The Angular Way’. By removing the jQuery library completely we found it easier to understand how AngularJS was intended to be used.

Why choose AngularJS?
There are an ever growing number of developers using an ever growing number of JavaScript libraries to create dynamic single page web applications. Notable examples include Ember.js, Backbone.js and AngularJS. Although each of these, and many other libraries, provides interesting possibilities we choose to use AngularJS for this project because it was a good fit for our goal of creating a fast, single-page app and it has a large open source community providing extensive documentation.

Adding AngularJS to your web app
To get started on an AngularJS project all you need to include is a single JS file which can be downloaded from Github the AngularJS website or the CDN.
Once you’ve included the library you need to create a module, this is best done in an external JS file for example app.js and in our case looked something like:

var app = angular.module(“quiz”,[]);

Here you’re creating an Angular module, giving it a name and setting any dependencies. For example there’s an animation module that provides support for JavaScript and CSS3 keyframes/transitions with existing and custom hooks.
You then need to add the module to your HTML, using a directive. Directives within AngularJS are markers you can place on HTML tags that tell AngularJS to run or reference some JavaScript. To hook our module up to our HTML we’ll use the ngapp directive:

Now that you’ve included AngularJS in your project you’ll probably want to get an idea of what you can do with it. You’ll find more information at the AngularJS website. While a great free introduction giving an overview of the basic aspects of AngularJS and how to create a web app is available from Code School.

GSAP
GSAP (GreenSock Animation Platform) is a suite of tools for creating high performance HTML5 animations that work cross platform. In an environment where Flash support is becoming more limited this type of library provides a great alternative for small to complex animations.

Why choose GSAP?
We chose GSAP because it’s faster than jQuery for animation and has a proven track record and is used on many impressive animations you’ll find around the internet. This particular showcase has lots of inspiring ideas.

Getting started with GSAP
To get started with GSAP you need to include the library, which can be found at the GSAP website and on Github.
The files can also be included via CDN, the CDN options are available via the GreenSock website and the latest version of TweenMax can be included with:

There are a number of different versions, including lite and max editions. Which one you choose will depend on your requirements. Go to the GSAP website for more information on the different versions and how to get started. One of the features we found useful when developing the Magento Ninja game was the ability to group tweens on a timeline allowing us to control the sequence of our animations. It comes both as a simple TimelineLite version and a more powerful TimelineMax version. More information about GSAP, as well as documentation, examples and guides, can be found on the GSAP website.