Animation

in

AngularJS

AngularJS.tw Meetup #2

THE FOLLOWING

PREVIEW

HAS BEEN APPROVED FOR

ALL AUDIENCES

SO DON'T PANIC EVEN IF YOU'RE NEW TO ANGULAR

Gias Kay Lee

gsklee.im

ANIMATIONS

How people still do

today

$('div').animate({

opacity: 0.25

}, 1000);

THIS IS SO

YESTERDAY

http://spongebob.wikia.com/wiki/Squog

CSS3 Please

.fade {

transition: 1s;

opacity: 0.25;

}

#1

Put

Presentational Details

Back to

Where They Belong

.fade {

transition: 1s;

opacity: 0.25;

}

$('button').click(function() {

$('div').addClass('fade');

});

ie.

Separation of Concerns

#2

Performance is Better

http://dev.opera.com/articles/view/css3-vs-jquery-animations

#3

Even Better

Performance!

.fade {

transition: 1s;

transform: translateZ(0);

opacity: 0.25;

}

Wait...

What about...

cross-browser support?

Sexy and robust.

3/4 of users

can see CSS3 animation as of May 2013

More good news!

IE10 is seriously pwning IE9!

wOOt!

Beginning of Auto-upgrade ⬇

http://www.w3counter.com/trends

So that leaves roughly 10% of users still at large but,

please lemme tell you this...

THEY.

DON'T.

DESERVE.

THE.

F ♥CK.

THEY.

DON'T.

DESERVE.

THE.

F ♥CK.

Hope Linus won't mind me borrowing this wonderful shot to convey my idea. http://www.nikopik.com/2013/02/linus-torvalds-a-toujours-un-sacre-franc-parler.html

Do you know that...

10%

of mobile web users still come from feature phones

and other primitive devices?

Do you care...

whether they could see your fancy animations

or not?

http://www.netmarketshare.com

So why would you care...

whether IE8 users could see your fancy animations

or not?

Animation is

Rhetorical

Animation is

Rhetorical

It enlivens your expression,

but stripping it away and things should still be obvious.

http://www.freegreatpicture.com/background-color-theme/hd-color-background-wallpaper-18429

To Summarize

Animation in

jQuery

...relies on

CPU & Memory

...is written in an untyped, interpreted language

Slow.

Unsmooth.

Uncool.

Animation in

CSS3

...can tap into the power of

GPU

...is running on engines written in native code

Fast.

Smooth.

Awesome.

Stop Spoiling

the

Laggards

and

Stop Thinking

jQuery

LET THE LAGGARDS CLIMB

SO THE REST 90%

CAN TAKE THE FUN RIDE

http://www.listofimages.com/robin-de-blanche-escalator-light-other.html

CSS FOR

ANIMATION

TODAY

http://obamamedia.wordpress.com/2008/10/14/blue-obama-o-logo-wallpaper

Wait... What the...?

I thought we're gonna talking about

AngularJS

today?

Actually

Animation

in

AngularJS

is

CSS3

AngularJS

puts a heavy emphasis on

Separation of Concerns

It goes great lengths

extending the vocabulary of HTML

to restore balance to the galaxy...

three pillars of the frontend world...

HTML

STRUCTURE

JS

BEHAVIOR

CSS

PRESENTATION

The Eval JavaScript Empire

HTML

INTERFACE

JS

LOGIC

CSS

PRESENTATION

The New Angular Republic

.fade {

transition: 1s;

opacity: 0.25;

}

$('button').click(function() {

$('div').addClass('fade');

});

Let's see how to express

this same thing

the "Angular Way"...

http://imagesci.com/rainbow-abstract-backgrounds-2210-hd-wallpapers.html

Demo #1

ngClass

CSS3 Transition

http://plnkr.co/edit/kKzXBtXIheVpowtPXlsT

THE ANGULAR WAY

http://www.wallpaperup.com/41783/Spongebob_rainbow_cartoon.html

But... Wait!

What if we'd like to do

THIS?

Demo #2

ngClass

for

Something More Complex

http://plnkr.co/edit/sEVfAsUxW5yhBr6YTmJL

As we've just seen

there appears to be some problems...

LACK OF

FINE-GRAINED

CONTROL

VENDOR PREFIX

SUCKS

THIS DOESN'T SEEM

Angular

ENOUGH!

http://imagesci.com/rainbow-abstract-backgrounds-2210-hd-wallpapers.html

Most Importantly...

INTERFACE

LOGIC

PRESENTATION

⇒

⇐

⇒⇒⇒

ngClick

ngController

ngClass

CSS3

Hackish, Hard to Test

Nothing to do with REAL LOGIC

REAL LOGIC is down to earth

Nothing RHETORICAL

⇒⇒⇒

Why can't we do it like this?

Angular Bootstrap

tackles this issue with a homemade $transition service

But...

You no longer need to

reinvent your own solution.

ngAnimate.

CSS3

⇒⇒

Meet

To use ngAnimate, you need the

Unstable Branch

of AngularJS

(As of June 2013)

This does NOT mean things will randomly break.

No.

This means things are in

constant flux

So you gotta follow the changelog yourself

ENOUGH

TALKING

ALREADY

Let's see

ngAnimate in action!

Demo #3

ngAnimate

CSS3 Transition

http://plnkr.co/edit/wJ9vFV79Th45ZZzaqTdx

Demo #4

ngAnimate

CSS3 Keyframe Animation

http://plnkr.co/edit/QN0McbVD39E4527KaaAV

Demo #5

ngAnimate

Animate.css

http://plnkr.co/edit/BuyfEPmQC8FrQYH5Vzas

THE ANGULAR WAY

http://www.wallpaperup.com/41783/Spongebob_rainbow_cartoon.html

Now...

I ACTUALLY LIED.

Animation in AngularJS can also be done in JavaScript

But you better have a good reason doing that

Demo #6

ngAnimate

jQuery

http://plnkr.co/edit/sk4nxf7wyT4myk4nIScs

It's immediately apparent why you'll wanna use

CSS3-defined animations

whenever possible

CSS-Defined

Animations

...let's you write-less-do-more™

...is the convention-over-configuration approach

...with all the aforementioned advantages

JavaScript-Defined

Animations

...is more verbose

...most likely brings along a lot of deadweight

...with all the aforementioned troubles

If you really need JavaScript animations,

consider using

GSAP

instead of jQuery