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

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
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
琵琶湖の水は止められてもNet--HTTPのリトライは止められない / You might be able to stop the water flow of Lake Biwa but you can't stop Net::HTTP retries
Avatar for luccafort luccafort
PRO
0
490
Built Our Own Background Agent at LayerX #aidevex_findy
Avatar for LayerX layerx
PRO
9
3.8k
5分で問診！Composer セキュリティ健康診断
Avatar for コドモン開発チーム codmoninc
0
700
アルゴリズムは何を圧縮しているのか ─ Haskell から育った「圧縮代数」というメンタルモデル
Avatar for Naoya Ito naoya
16
3.7k
JAWS-UG横浜 #102 AWSサ終供養LT会 成仏できない AWS サービスたち 〜本日、三体供養します〜
Avatar for maroon1st maroon1st
0
270
jsmini JavaScript Engine を作ってみた話
Avatar for Yosuke Furukawa yosuke_furukawa
PRO
0
260
TSX の <Hoge<Fuga>> という構文に驚いた話 / tsx-type-argument-syntax
Avatar for Kanaru kanaru0928
0
130
Android CLI
Avatar for Sungyong An fornewid
0
190
【やさしく解説 設計編・中級 #6】良いアーキテクチャとは ～ 一本の登り道の、行き先 ～
Avatar for HideyukiKitao panda728
PRO
0
190
仕様書を書く前にハーネスを作る - Agent Native開発は「探索を速く、判定を固く」
Avatar for Gota gotalab555
2
1.3k
광주소프트웨어마이스터고등학교 DevFest 특강 - 바이브 코딩 시대에서 주니어 개발자로 살아남는 방법
Avatar for Chris Ohk utilforever
1
160
OpenSpecのproposalにbrainstormingを持たせてみた
Avatar for Toranosuke Minamikawa tigertora7571
1
150

Featured

See All Featured
The Organizational Zoo: Understanding Human Behavior Agility Through Metaphoric Constructive Conversations (based on the works of Arthur Shelley, Ph.D)
Avatar for Dr. Kim W Petersen kimpetersen
PRO
0
400
So, you think you're a good person
Avatar for Per Axbom axbom
PRO
2
2.1k
Large-scale JavaScript Application Architecture
Avatar for Addy Osmani addyosmani
515
110k
エンジニアに許された特別な時間の終わり
Avatar for watany watany
108
250k
The Impact of AI in SEO - AI Overviews June 2024 Edition
Avatar for Aleyda Solis aleyda
5
1.1k
Bash Introduction
Avatar for André Augusto Costa Santos 62gerente
615
220k
Mobile First: as difficult as doing things right
Avatar for Swwweet swwweet
225
10k
Deep Space Network (abreviated)
Avatar for Tony Rice tonyrice
0
240
Heart Work Chapter 1 - Part 1
Avatar for Lake Fama lfama
PRO
8
36k
Breaking role norms: Why Content Design is so much more than writing copy - Taylor Woolridge
Avatar for UX Y'all uxyall
0
360
16th Malabo Montpellier Forum Presentation
Avatar for AKADEMIYA2063 akademiya2063
PRO
0
300
A Tale of Four Properties
Avatar for Chris Coyier chriscoyier
163
24k

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