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

ANIMATIONS

How people still do

today

$('div').animate({

    opacity: 0.25

}, 1000);

THIS IS SO

THIS IS SO

YESTERDAY

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

#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 ⬇

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

is

Slow.

Unsmooth.

Uncool.

Animation in

CSS3



...can tap into the power of

GPU

...is running on engines written in native code

is

Fast.

Smooth.

Awesome.

Stop Spoiling

the

Laggards

and

Stop Thinking

in

jQuery

LET THE LAGGARDS CLIMB

LET THE LAGGARDS CLIMB

SO THE REST 90%

SO THE REST 90%

CAN TAKE THE FUN RIDE

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

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

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

Further Reading

http://www.yearofmoo.com/

Further Reading

http://gsklee.im/post/50254705713

Questions?

Animation in AngularJS

By G. Kay Lee

Animation in AngularJS

  • 65,312
Loading comments...

More from G. Kay Lee