HTML5 Animation banners

Interactive Developer / Freelance ongoing as casual.
Agency : WPP AUNZ

Project Brief

- The environment deployed : Sizmek MDX / Google Double Click Creative Studio

- The technical stack that I used: jQuery, CSS3, Vanila JavaScript, GSAP(TweenMax).js, HTML5 Canvas

- Main project clients: Transport of NSW, AVIS, and BUDGET

- I have built HTML5 animate banners for the campaigns of 2017/18.

I have worked on web animations. No animate tool, no authoring tools like that but only code. Well, I have to correct my words. Of course, I used tools for sprite kits and assets. Other than that, everything is on codes.

I never know any interactive js libraries before. In Sydney at least, all the dev scenes are talking about mostly web(SASS,SPA,PWA,etc.).

I call myself interactive dev because that job title describes what I am into. Although, my experiences over two years filled with jQuery, CSS3 with SASS compilers, SPA JavaScript toolings and frameworks or so, which I am not personally into but deal with them daily as my job.

So when I started working on web animation, it was a whole different career to what I used to do. I still use JavaScript and CSS3 as always but have to think differently to code.

These whole projects have me learned to communicate with differnt accountable people from various teams.

I have developed more than 30 projects including form widget ads and dynamic content object banners.

How I get to GSAP? A long time ago, I watched (@sarah_edo) Sarah Drasner’s presentation. On the conference video (I cannot find the video that I watched on youtube now) she explained how to manipulate SVG on the DOM with using GSAP. It was a very inspiring talk. When I got into the creative advertisement studio as an ongoing freelancer, I decided to use GSAP for all required interactions.

Due to the page loading I only selected few examples. On this page, I only present MREC templates but all the banners also built to skyscraper, half-page, leaderboard, billboard, and tiny banners for the mobiles.