Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Amazing UI with CSS and Anima.js
Search
fwdays
March 05, 2013
Programming
0
1.1k
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.9k
Beyond Testing Михаил Боднарчук
fwdays
0
650
Yii2 - на пути от Alpha до GA. Взгляд с практической стороны Александр Бордун
fwdays
0
1.7k
Laravel 4: простота во всем. Евгений Косинский
fwdays
0
860
Маленькая библиотека для большой компании. Антон Шевчук
fwdays
0
3.7k
Phalcon. Что нового? Александр Торош
fwdays
0
970
Выбираем поисковик умом головы. Андрей Аксенов
fwdays
0
1.2k
Past, Present, and Future: The Evolution of PHP Development. Nate Abele
fwdays
0
670
Функциональный тулчейн Nix
fwdays
1
380
Other Decks in Programming
See All in Programming
SwiftUI Performance 不要なViewの再描画と更新を抑える
bigamitiongit
1
160
Git Lint
bkuhlmann
4
740
Folding Cheat Sheet #1
philipschwarz
PRO
0
210
Netty Chicago Java User Group 2024-04-17
sullis
0
130
Prepare for Jakarta EE 11 - Performance and Developer Productivity
ivargrimstad
0
470
Site Reliability Engineering for GMO
pyama86
6
960
Code Reviews
bkuhlmann
4
880
"config" ってなんだ? / What is "config"?
okashoi
0
220
PostmanでAPIの動作確認が楽になった話
h455h1
0
130
App Router への移行は「改善」となり得るのか?/ Can migration to App Router be an improvement
takefumiyoshii
8
2.1k
デザインシステムで Tailwind CSSとCSS in JSに分散投資をしたら良かった話
fsubal
18
4.8k
Zero Waste, Radical Magic, and Italian Graft – Quarkus Efficiency Secrets
hollycummins
0
220
Featured
See All Featured
Infographics Made Easy
chrislema
237
18k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
658
120k
Optimising Largest Contentful Paint
csswizardry
7
2.3k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
39
4.4k
How To Stay Up To Date on Web Technology
chriscoyier
782
250k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
19
1.9k
Thoughts on Productivity
jonyablonski
57
3.8k
Typedesign – Prime Four
hannesfritz
36
2.1k
Fontdeck: Realign not Redesign
paulrobertlloyd
76
4.9k
Designing Experiences People Love
moore
136
23k
RailsConf 2023
tenderlove
2
530
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
13
1.5k
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