sencha animator
DESCRIPTION
Sencha Animator is the industry’s leading CSS3 animation tool. With powerful timeline capabilities, interactive editing, rich previews, and a slick interface, designers have never had it easier to build their mobile animations and applications. Animator’s exclusive use of CSS3 lets your imagination go wild with high performance, hardware-accelerated visuals that will dazzle your customers. Attendees in this session will learn how to use and design top-flight animations and walk away mobile animation experts.TRANSCRIPT
Wednesday, November 2, 11
Arne Bech, Devshi Pindoria, Luca Candela
@arnebech, @devshi
@luckymethod
SENCHA ANIMATOR
Wednesday, November 2, 11
Sencha Animator
Wednesday, November 2, 11
Twitter mentions since launch day
1k+
Wednesday, November 2, 11
Animations everywhere
Wednesday, November 2, 11
Arne Bech
Wednesday, November 2, 11
CSS3 Transforms & Animations
Wednesday, November 2, 11
Translate/PositionScaleRotateSkew
Transform CSS
Wednesday, November 2, 11
Transform CSS/* Moves element */transform: translate(100px, 10px);
/* Scales element */transform: scale(0.55);
/* Rotates element */transform: rotateZ(11deg);
/* Skews element */transform: skew(15deg, -5deg);
/* Multiple functions */transform: translate(100px, 0) rotateZ(-35deg) scale(0.2,0.4);
Wednesday, November 2, 11
3D Transform CSS/* Moves element */transform: translate3d(162px, -29px, 100px);
/* Scales element */transform: scale3d(0.55, 0.23, 0.55);
/* Rotates element */transform: rotateZ(11deg) rotateX(23deg) rotateY(-40deg);
Wednesday, November 2, 11
Animations@keyframes moveLeftThenDown {
0% {transform: translate3d(0px, 0px, 0px);
}
50% {transform: translate3d(100px, 0px, 0px);
}
100% {transform: translate3d(100px, 50px, 0px);
}
}
Wednesday, November 2, 11
Animations#someElement {
animation-name: moveLeftThenDown;
animation-duration: 5s;
animation-delay: 2s;
animation-fill-mode: both;
}
Wednesday, November 2, 11
Demo
Wednesday, November 2, 11
Luca Candela
Wednesday, November 2, 11
Sencha Animator
Wednesday, November 2, 11
100% CSS3 Animations
Wednesday, November 2, 11
Compatible with most mobile devices
Wednesday, November 2, 11
Easy to use
Wednesday, November 2, 11
Gorgeous UI
Wednesday, November 2, 11
100% Sencha
Wednesday, November 2, 11
Thank you!
Wednesday, November 2, 11