How AngularJS and GSAP brought our Magento Ninja web design game to life
We recently created a challenging Magento Ninja game to highlight the power of the platform and why it is so good for creating ecommerce websites.
Posted by: Clare.Rose
We built it along the same lines as another game that we had created especially for Christmas, which was designed to build users’ understanding of SEO.
Both games used a combination of some of the latest web development technologies including HTML5, CSS3, AngularJS and GSAP. 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.
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?
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”,);
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 (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 Magneto 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.