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
Frame Animation in the Browser
Search
mattfordham
August 15, 2012
Programming
2
210
Frame Animation in the Browser
Presented at Seattle ID
mattfordham
August 15, 2012
Tweet
Share
More Decks by mattfordham
See All by mattfordham
Styleguide Driven Development
mattfordham
13
3k
Confessions of an Apprehensive Technical Director
mattfordham
11
310
Automating EE Bootstrapping and Deployment
mattfordham
3
170
Automating EE Bootstrapping and Deployment
mattfordham
2
230
Other Decks in Programming
See All in Programming
いまさら聞けない生成AI入門: 「生成AIを高速キャッチアップ」
soh9834
12
3.8k
List とは何か? / PHPerKaigi 2025
meihei3
0
560
WordPress Playground for Developers
iambherulal
0
120
アプリを起動せずにアプリを開発して品質と生産性を上げる
ishkawa
0
380
Go1.24で testing.B.Loopが爆誕
kuro_kurorrr
0
170
バックエンドNode.js × フロントエンドDeno で開発して得られた知見
ayame113
5
1.3k
マルチアカウント環境での、そこまでがんばらない RI/SP 運用設計
wa6sn
0
610
生成AIの使いどころ
kanayannet
0
100
MCP世界への招待: AIエンジニアが創る次世代エージェント連携の世界
gunta
2
590
パスキーのすべて / 20250324 iddance Lesson.5
kuralab
0
130
PHPでお金を扱う時、終わりのない 謎の1円調査の旅にでなくて済む方法
nakka
3
1.3k
The Evolution of Enterprise Java with Jakarta EE 11 and Beyond
ivargrimstad
0
990
Featured
See All Featured
Side Projects
sachag
452
42k
Building an army of robots
kneath
304
45k
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
4
500
The Power of CSS Pseudo Elements
geoffreycrofte
75
5.7k
Docker and Python
trallard
44
3.3k
Rebuilding a faster, lazier Slack
samanthasiow
80
8.9k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
7
620
Learning to Love Humans: Emotional Interface Design
aarron
273
40k
KATA
mclloyd
29
14k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
34
2.9k
VelocityConf: Rendering Performance Case Studies
addyosmani
328
24k
Transcript
Frame Animation in the Browser Seattle Interactive Developers / August
15, 2012
Matt Fordham Technical Director / WINTR www.wintr.com
None
Animated GIFs Multi-image Sequences Sprite Sequences
Animated GIFs Cons Lack of control GIF transparency GIF artifacts
Pros Easy to create Easy to implement Minimal requirements
Animated GIFs Cons Lack of control GIF transparency GIF artifacts
Pros Easy to create Easy to implement Minimal requirements
Animated GIFs Consider for... Looping animations Small details Low-tech contexts
(HTML emails) Make ‘em with... Photoshop
Multi-image Sequences Cons Lots of image requests Lots of DOM
elements Pros Any image type Good for larger images
Multi-image Sequences Consider for... Larger/longer animations Multi-stage animations Make ‘em
with... After Effects / 3D / Photoshop Javascript
Sprite Sequences Cons Not great for large images Pros Only
one image request Only one DOM element
Sprite Sequences Consider for... Smaller/shorter animations Button rollovers Make ‘em
with... After Effects / 3D / Photoshop Javascript
jquery.frameSequencer.js https://github.com/mattfordham/Frame-Sequencer
Other Useful Tools https://github.com/jakesgordon/sprite-factory http://imageoptim.com http://www.codingmammoth.com/quickscale.php http://manytricks.com/namemangler
Thanks :) @mattfordham www.wintr.com www.matthewfordham.com/blog