Awesome

Mobile

Animations

Peter O'Shaughnessy

Source code: bit.ly/awesome-mobile-animations

Please view in a modern browser.

Intro (fluid apps) Canvas WebGL CSS Web Animations API General Tips

1. Intro (fluid apps)

↓

Boring App

Press the menu button!

Press ↓ when you're ready to continue.

Menu
With
Dull
Transition

“Without the restrictions of skeuomorphism, the UI is free to behave in any manner without seeming contradictory to its pre-defined environment”

www.beyondkinetic.com/motion-ui-design-principles

But don't go overboard and be annoying!

Native apps are becoming more fluid

What about mobile web apps?

2. Canvas

↓

<canvas id="myCanvas">
    my fallback content
</canvas>

var canvas = document.getElementById('myCanvas');

var ctx = canvas.getContext('2d');

ctx.fillStyle = 'rgb(255, 0, 0)';
ctx.fillRect( 20, 20, 100, 200 );

Knoggins (an app we created in 1 day at a hackathon)

www.goodboydigital.com/runpixierun/ (Pixi.js)

3. WebGL

↓

<canvas id="myCanvas">
my fallback content
</canvas>

var canvas = document.getElementById('myCanvas');

var gl = canvas.getContext('webgl') ||
         canvas.getContext('experimental-webgl');

/* Lots of low level code here! Or use a library */

See bit.ly/third-dimension (desktop)

threejs.org/examples/webgl_lines_sphere.html

Without WebGL

bit.ly/bunnymark (Pixi.js) 1000 bunnies @ ~14 FPS

With WebGL

bit.ly/bunnymark (Pixi.js) 1000 bunnies @ ~58 FPS

Mobile support

Chrome for Android ✓
Firefox for Android ✓
Opera Mobile ✓
iOS Safari ✓ :-D

4. CSS

↓

.demo {
    transition-property: transform;
    transition-duration: 2s;
}
.demo:hover {
    transform: rotateX(45deg) scale(1.2);
}

Hover over the code area. NB. Vendor prefixes omitted for simplicity

React touch demo (menu @ 0:43, gallery @ 2:10) Live demo at: petehunt.github.io/react-touch

cubeslam.com

codepen.io/scottkellum/full/bHEcA/

bit.ly/css3d-per (Three.js CSS3DRenderer)

5. Web Animations API

↓

Declaring in CSS generally best for performance

@keyframes spin3d {
    0% { transform: rotateY(0deg); }
    100% { transform: rotateY(360deg); }
}
.you-spin-me-right-round-baby-right-round:hover {
    animation: spin3d 3s ease-in-out infinite;
}

Hover over the code area. NB. Vendor prefixes omitted for simplicity

But you often need to control through JavaScript

snowFlake.style.transform = 'translate(' + snowLeft + 'px, -100%)';
// wait a frame
snowFlake.offsetWidth;
snowFlake.style.transitionProperty = 'transform';
snowFlake.style.transitionDuration = '1500ms';
snowFlake.style.transform = 'translate(' + snowLeft + 'px, ' +
        window.innerHeight + 'px)';

Example from HTML5Rocks.com

element.animate() gives best of both

snowFlake.animate([
    {transform: 'translate(' + snowLeft + 'px, -100%)'},
    {transform: 'translate(' + snowLeft + 'px, ' + window.innerHeight + 'px)'}
], 1500);

AnimationPlayer

var player = snowFlake.animate( ... );
// Changed my mind
player.cancel();

var player = snowFlake.animate( ... );
player.onfinish = function(e) {
    console.log('Snowflake landed!');
}

bit.ly/elementanimate

More info at: bit.ly/html5rocks-webanimations

6. General Tips

↓

Tip 1: For 60 FPS, you only have 16ms to prepare each frame

It's not very long!

Tip 2: Test, measure, optimise

Use the Timeline feature in your browser's developer tools
There's also the High Resolution Time API
And stats.js is useful too

Tip 3: For now, define animations in CSS if possible

Browser can optimise; use GPU, run off main thread
Good for simple things you don't need to control frame by frame

Tip 4: Make sure you don't hammer the UI thread

Avoid doing work in input handlers such as onscroll
Use requestAnimationFrame so the browser calls you when it's ready
If you need to do a lot of processing, consider chunking it down or using a Web Worker

Awesome – Mobile – Animations

poshaughnessy

Awesome – Mobile – Animations

0 0 (function() { var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true; po.src = 'https://apis.google.com/js/platform.js'; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s); })();

edtechdevs-awesome-mobile-animations

Awesome

Mobile

Animations

Peter O'Shaughnessy

1. Intro (fluid apps)

“Without the restrictions of skeuomorphism, the UI is free to behave in any manner without seeming contradictory to its pre-defined environment”

Make the motion feel fluid

Give it personality

Make it consistent

Orientate users

But don't go overboard and be annoying!

Native apps are becoming more fluid

What about mobile web apps?

2. Canvas

3. WebGL

Without WebGL

With WebGL

Mobile support

4. CSS

5. Web Animations API

Declaring in CSS generally best for performance

But you often need to control through JavaScript

element.animate() gives best of both

AnimationPlayer

More info at: bit.ly/html5rocks-webanimations

6. General Tips

Tip 1: For 60 FPS, you only have 16ms to prepare each frame

Tip 2: Test, measure, optimise

Tip 3: For now, define animations in CSS if possible

Tip 4: Make sure you don't hammer the UI thread

Tip 5: Stick to: translate, scale, rotate, opacity

Tip 6: Batch DOM operations

For more info:

“Great animations make great apps”

So ditch the boring animations.

And make it fluid.

Make it awesome.

Thank you

Questions?

Thoughts?

@poshaughnessy

Further reading

0 0