Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Speaker Deck
PRO
Sign in
Sign up for free
Amazing UI with CSS and Anima.js
fwdays
March 05, 2013
Programming
0
960
Amazing UI with CSS and Anima.js
fwdays
March 05, 2013
Tweet
Share
More Decks by fwdays
See All by fwdays
Symfony best practices и не только Олег Зинченко
fwdays
0
1.7k
Beyond Testing Михаил Боднарчук
fwdays
0
560
Yii2 - на пути от Alpha до GA. Взгляд с практической стороны Александр Бордун
fwdays
0
1.5k
Laravel 4: простота во всем. Евгений Косинский
fwdays
0
760
Маленькая библиотека для большой компании. Антон Шевчук
fwdays
0
3.6k
Phalcon. Что нового? Александр Торош
fwdays
0
830
Выбираем поисковик умом головы. Андрей Аксенов
fwdays
0
1.1k
Past, Present, and Future: The Evolution of PHP Development. Nate Abele
fwdays
0
580
Функциональный тулчейн Nix
fwdays
1
310
Other Decks in Programming
See All in Programming
Babylon.jsで作ったsceneをレイトレーシングで映えさせる
turamy
1
210
Records の使い方はこれでいいの? をみんなで考えたい / Java DO #20
gishi_yama
0
110
Reactは何を提供するLibraryなのか?
taro28
6
920
Git操作編
smt7174
2
240
Automating Gradle benchmarks at N26
ubiratansoares
PRO
1
140
ESM移行は無理だけどおれもSindreのライブラリが使いたい!
sosukesuzuki
2
540
YATA: collaborative documents and how to make them fast
horusiath
1
150
Scaling Productivity- How we have improved our dev experience
sockeqwe
1
120
レビュー駆動学習のススメ_StaPy#83
soogie
0
310
SwiftUI+TCAに挑戦!NewsPicks iOSアプリのリアーキテクチャ/re-architecture-newspicks-ios-app-with-swiftui-and-tca
takehilo
0
390
NestJS_meetup_atamaplus
atamaplus
0
210
ちょっとつよい足トラ
logilabo
0
380
Featured
See All Featured
StorybookのUI Testing Handbookを読んだ
zakiyama
6
2.5k
JazzCon 2018 Closing Keynote - Leadership for the Reluctant Leader
reverentgeek
173
8.6k
Put a Button on it: Removing Barriers to Going Fast.
kastner
56
2.3k
Statistics for Hackers
jakevdp
782
210k
Side Projects
sachag
450
37k
5 minutes of I Can Smell Your CMS
philhawksworth
196
18k
Build The Right Thing And Hit Your Dates
maggiecrowley
19
1.2k
How New CSS Is Changing Everything About Graphic Design on the Web
jensimmons
213
11k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
15
980
Happy Clients
brianwarren
89
5.6k
Navigating Team Friction
lara
175
11k
Fontdeck: Realign not Redesign
paulrobertlloyd
73
4.1k
Transcript
Amazing UI with CSS and anima.js Yehor Lvivski @lvivski www.lvivski.com
Programmers love their code.
Languages • Haskell, Scala, Erlang, Clojure • Java, C#, Objective-C
• Ruby, Python, PHP • Javascript
Patterns MVC 1970s MVVM 2010s ... MV* 2050s
VIEW
VIEW
None
None
None
Xerox PARC 1979
None
35 years since 1979
None
None
None
None
Javascript + CSS
CSS has everything • 3Dtransforms • Transitions • Animations •
Events
CSS has limitations
CSS, Bad parts • Not easy to stop animation once
started • You have to deal with percent • Limited user control
anima.js github.com / lvivski / anima
Stats • 25kB (4kB minified and gziped) • 4 weeks
of development • 2 week after public release • ≈600 stargazers
Animation loop
API
API var world = anima.js(); var world = anima.css();
var item = world.add( document .querySelector("div") ); item.animate(...).css();
.animate() item.animate({ translate: [x, y, z],
duration: 500, ease: 'ease-‐in-‐out-‐quad', delay: 100 })
Method chaining item.animate(...) .animate(...) .animate(...) .infinite()
Parallel animations item.animate( [ { translate: [x,
y, z], duration: 500 }, ... ] )
How it works
None
Matrix matrix3d( 1, 0, 0, 0, 0,
1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1 )
Scale & Translate matrix3d( sX, 0,
0, 0, 0, sY, 0, 0, 0, 0, sZ, 0, tX, tY, tZ, 1 )
Rotate matrix3d( cos(Y)cos(Z), cos(X)cos(Z)
+sin(X)sin(Y)cos(Z), sin(X)sin(Z) -‐cos(X)sin(Y)cos(Z), 0, ... )
Multiply
None
Decomposition
None
Matrix decomposition • A×B≠B×A • scale×rotate×translate
Pull Requests
Thanks @lvivski