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

Frame Animation in the Browser

Sponsored · SiteGround - Reliable hosting with speed, security, and support you can count on. →
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
380
Automating EE Bootstrapping and Deployment
Avatar for mattfordham mattfordham
3
200
Automating EE Bootstrapping and Deployment
Avatar for mattfordham mattfordham
2
250

Other Decks in Programming

See All in Programming
初心者DevRelとして参加者だった私が、DevRel Talks!#2に登壇するまでにしてきたこと
Avatar for Rai sokohirai
0
360
ゲームコントローラやキーボードのファームウェアをSwiftで書く
Avatar for Kishikawa Katsumi kishikawakatsumi
1
130
Gmail/Google DriveをトリガーにAIエージェントを動かそう！ / Run AI agents with Gmail/Google Drive as triggers!
Avatar for Har1101 har1101
3
490
20260914 AIエージェント時代のPlatform Engineering　LLM基盤とプロダクトの責務境界線
Avatar for Taiki Kanzaki kanfab1
2
190
GKE で Pod の見方を変えたら、スケールアウト時の挙動を真に捉えられた話
Avatar for Sota Takaki stkk
0
110
tsc.rip を支える技術 / Kyoto.なんか #8
Avatar for Susisu susisu
0
4.4k
ソフトウェアラスタライザ
Avatar for Fadis fadis
1
800
The Good Stuff, Not the Slop: Engineering High-Quality Android Apps with Modern AI Tooling
Avatar for danybony danybony
1
240
LoopHub - ローカルで動く GitHub で、AI と共同開発
Avatar for jugyo jugyo
1
490
AIエージェント時代のコードレビューを設計する
Avatar for nogu nogu66
6
2.6k
AI × TiDD / 2026.09.05 Redmine 大阪
Avatar for tokudiro tokudiro
1
120
AIは賢い。でも実行環境は？ CLIおじさんがAI時代に伝えたいこと ~ CLIおじさんがAI時代に伝えたいこと ~
Avatar for curekoshimizu curekoshimizu
1
230

Featured

See All Featured
RailsConf 2023
Avatar for Aaron Patterson tenderlove
30
1.5k
職位にかかわらず全員がリーダーシップを発揮するチーム作り / Building a team where everyone can demonstrate leadership regardless of position
Avatar for MADOX madoxten
69
65k
AI Search:
Where Are We & What Can We Do About It?
Avatar for Aleyda Solis aleyda
0
7.9k
Design in an AI World
Avatar for tapps tapps
1
310
Save Time (by Creating Custom Rails Generators)
Avatar for Garrett Dimon garrettdimon
PRO
32
4.7k
Into the Great Unknown - MozCon
Avatar for Noah Learner thekraken
41
2.7k
My Coaching Mixtape
Avatar for mlcsv mlcsv
0
310
[SF Ruby Conf 2025] Rails X
Avatar for Vladimir Dementyev palkan
2
1.4k
Music & Morning Musume
Avatar for Bryan Veloso bryan
47
7.4k
4 Signs Your Business is Dying
Avatar for Josh Pigford shpigford
187
23k
Jess Joyce - The Pitfalls of Following Frameworks
Avatar for Tech SEO Connect techseoconnect
PRO
1
410
Ethics towards AI in product and experience design
Avatar for Skipper Chong Warson skipperchong
2
370

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