GreenSock – A Robust Library For Animation On All Devices

Screen shot 2014-12-16 at 10.39.16 AM

I am an old-school Flash coder, going way back to 2000. Flash turned me, an identity and print designer, into an online evangelist. It was through Flash that I discovered the power of interacting with an audience. I also recognized the opportunity of adding elegant choreography to motion design in a very portable format.

Insert rant about the iTunes business model effectively killing Flash…..and then the evolution, or a part devolution, of movement online and on-mobile…

The (D)evolution After Flash

Enter the era of the jQuery slider, slider, slider – jQuery has a huge library, but wasn’t really optimal for movement-design. It’s a fine grab-bag of out-of-the-box for most client budgets, but real choreography seems to require a lot a of time, speciality, and debugging.

Enter HTML5 and CSS3. If you can drop older browsers, which you should, you had a few nice touches to add here and there via the more conventional code.

Enter Adobe Edge Animate. This is a clear attempt at reviving the magic of their Flash product (originally owned by Maccromedia). It has a stage, (hurray), but it’s not fully flushed out for performance or compatibility…. almost a solution but…

The Turning Point (For Me)

Enter GreenSock. No stage! And that would have been the end of this story for me and many other designer/coders out there, but somehow I got hooked. I am experimenting with just the free components of the library, and they are robust and logical. GreenSock seems to have componentized the most popular trigonometry moves we had used in Flash and then some. Easy “to” and “from” commands, delay, repeat, labels and a library of eases you can play with here: http://greensock.com/jump-start-js#easing – most of the easing properties also have pretty granular parameters as well. Write timelines inside of timelines for control. Write functions for functionality. Adobe’s Edge Animate even allows their users to incorporate GreenSock scripts. Any debugging I had to do was purely managing a delay for a slow internet connection and a bit of CSS (on IE, of course).

GreenSock Advantages Over Any Other Animation Option

GreenSock beats other options out on

1. Performance

2. Compatibility

3. Robustness

So if you can live without a stage, roll up your sleeves, and write some code, GreenSock is worth making a return to movement. Web sites are already cropping up everywhere with GreenSock in place of the expected home page slider.

2Examples. 1 Responsive. 1 More Animated.

Here are two examples of some campaign landing pages I made; my first experiments into the medium.

holidaythumb01One is within a responsive framework so that the layout and code both perform on mobile.

The other relies more on positioning in whole numbers to take fuller advantage of more of the (free) GreenSock library properties, but misses the opportunity to have a responsive layout. I have opted for fixed widths and heights in exchange for more movement on holidaythumb02desktop and mobile.

My next steps into the medium will be 1. getting both the power of positioning and the flexibility of a responsive layout, 2. making more interactive pieces, like timelines or micro-sites, and 3. trying out some of the paid plugins.

The Question – When Is The Banner Ad Revolution?

IF GreenSock can be published as a stand-alone file (which does not require a plugin), and publishers can manage this file in their ad serving systems / trackers, we will see a banner ad renaissance (if you will). Some publishers are already offering this option – for a price – treating the animations as rich media. But who will make a portable, stand alone, contained, light weight version happen? GreenSock? Adobe? A very clever third party? Stay tuned……

And if you have an answer, leave a comment below.

To have BIANCHI design create an eye-caching campaign, brochure site, landing page or anything else for online or print, contact us.

 

 

 

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

Current month ye@r day *