html5 banners with sprite sheets

using this to generate sprite sheets:
http://draeton.github.io/stitches/

and this to compress them:
https://tinypng.com/

this for animation, as long as I can get away with the +100kb file size:
https://cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenMax.min.js

links roundup

Lots of change in my line of work, which is ad banners, animation, and front end development. This blog is mostly just a place where I save links for myself; if someone stumbles upon it, so much the better.

I'm looking forward to the arrival of web animations, but it's not in browsers yet:
http://danielcwilson.com/tags/web-animations-api/

SVG has a way to go before it's as useful as Flash vectors were, but it's interesting -
http://codepen.io/chrisgannon/blog/my-first-svg-banner-ad

For SVG I have been enjoying this podcast:
http://svgimmersion.com/

With browsers starting to drop support for Flash, we're finally going 100% html. It's still the wild west as far as specs go, but the IAB is working on it: http://www.iab.net/displayguidelines

Web fonts are a problem when you're trying to keep a banner small. Font subsetting is a must -
http://fontsubsetter.com/en-US

We're doing a lot of greensock animation and CSS transitions too, I use https://autoprefixer.github.io/ to help with vendor prefixes

tips for reducing html5 file size, from Doubleclick

https://support.google.com/richmedia/answer/6261897?hl=en#animate

ethics of ad blocking

I'm not even done reading it, but let's save the link:
http://www.marco.org/2015/08/11/ad-blocking-ethics

greensock article on html5 banners

Arguing for higher file sizes, and naturally, Greensock animations:

http://greensock.com/html5-banners?utm_source=Newsletter-August&utm_medium=email&utm_campaign=HTML5-Banner-Solutions

We've been doing our Flash banners with Greensock for years, and many campaigns will want the same concept in both Flash and HTML. When that's the case, it's pretty easy to repurpose the tween code from Flash and apply it to a sprite sheet for the HTML version. However, now that we're going to stop doing Flash versions at all, I think it will make sense to ditch the greensock classes altogether and just do CSS transitions for our animation, when it's just a simple standard banner with things fading in and out in sequence.

css transitions

this is the way to go
https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Using_CSS_transitions

css easer
http://matthewlein.com/ceaser/

For me the best approach, though not the easiest, is using a sprite sheet and CSS transitions. This can make a very compact banner. Flash can export a sprite sheet with coordinates.

Works for position or opacity, and you can do some custom eases. 

"Flash in Free Fall"

https://www.admonsters.com/blog/opspov-flash-freefall