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
320
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にコードを生成するコードを作らせて、再現性を担保しよう! / Let AI generate code to ensure reproducibility
yamachu
7
6.1k
Rethinking Data Access: The New httpResource in Angular
manfredsteyer
PRO
0
230
當開發遇上包裝:AI 如何讓產品從想法變成商品
clonn
0
2.8k
RubyKaigiで得られる10の価値 〜Ruby話を聞くことだけが RubyKaigiじゃない〜
tomohiko9090
0
120
Step up the performance game with Spring Boot and Project Leyden
mhalbritter
0
140
少数精鋭エンジニアがフルスタック力を磨く理由 -そしてAI時代へ-
rebase_engineering
0
140
複雑なフォームを継続的に開発していくための技術選定・設計・実装 #tskaigi / #tskaigi2025
izumin5210
12
6.7k
推論された型の移植性エラーTS2742に挑む
teamlab
PRO
0
170
「兵法」から見る質とスピード
ickx
0
240
💎 My RubyKaigi Effect in 2025: Top Ruby Companies 🌐
yasulab
PRO
1
130
UPDATEがシステムを複雑にする? イミュータブルデータモデルのすすめ
shimomura
0
400
Blueskyのプラグインを作ってみた
hakkadaikon
1
360
Featured
See All Featured
Bootstrapping a Software Product
garrettdimon
PRO
307
110k
Adopting Sorbet at Scale
ufuk
76
9.4k
The Language of Interfaces
destraynor
158
25k
Build your cross-platform service in a week with App Engine
jlugia
231
18k
Automating Front-end Workflow
addyosmani
1370
200k
Facilitating Awesome Meetings
lara
54
6.4k
Building a Modern Day E-commerce SEO Strategy
aleyda
41
7.3k
Build The Right Thing And Hit Your Dates
maggiecrowley
35
2.7k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
35
2.3k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
47
2.8k
Building Better People: How to give real-time feedback that sticks.
wjessup
368
19k
What's in a price? How to price your products and services
michaelherold
245
12k
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