Upgrade to Pro — share decks privately, control downloads, hide ads and more …
Sign up for free

Frame Animation in the Browser

Avatar for mattfordham mattfordham
August 15, 2012
Programming
240
2

Frame Animation in the Browser

Presented at Seattle ID

Avatar for mattfordham

mattfordham

August 15, 2012

More Decks by mattfordham

See All by mattfordham
Styleguide Driven Development
Avatar for mattfordham mattfordham
13
3.2k
Confessions of an Apprehensive Technical Director
Avatar for mattfordham mattfordham
11
390
Automating EE Bootstrapping and Deployment
Avatar for mattfordham mattfordham
3
210
Automating EE Bootstrapping and Deployment
Avatar for mattfordham mattfordham
2
260

Other Decks in Programming

See All in Programming
[Rails World 2026] Durable orchestration on Rails: from continuation to workflow
Avatar for Vladimir Dementyev palkan
1
470
Unity6 URPによる海底をテーマにしたVJシステムの解説 | Unity Shader 完全に理解した 勉強会
Avatar for がむ gam0022
0
330
パーソナライズPodcastを作った話
Avatar for repunit11 repunit11
0
120
残高管理から台帳サービスへの進化
Avatar for kobaryo artoy
0
140
すこし踏み込む CancellationToken
Avatar for tkym htkym
2
1.6k
Simple Storage Service(S3) is not simple
Avatar for Yura Iwatsuka iwatsukayura
0
190
setup-vp GitLab対応の裏側
Avatar for Naoki Haba naokihaba
0
150
Augmenting AI with the Power of Jakarta EE
Avatar for ivargrimstad ivargrimstad
0
440
CodeRabbitの効果検証と過ごしてみた3ヶ月
Avatar for armondando armondando
0
140
mrbgem 三角測量 開発
Avatar for ogom ogom
0
200
APNsからLive Activityを開始する話
Avatar for Ryotaro Onoue yumnumm
0
150
WebRTC映像をAirPlayに対応させる挑戦.pdf
Avatar for monolithic-adam monolithic_adam
0
340

Featured

See All Featured
Self-Hosted WebAssembly Runtime for Runtime-Neutral Checkpoint/Restore in Edge–Cloud Continuum
Avatar for Yuki Nakata chikuwait chikuwait
0
860
Agile that works and the tools we love
Avatar for Rasmus Luckow-Nielsen rasmusluckow
331
22k
A Guide to Academic Writing Using Generative AI - A Workshop
Avatar for Kenji Saito ks91
PRO
1
500
Building Flexible Design Systems
Avatar for Yesenia Perez-Cruz yeseniaperezcruz
330
41k
Crafting Experiences
Avatar for Bethany Jepchumba bethany
1
370
Agile Actions for Facilitating Distributed Teams - ADO2019
Avatar for Mark Kilby mkilby
0
300
Making the Leap to Tech Lead
Avatar for Ryan Cromwell cromwellryan
135
10k
The Limits of Empathy - UXLibs8
Avatar for Cassini Nazir cassininazir
1
700
Max Prin - Stacking Signals: How International SEO Comes Together (And Falls Apart)
Avatar for Tech SEO Connect techseoconnect
PRO
0
480
SEOcharity - Dark patterns in SEO and UX: How to avoid them and build a more ethical web
Avatar for Sara Fernández Carmona sarafernandez
0
300
Leo the Paperboy
Avatar for Maya Tellez mayatellez
10
2.3k
The AI Revolution Will Not Be Monopolized: How open-source beats economies of scale, even for LLMs
Avatar for Ines Montani inesmontani
PRO
3
3.8k

Transcript

  1. Frame Animation in the Browser Seattle Interactive Developers / August

    15, 2012

  2. Matt Fordham Technical Director / WINTR www.wintr.com

  3. None

  4. Animated GIFs Multi-image Sequences Sprite Sequences

  5. Animated GIFs Cons Lack of control GIF transparency GIF artifacts

    Pros Easy to create Easy to implement Minimal requirements

  6. Animated GIFs Cons Lack of control GIF transparency GIF artifacts

    Pros Easy to create Easy to implement Minimal requirements

  7. Animated GIFs Consider for... Looping animations Small details Low-tech contexts

    (HTML emails) Make ‘em with... Photoshop

  8. Multi-image Sequences Cons Lots of image requests Lots of DOM

    elements Pros Any image type Good for larger images

  9. Multi-image Sequences Consider for... Larger/longer animations Multi-stage animations Make ‘em

    with... After Effects / 3D / Photoshop Javascript

  10. Sprite Sequences Cons Not great for large images Pros Only

    one image request Only one DOM element

  11. Sprite Sequences Consider for... Smaller/shorter animations Button rollovers Make ‘em

    with... After Effects / 3D / Photoshop Javascript

  12. jquery.frameSequencer.js https://github.com/mattfordham/Frame-Sequencer

  13. Other Useful Tools https://github.com/jakesgordon/sprite-factory http://imageoptim.com http://www.codingmammoth.com/quickscale.php http://manytricks.com/namemangler

  14. Thanks :) @mattfordham www.wintr.com www.matthewfordham.com/blog