It’s been a while to write how I have been on my blog.  My real life was so hustling me and couldn’t get time to write something.

I also feel like time stamping on each day for this 100 days challenge is not really useful for me. Instead of 100 days, I’d rather keep tracking what I have been doing. Doing so, It would be more flowy to explain what I think, and what I have experienced.

I will still use the 100days of code but days no longer point real day counts.


You may notice that I just brief that “I have worked on as usual, blah”. So what I have exactly worked?

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.

Applaud to GSAP!

I never know any interactive js libraries before. In Sydney at least, all the dev scenes are talking about mostly web and sass. Nothing else so I wasn’t really exposed to any kind of field of non-web development as an interactive developer. 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.

I like to show you some examples that I have worked on.

Dec-12-2017 14-46-54.gif

So.. 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.

Dec-12-2017 14-52-37.gif

GSAP is quite awesome. It has a strong community that you can pretty much search for any animating effects. I mostly get helps from that community forum.

If you want to manipulate SVG up to very delicately, you have to buy the licence. Unfortunately, work doesn’t buy the licence (I am sure they will cover if I request but the communication to process always has been put behind.) so I haven’t used any premium plug-ins.

Dec-12-2017 15-04-22.gif

I use the tween max plug-in out of GSAP. This plug-in includes most of the free plug-ins as one package. This is quite enough for what I am doing since our assets are mostly rasterised assets.

Dec-12-2017 15-10-22.gif

As you see the examples above, you can animate pretty much what you want. You may sometimes need to think to tweak either on codes or assets. To make all compiled files under the 50k is a tricky part.



Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s