The New Hotness - CSS3/JS Based Animation

Detailed breakdown of lessons learned while building the CSS3 & animation magic for simplymeasured.com

Seattle Interactive Developer Meetup, Aug 15 2012

Jon Culver / @bahoo
Simply Measured / http://simplymeasured.com

Transcript

1. The New Hotness: CSS3/JS Based Animation Seattle
2. Yo Dawg! ★ I’m
3. [ show awesome web site here ]
4. What do we have here? (Buzz word bingo!) ★ HTML
5. ★ WTF!
6. html5 ★ Only
7. Quick side note about Internet Explorer... ★ 3.6%!
8. Anima on! ★ But
9. CSS3 Transi ons ★ Slight
10. Effec ve preloading ★ Problem
11. Workaround: staging class ˒ /* global.js */ $(function(){ $slides = $('.slides li'); // stage some animation goodness. if(Modernizr.csstransitions){ $slides.addClass('staging'); } // .. }); ˒ /* style.css (prefixed rules omitted) */ .slides .staging{ visibility: hidden; transform: translate(-800px,0); } .slides .staging img{ opacity: 0; } .slides li.animate-in{ visibility: visible; transition: 0.7s transform ease-out; } .slides .animate-in img{ opacity: 1; transition: inherit; transition-property: opacity; } ★ Swap
12. ★ Box-shadows ★ Thick
13. Gotcha! ★ All
14. jQuery Anima on ★ Fallback
15. O.F.F.S. ★ IE
16. getComputedStyle polyfill (aka “We’ll Do It Live!”) ˒ /* Particularly for our good friend IE8 */ if (!window.getComputedStyle) { window.getComputedStyle = function(el, pseudo){ this.el = el; this.getPropertyValue = function(prop) { var re = /(\-([a-z]){1})/g; if (prop == 'float') prop = 'styleFloat'; if (re.test(prop)) { prop = prop.replace(re, function () { return arguments[2].toUpperCase(); }); } return el.currentStyle[prop] ? el.currentStyle[prop] : null; }; return this; }; } ★ Ship
17. All Together Now! ★ Position
18. Get crazy with the Cheez-Whiz. ★ Let’s
19. But... ★ Safari
20. For Safari < 6 / older WebKit ˒ .brands-drawer.staging img{ visibility: visible; transform: translate(0,200px); } .brands-drawer img.animate-in{ transform: translate(0,0); transition: 0.6s transform cubic-bezier(0,1.33,0.66,1); } /* Oh, Safari, get on board. Y2 clamped to 1.0*/ .brands-drawer img.animate-in.clamped{ transition: 0.6s transform cubic-bezier(0,1,0.66,1); } Then JS side... $(el).addClass('animate-in'); if($.browser.webkit && parseInt($.browser.version) < 535){ $(el).addClass('clamped'); } ★ ‘535’
21. The me has come to... OPTIMIZE! ★ Minify
22. Seemingly the last ‘gotcha’ ★ html5shiv
23. In Conclusion Thank you.