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
未経験でSRE、はじめました! 組織を支える役割と軌跡
curekoshimizu
1
140
Rubyと自由とAIと
yotii23
6
1.7k
Ça bouge du côté des animations CSS !
goetter
2
150
Domain-Driven Transformation
hschwentner
2
1.9k
Rails アプリ地図考 Flush Cut
makicamel
1
130
仕様変更に耐えるための"今の"DRY原則を考える
mkmk884
9
3.2k
CSS Linter による Baseline サポートの仕組み
ryo_manba
1
150
Honoとフロントエンドの 型安全性について
yodaka
7
1.4k
Jakarta EE meets AI
ivargrimstad
0
350
Ruby on cygwin 2025-02
fd0
0
180
Serverless Rust: Your Low-Risk Entry Point to Rust in Production (and the benefits are huge)
lmammino
1
150
Datadog Workflow Automation で圧倒的価値提供
showwin
1
160
Featured
See All Featured
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
30
2.2k
Navigating Team Friction
lara
183
15k
The Language of Interfaces
destraynor
156
24k
Fantastic passwords and where to find them - at NoRuKo
philnash
51
3k
A designer walks into a library…
pauljervisheath
205
24k
The Power of CSS Pseudo Elements
geoffreycrofte
75
5.5k
It's Worth the Effort
3n
184
28k
The Art of Programming - Codeland 2020
erikaheidi
53
13k
Rails Girls Zürich Keynote
gr2m
94
13k
Gamification - CAS2011
davidbonilla
80
5.2k
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.1k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
233
17k
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