Slide 1

Slide 1 text

TWITTER @PearlChen GOOGLE+ klab.ca/+ P E A R L C H E N C S S A n i m a t i o n s TO R O N T O W E B P E R F O R M A N C E G R O U P ( # t o w e b p e r f )

Slide 2

Slide 2 text

Te c h n o l o g i s t & E d u c a t o r I A M A … Karma Laboratory

Slide 3

Slide 3 text

b e t a . t e l u s . c o m F U L LY R E S P O N S I V E , M O B I L E F I R S T An aside: I wrote “There is no “I” in coding”: https://medium.com/better-humans/2e2ed4daeb99

Slide 4

Slide 4 text

H T M L To u c h S l i d e r C S S V S J AVA S C R I P T “This is the best mobile touch slider I’ve ever used. I’m trying to break it but I can’t!” ! - some guy at a Dribble meet up

Slide 5

Slide 5 text

j Q u e r y . a n i m a t e ( ) A N I M AT I O N S T H E J AVA S C R I P T WAY EXAMPLE 
 $('div').animate(  
                                    {left:  targetX},    //  properties
                                    200,                            //  duration
                                    ‘swing’,                    //  easing
                                    function  done(){}  //  callback
                                ); CSS 
 div  {
    position:  relative;  /*or  ‘fixed’  or  ‘absolute’,  just  not  ‘static’*/
    left:  0;
 }

Slide 6

Slide 6 text

GPU
 (graphics processing unit) • Specialized video and 3D graphics renderer. • Designed for doing repetitive screen updates (“paints”). • “Hardware accelerated”. CPU
 (central processing unit) • Controls all running computer software. • Better at making decisions and giving out orders. C P U v s G P U G E T T I N G S M O O T H A N I M AT I O N S

Slide 7

Slide 7 text

• General layout compositing • CSS3 transitions • CSS3 3D transforms • Canvas Drawing • WebGL 3D Drawing G E T T I N G S M O O T H A N I M AT I O N S W h a t c a n g o t o t h e G P U ? Further resources: 
 “Improving the Performance of your HTML5 App”: http://www.html5rocks.com/en/tutorials/speed/html5/
 “High Performance Animations": http://www.html5rocks.com/en/tutorials/speed/high-performance-animations/
 “Let’s Play With Hardware-Accelerated CSS“: http://mobile.smashingmagazine.com/2012/06/21/play-with-hardware-accelerated-css/
 “Why Moving Elements With Translate() Is Better Than Pos:abs Top/left”: http://www.paulirish.com/2012/why-moving-elements-with-translate-is-better-than-posabs-topleft/ ˒ CSS3 transitions (I’ve only got 30 minutes!)

Slide 8

Slide 8 text

C S S 3 Tr a n s i t i o n s A N I M AT I O N S T H E C S S WAY SCSS EXAMPLE 
 div  {
    @include  single-­‐transition(  left,  200ms,  
                                                              cubic-­‐bezier(0.39,  0.575,  0.565,  1)  );
 } CSS EXAMPLE 
 div  {
    -­‐webkit-­‐transition:  left  200ms  cubic-­‐bezier(0.39,  0.575,  0.565,  1);
    -­‐moz-­‐transition:        left  200ms  cubic-­‐bezier(0.39,  0.575,  0.565,  1);
    transition:                  left  200ms  cubic-­‐bezier(0.39,  0.575,  0.565,  1);
 } JQUERY (at the point you need the div animated) 
 $('div').css(  {left:  targetX}  );
          //  .addClass() (Note: vendor prefixes not required for latest browsers but use for optimal backwards and mobile compatibility.)

Slide 9

Slide 9 text

c u b i c - b e z i e r w h a t ? ? E A S I N G F U N C T I O N S Don’t fret! Just copy from easings.net and cubic-bezier.com:

Slide 10

Slide 10 text

j Q u e r y . a n i m a t e ( ) R E C A P Cons • Lower performance since animation will run in the CPU • Additional (easy to remember) easings require jQuery UI or other easing plugin Pros • Callback function for extra control when animation is done. • Very backwards compatible 
 (IE6 support with jQuery 1.9 or earlier)

Slide 11

Slide 11 text

Cons • Need to mix & match with JS events: • Might miss the animation on page load. • No CSS-only “transitionend” callback. • CSS keyframe animations can get hairy. • No IE9 support. Pros • No real CSS change from the JS version. • Automatically hardware accelerated. • CSS-only solution for :hover rollovers. R E C A P C S S 3 Tr a n s i t i o n s

Slide 12

Slide 12 text

B ro w s e r s u p p o r t C S S 3 T R A N S I T I O N S http://caniuse.com/#feat=css-transitions

Slide 13

Slide 13 text

Fe a t u r e d e t e c t i o n C S S 3 T R A N S I T I O N S For backwards compatibility, use Modernizr: JS 
 if  (Modernizr.csstransitions)  {
    $('.slider').css({left:targetX});
 }else{
    $('.slider').animate({left:targetX},  200);
 } CSS 
 .slider  {
    position:  relative;
    left:  0;
    transition:  left  200ms  
        cubic-­‐bezier(0.39,  0.575,  0.565,  1);
 }
 HTML 


    
  • 1
  • 2
  • 
    
  • 3

Slide 14

Slide 14 text

I s i t w o r t h t h e e f fo r t ? The proof is in the profiling*. * Too bad I’m not better at it!
 Instead I’m just going to show you the visual difference.

Slide 15

Slide 15 text

… w i t h m o r e a n i m a t i o n s A N OT H E R E X A M P L E pchen.github.io/telus-mobility-web-stats

Slide 16

Slide 16 text

D i s c o v e r U S B d e v i c e s C H R O M E R E M O T E D E B U G G I N G 1. Go to chrome:// inspect. 2. Check off 
 “Discover USB devices”. Minimum requirements: Chrome 32 for both Android and desktop
 More info: http://developer.chrome.com/devtools/docs/remote-debugging

Slide 17

Slide 17 text

S c r e e n c a s t C H R O M E R E M O T E D E B U G G I N G (…from previous slide) 1. Click “Inspect” for the tab you want to inspect. 2. In new popup, 
 click the screencast icon. 3. Anything you do on the phone will happen on the desktop, and vica versa!

Slide 18

Slide 18 text

TWITTER @PearlChen GOOGLE+ klab.ca/+ P E A R L C H E N T h a n k s ! Q U E S T I O N S ?