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
AWS CDK を「作」ってみた 〜フルスクラッチで見えた CDK の裏側〜 / aws-cdk-from-scratch
Avatar for k.goto gotok365
3
500
Laravelで学ぶ Webアプリケーションチューニング入門/web_application_tuning_101
Avatar for Ryo Tomidokoro hanhan1978
4
1.3k
Apache Hive: Toward a Cloud Native Lakehouse
Avatar for okumin okumin
0
160
【やさしく解説 設計編・中級 #4】ルールの寿命と、システムの年輪
Avatar for HideyukiKitao panda728
PRO
2
160
アルゴリズムは何を圧縮しているのか ─ Haskell から育った「圧縮代数」というメンタルモデル
Avatar for Naoya Ito naoya
16
3.6k
Claude Team Plan導入・ガイド
Avatar for tk3fftk tk3fftk
0
220
AIを活用したE2Eテスト実装効率化のあゆみ / ebisu-mobile-14-kotetu
Avatar for kotetu (kotetuco) kotetuco
0
180
Terraform標準の組織で AWS CDKをどう使うか
Avatar for mu7889yoon / Yuta Nakamura mu7889yoon
1
350
型も通る、synthも通る、それでも危ない 〜AIのCDKの権限とコストを機械で検証する〜 / It Passes Type Checks, It Passes Synth Checks, but It’s Still Risky — Automatically Verifying Permissions and Costs in AI’s CDK —
Avatar for shiro seike seike460
PRO
1
410
継続モナドとリアクティブプログラミング
Avatar for ゆきくらげ yukikurage
3
630
SREの積み重ねがAI駆動開発のガードレールになった ― 7つの実践/SRE Guardrails The 7
Avatar for TomoyaKitaura tomoyakitaura
8
5.3k
なぜ関数型プログラミングで「型」と「証明」が語られるのか #fp_matsuri
Avatar for Takuma Kajikawa kajitack
3
1k

Featured

See All Featured
The Invisible Side of Design
Avatar for Vitaly Friedman smashingmag
301
52k
Documentation Writing (for coders)
Avatar for Carmen Chung carmenintech
77
5.4k
Navigating the Design Leadership Dip - Product Design Week Design Leaders+ Conference 2024
Avatar for Andy Polaine apolaine
1
370
Are puppies a ranking factor?
Avatar for Jono Alderson jonoalderson
1
3.7k
How To Stay Up To Date on Web Technology
Avatar for Chris Coyier chriscoyier
790
250k
Building AI with AI
Avatar for Ines Montani inesmontani
PRO
1
1.1k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
Avatar for mongodb mongodb
49
10k
Raft: Consensus for Rubyists
Avatar for Patrick Van Stee vanstee
141
7.6k
Conquering PDFs: document understanding beyond plain text
Avatar for Ines Montani inesmontani
PRO
4
2.9k
Color Theory Basics | Prateek | Gurzu
Avatar for Gurzu gurzu
0
390
The B2B funnel & how to create a winning content strategy
Avatar for Katarina Dahlin katarinadahlin
PRO
1
420
The Psychology of Web Performance [Beyond Tellerrand 2023]
Avatar for Tammy Everts tammyeverts
49
3.5k

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