[Solutions for Banner Ads in the Post-Flash World]

I came across a large banner campaign recently and my approach was as follows in order to be under the 60k:
#1) Draw the line with ie9, anything below that will get the backup image.

Show backup image


#2) ie9 gets gracefully degraded to a frame by frame (gif like) JS managed animation.

#3) All other browsers (ie10, Edge, -webkit- iOS/Android/Safari/Chrome, FireFox) will get CSS3 animations/transitions.

#4) Save text with a .png image and use css sprites for the text areas.

#5) Use JS setTimeout to add and remove classes to DOM elements and control the banner "timeline" and duration.

#6) CSS matrix and CSS bezier-cube are my best tools when animating.

Don't get me wrong. GSAP is GREAT! but until I do not have to "fight" with the Rich Media platform people, QA and client on why the library weight shouldn't count towards ad unit size I won't be able to use it. :\

[Solutions for Banner Ads in the Post-Flash World]

I came across a large banner campaign recently and my approach was as follows in order to be under the 60k:
#1) Draw the line with ie9, anything below that will get the backup image.

Show backup image


#2) ie9 gets gracefully degraded to a frame by frame (gif like) JS managed animation.

#3) All other browsers (ie10, Edge, -webkit- iOS/Android/Safari/Chrome, FireFox) will get CSS3 animations/transitions.

#4) Save text with a .png image and use css sprites for the text areas.

#5) Use JS setTimeout to add and remove classes to DOM elements and control the banner "timeline" and duration.

#6) CSS matrix and CSS bezier-cube are my best tools when animating.

Don't get me wrong. GSAP is GREAT! but until I do not have to "fight" with the Rich Media platform people, QA and client on why the library weight shouldn't count towards ad unit size I won't be able to use it. :\