- banner animation outside of Flash is viable
- the performance and precision of sequencing would not be barriers
Come inside to judge for yourself.
Although it may not be the most draw-dropping animation you have ever seen, I was able to very precisely stagger the sequence of animations exactly how I wanted them. Certain animations overlap with each other while others go in direct sequence.
Some of the beautiful benefits of tying all the animations into a TimelineLite are:
- You don’t have to manually track and increment delay properties.
- You can globally adjust the playback speed of the entire animation.
- You can immediately jump to certain sections of the timeline. For instance if I want to fine-tune a transition at the end, I can just do
timeline.seek(timeline.duration()-2)and skip over the intro every time I preview. I could also jump to a label
I decided to hand-code all aspects of the banner above. The most grueling part is grabbing coordinates from photoshop and typing them into CSS. I imagine I will find a workflow that involves Dreamweaver, Edge and/or the new Flash CS6 HTML5 export features to streamline that a bit. Once the assets are positioned, the GreenSock side of things is a breeze.
Being that I’m just really trying to experiment with the raw guts of GSAP v12, I didn’t spend a lot of time optimizing. Emrah Atilkan has pointed me in the direction of Sizzle.js to use as a lightweight alternative to jQuery as a selector engine. And to go really lean and mean its pretty easy to target any element via getElementByID (thanks Matt). I plan on experimenting with a variety of methods and boiling this kind of work down to the bare bones.
All the text-blocks in the example above are images. In some ways using @font-face makes sense but not so sure the filesize is always going to work in its favor. Also, some browsers don’t handle moving and scaling text all that great.
Share your thoughts
If you have any insight on where this stuff is going, I’d love to hear. From what I can tell there is plenty you can do today to create engaging animation outside of Flash. Most importantly it gets you onto iOS (like it or not). Sure it isn’t as dead-simple as Flash but it is doable and the tooling is getting better.
What platforms are you using today that allow you to serve rich js ads to the masses?
Sound off in the comments.