Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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
2
220

Frame Animation in the Browser

Presented at Seattle ID

Avatar for mattfordham

mattfordham

August 15, 2012
Tweet

More Decks by mattfordham

See All by mattfordham
Styleguide Driven Development
Avatar for mattfordham mattfordham
13
3.1k
Confessions of an Apprehensive Technical Director
Avatar for mattfordham mattfordham
11
360
Automating EE Bootstrapping and Deployment
Avatar for mattfordham mattfordham
3
190
Automating EE Bootstrapping and Deployment
Avatar for mattfordham mattfordham
2
240

Other Decks in Programming

See All in Programming
それはエンジニアリングの糧である：AI開発のためにAIのOSSを開発する現場より / It serves as fuel for engineering: insights from the field of developing open-source AI for AI development.
Avatar for nrs nrslib
0
300
CDIの誤解しがちな仕様とその対処TIPS
Avatar for futokiyo futokiyo
0
220
Rで始めるML・LLM活用入門
Avatar for wakama1994 wakamatsu_takumu
0
190
ふつうのRubyist、ちいさなデバイス、大きな一年 / Ordinary Rubyists, Tiny Devices, Big Year
Avatar for chobishiba chobishiba
1
480
RubyとGoでゼロから作る証券システム： 高信頼性が求められるシステムのコードの外側にある設計と運用のリアル
Avatar for free_world21 free_world21
0
310
GC言語のWasm化とComponent Modelサポートの実践と課題 - Scalaの場合
Avatar for Rikito Taniguchi tanishiking
0
120
生成 AI 時代のスナップショットテストってやつを見せてあげますよ（α版）
Avatar for ojun ojun9
0
270
米国のサイバーセキュリティタイムラインと見る Goの暗号パッケージの進化
Avatar for tom twinkle tomtwinkle
2
610
The Past, Present, and Future of Enterprise Java
Avatar for ivargrimstad ivargrimstad
0
700
コードレビューをしない選択 #でぃーぷらすトウキョウ
Avatar for Takuma Kajikawa kajitack
3
1k
モックわからないマン卒業記 ~振る舞いを起点に見直した、フロントエンドテストにおけるモックの使いどころ~
Avatar for Tasuku Watanabe tasukuwatanabe
3
400
CS教育のDX AIによる育成の効率化
Avatar for ニフティ株式会社 niftycorp
PRO
0
140

Featured

See All Featured
Sharpening the Axe: The Primacy of Toolmaking
Avatar for Bryan Cantrill bcantrill
46
2.7k
The Spectacular Lies of Maps
Avatar for Per Axbom axbom
PRO
1
630
KATA
Avatar for Megan Lloyd mclloyd
PRO
35
15k
10 Git Anti Patterns You Should be Aware of
Avatar for Lemi Orhan Ergin lemiorhan
PRO
659
61k
A brief & incomplete history of 
UX Design for the World Wide Web: 1989–2019
Avatar for Jason CranfordTeague jct
1
320
Marketing Yourself as an Engineer | Alaka | Gurzu
Avatar for Gurzu gurzu
0
150
Stewardship and Sustainability of Urban and Community Forests
Avatar for Eric Wiseman pwiseman
0
150
Amusing Abliteration
Avatar for ianozsvald ianozsvald
0
140
Game over? The fight for quality and originality in the time of robots
Avatar for Wayne Barker wayneb77
1
140
Design of three-dimensional binary manipulators for pick-and-place task avoiding obstacles (IECON2024)
Avatar for konakalab konakalab
0
380
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
Avatar for panda_program panda_program
122
21k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
Avatar for Eileen M. Uchitelle eileencodes
141
35k

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