Jump to content
Search Community

GSAP for iPad Ads

joe_midi test
Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

Hey guys,

 

This is my first time posting on here, and I hope to post on here more often in the future. I've been an avid user of AS3 Greensock for a long time, and I've only recently begun to use Timeline.

 

I'd like to start building some animated ads for the iPad. I know that most ad providers suggest to use Zepto.js for DOM manipulation, but I'd rather use GSAP as I'm more familiar with the construction and syntax of the tweens.

 

I was wondering if anyone on here had produced iPad ads for publishers who normally recommend Zepto?

 

 

 

 

Link to comment
Share on other sites

Hi and welcome to forums,

 

Zepto is jQuery-like library, which is lighter than jQuery(smaller filesize, some features removed). Most of the developers use it like alternative to jQuery, not to TweenMax. Zepto and jQuery are general purpose libraries - they can handle DOM selection, events, ajax etc...and tweening and simple chaining. TweenLite/TweenMax on the other hand are Animation libraries - GSAP is tool for animation and is optimised to give the best results in animating. The performance is times better then the animation methods of jQuery and Zepto. So in normal projects I would use jQuery/Zepto to select the elements and add event handlers and TweenLite+CSSPlugin for the animation itself.

CSS3/HTML5 banners have to be small in size, so most of the developers use Zepto other than jQuery since Zepto is lighter and also have simple touch event support ( like tapping and swiping  ). Then they use Zepto's internal animation mechanism or CSS3 transitions for the banner animation itself. This have some limitations - like chaining, callbacks, reverse, unproperly set values(example prefixes), no callback etc. TweenMax/TweenLite on the other hand does this for you, so it is very easy to create, stop, pause, reverse a tween ( or sequence of tweens ), it is fast and also make the animation work for older browsers. Also, check the great TimelineLite ( I use it for banners )

 

My suggest is:

 

If you have complex animation/ajax and don't worry about filesize - Zepto + TweenLite + CSSPlugin

 

If you have complex animation, you don't pull dynamic data, don't have complex event handlers and worry about the filesize - TweenLite + CSSPlugin only

 

If you have simple animation, a lot of event handling, worry about filesize, but don't worry about compatibility or consistency - use only Zepto, or some CSS transitions. 

 

 

It just depend on the type of the project you're creating. I personally would go TimelineLite + some selector engine ( like Zepto, or just the jQuery selector engine - Sizzle ). If you provide me with more details about your project, I can be in greater help.

 

 

Cheers, Ico

  • Like 2
Link to comment
Share on other sites

Hi, and welcome to the GreenSock forums.

 

Thanks a lot for posting your question here. As GSAP gains in popularity we are hearing more and more success stories with HTML5 banner ads using GSAP.

 

You really shouldn't have any problem using GSAP with your ads, its a rock-solid JavaScript platform with features and performance that are quite frankly un-matched. 

 

Its actually a bit troubling why anyone would recommend zepto for sequenced animation. Last I checked it only had 1 method relating to animation... animate(). I'm sure folks also recommend jQuery which is whole 'nother can of worms

 

If you come across any push-back or folks denying the use of GSAP, please let us know, we'd love to talk to them. 

 

Also, its clear you see the advantages, but perhaps this article will help some of the folks you work with: http://www.greensock.com/why-gsap/

  • Like 1
Link to comment
Share on other sites

I've replicated some complex ads using TimlineLite/CSSPlugin and straight Javascript, and managed to keep everything (except CSSplugin) under 30kb. (Original swf was 50kb).

 

Theres no reason to use Zepto/jQuery if I'm not doing anything that can't be written in straight Javascript right?

 

I've also just seen this post which is a real +1 for me, as it seems to me that a lot of publishers will look to DC for guidelines as their either use a DC server, or just want to be industry safe. That being said, another ad serving platform I work with send out their templates as Edge Animate projects.

 

@bassta thanks for your breakdown, I think I will probably use that as a rule of thumb, when I make decisions on how to build a HTML5 ad. Its pretty much the same as when I'm given projects in Flash that are keyframed. And I need to think "Is it better to keep it as it is, or recreate it all with greensock. What's the expected turnaround time? is it easy to adapt as it is, or will converting it save time in the future?"

 

I also find CSS transistions weird, they don't really make sense to me. I feel that animations should be done via script and not style. But hey, you can't blame the tools right?

 

Also, would you recommend using sprites? Or just have several images? I know some ads get bundled as a download e.g., to Apples Newsstand, in cases like that it doesn't really matter, right?. But if the ad is online, and to reduce the amount of GET requests needed to show all the ads elements. Or would there be too many issues with cross browser compatibility?

Link to comment
Share on other sites

Hi,

 

I also would like to use pure JS where is possible, but in the country I live in a lot of people are using old browsers, so the clients want the banners to also work in older browsers. JS libraries like jQuery or zepto makes it easy and eliminate a lot of bugs and browser incompatibilities. Also, I like to use common libraries, so it is easier for other developers working on the same project / the developers that will change my code in future. If you write everything in pure JS, the code can turn into spaghetti-code in no time. I find it difficult to maintain  such a code, so I just use libraries and jQuery-plugin like structure for my code.

 

About sprites - they are great for GIF-like banners. I created a little snippet that can tween sprite in gif-like way with GSAP ( originally written by www.citychurned.benjerry.com )

 

You can check it on : 

See the Pen ikLsl by burnandbass (@burnandbass) on CodePen

 

Other thing you can do is something like simple fadein/fadeout banner with a little bit of CSS and GSAP. You use one picture, tweak the background-position and then just write little bit of code to fade it in and out. Something like http://blog.bassta.bg/2013/05/simple-fade-infade-out-slideshow-with-tweenlite/ .Since you have only one image, only one request will be made.

 

And last... About year ago I had to make A LOT flash banners to work on mobile devices. So I just wrote an app that loads a banner, you can play/pause it ( setting framerate to 0 pauses the swf, setting it back to 24 or 31 plays it ) , you can capture the banner scren , all captured frames were combined into one big image and slideshow was constructed via TimelineLite. With the tool I was able to process more than 500 flash banners, they were working and the filesize was less than 100kb ( everything, depended on the banner size ). I think I still have the code somewhere, so if it would help you, I'll be glad to share. But TimelineLite + single sprite was working great for me and haven't created problems since. The drawback of my system is that it was't working with banners that puled dynamic data :) 

Link to comment
Share on other sites

That sounds like a very useful app! Could also use it for backup gifs etc.

 

What I created with sprites was a very simple, but very long road map kind of thing. And I used a single PNG sprite sheet with straight road sections and turns, and then used a bunch of divs and css to lay it all out.

 

I think I'll take it as it comes, and make the decisions as a case by case basis.

 

(I actually just got handed a HTML5 banner project that uses GSAP, totally made my day).

  • Like 1
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...