CSS AnimationsWith Sencha Animator

MICHAEL MULLANY, SENCHA

Session OutlineWhy animations?

Transforms & transitionsAnimations

Browser supportSencha AnimatorCrazy CSS Hacks

Roadmap Interface

Animation Building BlocksTransforms: 2D and 3DMove (Relative)Scale, Rotate, Skew, OpacitySpecify a transform origin

TransitionsTweening between statesEasing curveDiscrete state changes

ElementsBlock + In-Line Elements

Only animation technology that works on Android, iOS, RIM, Meego

GPU ACCELERATED!

CSS TransformsTransforms transform the ENTIRE coordinate grid.- Nested transforms accumulate coordinate grid transformations

Scaling by 150% Adjusts EVERYTHING by 150%

Move 10pxMove 10px

Transform Origin

100%100%

0%100%

100%0%

0%0%

100%100%

100%0%

0%0%

0%100%

PERCENT OR PIXELS

50%, 50% is implied default

CSS Transition Properties background-colorbackground-image (gradients)background-positionborder-bottom-colorborder-bottom-widthborder-colorborder-left-colorborder-left-widthborder-right-colorborder-right-widthborder-spacingborder-top-colorborder-top-widthborder-widthbottomcolorcropfont-sizefont-weightgrid-*height

leftletter-spacingline-heightmargin-bottommargin-leftmargin-rightmargin-topmax-heightmax-widthmin-heightmin-widthopacityoutline-coloroutline-offsetoutline-widthpadding-bottompadding-leftpadding-rightpadding-toprighttext-indenttext-shadow

topvertical-alignvisibilitywidthword-spacingz-indexzoom

stop-colorstop-opacityfillfill-opacitystrokestroke-dasharraystroke-dashoffsetstroke-miterlimit

CSS AnimationsOnly e!ect properties during execution of the animation

- keyframe duration (secs,%)- easing curve- delay- pause/restart- fill-mode (property over-ride)- iterations- forward/back

http://dev.w3.org/csswg/css3-animations/

Easing Curves

Built-In Functions - Ease (default) - Ease-in/Ease-out - Ease-in - Ease-out

Custom bezier- custom-bezier (p1x,p1y, p2x, p2y)

Errata and Vendor Prefixes-moz and -webkit-webkit-box-shadow etc.

No gradient transitions

Fonts, line-height tweened at increments of font value

Chrome vs. SafariChrome interpolates missing frame values

Chrome applies a transition when two transforms are applied to an object

Chrome drops anti-aliasing, and lacks GPU acceleration for 3D

Safari uses intrinsic values (correct)

Safari applies only the last transform (correct)

Safari & mobile Safari often retain anti-aliasing & have GPU acceleration

Sencha Animator

Animator Productivity TipsNEST NEST NEST NEST- Wrapper divs are a huge productivity boost

Watch your transform origins- Losing track of them can cause much pain

Watch base object vs. keyframe animations- keyframes over-ride base object - ....until you disable keyframe values !

Overflow:hidden can work as a poor-man’s mask

Scale text to maximum size that you need

Crazy CSS3 Hacks

Gradients, Clipping & Masks

slight background gradientbackground-clip: text

2 radial gradients: multiple color stops radial gradient: multiple color stops

box-reflect on underlay DIV

CSS Hack for Shape BlursFind a character that looks like the shape you need

Set fill to opaque

Set shadow with 0,0 o!set and an appropriate color and blur

Scale, rotate & skew to get desired results

Find a web font with a shape you need!

What You Can’t Do...Direct Motion PathsCombine wrapper divs and custom easing functions to get thereHuge need for a pathing tool

Advanced Text ManipulationText on a curve/pathSub-pixel kerningHand-animated text is possible but very time-consuming

Sub-Element Animationse.g “typewriter”-style animations are very time consuming

Filters (on the CSS wish-list since 1998!) - would enable blurs etc.

3D Transforms-webkit-preserve-3DWithout this, child divs are flattened into the plane of their parent div

-webkit-perspectiveAutomatically applies a perspectiveUsed poorly = crazy foreshortening

Poor desktop performanceQuite smooth on iPhone 4/iPad

Roadmap

Check It Out

www.sencha.com/products/animator