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
S3 TablesのIcebergデータに、AIエージェントからアクセスしてみた / 20261016developersio2026joetsu-accessing-iceberg-in-s3tables-via-agent
Avatar for kasacchiful kasacchiful
PRO
0
210
Python Lambdaにおけるテストしやすい設計とAI支援の活用 / Designing Testable Python Lambda Functions with AI
Avatar for Kitano Yuichi kitano_yuichi
1
200
TanStack Vue Query と Pinia Colada から学ぶ非同期状態の型設計
Avatar for aoshi aoshi
0
310
R8 の設定見直しでアプリサイズ削減
Avatar for ANDPAD inc andpad
0
230
ActionController meets Protocol Buffers
Avatar for Sorah Fukumori sorah
1
720
sbt 2.0: takeoff
Avatar for Eugene Yokota eed3si9n
0
170
APNsからLive Activityを開始する話
Avatar for Ryotaro Onoue yumnumm
0
180
Compiling a real-world CLI tool to native with Static Hermes
Avatar for Tzvetan Mikov tmikov2023
0
130
パスワード再設定メールのURLについて知っておこう
Avatar for uyuki uyuki234
0
190
コーディング自動化の次へ。人の介入をゼロにするファクトリーとサポートAIによる実践
Avatar for Seiji Takahashi timakin
5
4.7k
SFCで実現する病院・医療システムの動的組み立て式UI
Avatar for kouki.miura koukimiura
1
120
AI時代のシニアエンジニアとは
Avatar for Yosuke Furukawa yosuke_furukawa
PRO
11
8.7k

Featured

See All Featured
Neural Spatial Audio Processing for Sound Field Analysis and Control
Avatar for NII S. Koyama's Lab skoyamalab
0
580
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
Avatar for Dan Newman danielanewman
230
23k
svc-hook: hooking system calls on ARM64 by binary rewriting
Avatar for Akira Moroo retrage
2
640
XXLCSS - How to scale CSS and keep your sanity
Avatar for Zaharenia Atzitzikaki sugarenia
250
1.3M
The Illustrated Guide to Node.js - THAT Conference 2024
Avatar for David Neal reverentgeek
1
580
From π to Pie charts
Avatar for Rasagy Sharma rasagy
1
410
A brief & incomplete history of 
UX Design for the World Wide Web: 1989–2019
Avatar for Jason CranfordTeague jct
2
540
The #1 spot is gone: here's how to win anyway
Avatar for Tamara Novitovic tamaranovitovic
4
1.2k
Design of three-dimensional binary manipulators for pick-and-place task avoiding obstacles (IECON2024)
Avatar for konakalab konakalab
0
630
Data-driven link building: lessons from a $708K investment (BrightonSEO talk)
Avatar for Szymon Słowik szymonslowik
1
1.4k
Everyday Curiosity
Avatar for Cassini Nazir cassininazir
0
360
The AI Search Optimization Roadmap by Aleyda Solis
Avatar for Aleyda Solis aleyda
2
6.3k

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