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
3.1k
Confessions of an Apprehensive Technical Director
mattfordham
11
340
Automating EE Bootstrapping and Deployment
mattfordham
3
180
Automating EE Bootstrapping and Deployment
mattfordham
2
230
Other Decks in Programming
See All in Programming
CSC305 Lecture 08
javiergs
PRO
0
280
bootcamp2025_バックエンド研修_WebAPIサーバ作成.pdf
geniee_inc
0
130
釣り地図SNSにおける有料機能の実装
nokonoko1203
0
200
Claude CodeによるAI駆動開発の実践 〜そこから見えてきたこれからのプログラミング〜
iriikeita
0
330
GC25 Recap: The Code You Reviewed is Not the Code You Built / #newt_gophercon_tour
mazrean
0
110
Cursorハンズオン実践!
eltociear
2
1.2k
The Past, Present, and Future of Enterprise Java
ivargrimstad
0
630
EMこそClaude Codeでコード調査しよう
shibayu36
0
410
pnpm に provenance のダウングレード を検出する PR を出してみた
ryo_manba
1
160
CSC509 Lecture 08
javiergs
PRO
0
250
AI 駆動開発におけるコミュニティと AWS CDK の価値
konokenj
5
240
One Enishi After Another
snoozer05
PRO
0
160
Featured
See All Featured
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
658
61k
Intergalactic Javascript Robots from Outer Space
tanoku
272
27k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
508
140k
Bash Introduction
62gerente
615
210k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
9
930
[RailsConf 2023] Rails as a piece of cake
palkan
57
5.9k
Become a Pro
speakerdeck
PRO
29
5.6k
Fashionably flexible responsive web design (full day workshop)
malarkey
407
66k
Automating Front-end Workflow
addyosmani
1371
200k
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
4k
For a Future-Friendly Web
brad_frost
180
10k
Optimizing for Happiness
mojombo
379
70k
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