Medieval Hub

The summer break has ended and freshers have started rolling in. It has been a week only but it is a crowd already here in DTU. As expected, they are all pretty excited and apprehensive about First Semester and want to know pretty much everything about the academics beforehand. This gave me a perfect opportunity. The result: M.A.R.K.S.

Marks was officially launched on 15 August 2014, and was promoted mostly through Facebook. Exactly one day later, Marks had recorded around 1200 hits, making it an instant hit among the freshers. I also received some direct messages asking about the technical aspects of the website. That is why, this post is dedicated to them, also making me fulfil my earlier promise (sadly, I won't be picking up ScrollMagic right now).

M.A.R.K.S. is fairly an elementary example of GSAP and jQuery which is wrapped up in minimal amount of JavaScript. For this reason, I will simply be narrating the working of JavaScript which basically controls the animations and on-click gists.

The page is broadly divided into two sections. The header and footer are placed on top of them. The lists are hence placed relatively below the top of the section(which is top of the page, not to be confused with bottom of header). The placement of the list is tricky, because if it is too long then it will flow down and behind the footer, thus making some items hidden from view. That is why the six-subject list is quite appropriate. Also, the font size and line height had to be kept in mind, which too can cause enlargement of text resulting in its subsequent overflow. Keeping my audience in mind, I saw that many of them use their smartphones for web browsing very often and that too in portrait mode, which ensures absolute zero chances of content overflow. However, in landscape mode, there is still a good chance of it. You can see this in the screenshots below.

The code for this feature is available on internet on many a sites, but I found some drawbacks in most of them which were visibly hampering the functionality I was aiming to deliver. As a result, I wrote my own snippet in about 4-5 lines of JavaScript employing jQuery.

I must admit that this relies on manually defined ids, but an another alternative would be to iterate over sequentially defined div elements using tag name, hence not relying on individual ids (as they are now).The data-* attributes of HTML5 can also be used along with data() method of jQuery to serve similar purpose. Both are equally fast in processing as they process on DOM ready, but personally I wanted full control over each element and and hence wrote it the former way. The script simply generates working script on DOM ready, hence taking up only the browser's RAM on client side and not taking any bandwidth or relying on server. You can see this only in Developer Tools of your browser and not in source code, as that is just raw and unprocessed static code.

This required only a clear visualization of sequence. What followed was a line of code for each tween, as GSAP handles it so smoothly and efficiently. In fact, during the development of this site, I didn't even bother to test it on various browsers and platform because it is already known that GSAP works flawlessly on all of them. If you are familiar with Motion Tweening in Flash, then writing animations would be a piece of cake for you.

The key thing I would like to emphasise would be the Staggering method which I couldn't explain properly in my previous post. The selector requires an array of elements which would stagger to or from a set of properties defined thus. Often these can be a collection of ids, or a class applied to multiple elements, or, like I used, an element tag like list items, paragraphs, or even entire sections. All this can be animated through various triggers controlled by JavaScript via plugins or custom script as well.

Let me wrap this up by concluding that GSAP is just one of the many open source interactive platforms available on the internet for serving many a purposes mostly aimed at resolving potential issues faced by large websites experiencing huge traffic. M.A.R.K.S. is just a humble effort put forward purely for promoting interest in Web Development among the readers. I hope you find this article useful.