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

Designing Motion (The JavaScript Version)

Avatar for Val Head Val Head
November 29, 2011
Design
630
7

Designing Motion (The JavaScript Version)

Designing Motion presentation as seen at Pgh.Js() on Nov 29th 2011

Avatar for Val Head

Val Head

November 29, 2011

More Decks by Val Head

See All by Val Head
Getting Animation Done
Avatar for Val Head valhead
0
220
Designing Animation Awesomeness - FOWD 2014
Avatar for Val Head valhead
2
560
Putting Your UIs in Motion (AEA Orlando)
Avatar for Val Head valhead
0
870
Designing Animation Awesomeness - Artifact East
Avatar for Val Head valhead
1
1.2k
Web Designer/ Motion Designer - Blend Conf 2014
Avatar for Val Head valhead
1
370
Web Design / Motion Design
Avatar for Val Head valhead
1
200
Designing Animation Awesomeness - Artifact Austin
Avatar for Val Head valhead
4
570
Creative CSS: Thinking in the 3rd dimension FOWD NY
Avatar for Val Head valhead
2
490
CSS Animations Are The Awesomest!
Avatar for Val Head valhead
2
280

Other Decks in Design

See All in Design
富山デザイン勉強会_生成AIを使ったデザイン制作2026最新版.pdf
Avatar for keita keita_yoshikawa
0
150
Bet AI Day 2026丨デザインハーネス：専門職の判断基準をコードのように運用する
Avatar for LayerX layerx
PRO
6
7.1k
Decksh keywords
Avatar for Anthony Starks ajstarks
0
140
Kouseki | CREATIVE CLASS成果物
Avatar for Yurika Ishida yuri9911
0
240
Design dependencies
Avatar for Teba_eleven teba_eleven
0
180
[Unity] VAT×VFX Graphがいま個人的にアツイという話
Avatar for sakiama sakiyama
0
110
MUUUUU.ORG 協賛バナーのご案内
Avatar for クオートワークス quoitworks999
0
320
クリエイティブディレクター 両角 高寛 の自己紹介
Avatar for GYRO両角 morogyro
0
200
デザインツールを開く前に その画面は誰に何と言わせたい？受託UIデザイナーが顧客解像度を高める 「打ち合わせの場での確かめ方」
Avatar for @Garyuten garyuten
1
260
Findy - デザインチーム紹介 / Findy Design Team Culture Deck
Avatar for Findy findyinc
14
150k
染み出し好きの、 染み出しコントロール論
Avatar for Takeru Mukai mukai_takeru
0
490
明日から真似できる、AIでデザインシステムを活用する方法
Avatar for viviON vivion
0
800

Featured

See All Featured
Un-Boring Meetings
Avatar for Sebastian Deterding codingconduct
0
440
Visual Storytelling: How to be a Superhuman Communicator
Avatar for David Neal reverentgeek
2
700
Beyond borders and beyond the search box: How to win the global "messy middle" with AI-driven SEO
Avatar for David Carrasco davidcarrasco
3
270
Hiding What from Whom? A Critical Review of the History of Programming languages for Music
Avatar for Tomoya Matsuura tomoyanonymous
3
1.3k
Optimising Largest Contentful Paint
Avatar for Harry Roberts csswizardry
37
4k
Improving Core Web Vitals using Speculation Rules API
Avatar for Sergey Chernyshev sergeychernyshev
21
1.7k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
Avatar for Eileen M. Uchitelle eileencodes
38
3k
How to build an LLM SEO readiness audit: a practical framework
Avatar for Nick Samuel nmsamuel
2
930
Fight the Zombie Pattern Library - RWD Summit 2016
Avatar for Marcelo Somers marcelosomers
234
18k
A brief & incomplete history of 
UX Design for the World Wide Web: 1989–2019
Avatar for Jason CranfordTeague jct
2
530
A Guide to Academic Writing Using Generative AI - A Workshop
Avatar for Kenji Saito ks91
PRO
1
510
Embracing the Ebb and Flow
Avatar for Simon Collison colly
88
5.2k

Transcript

  1. Designing Motion Make Animation On The Web Extra Awesome!

  2. EVENTS! MAKING THINGS! DESIGN!

  3. Designing Motion Make Animation On The Web Extra Awesome!

  4. Details Insert cliche here

  5. None

  6. Why Now?

  7. None
  8. None
  9. None

  10. with great comes Responsibility Power Great

  11. None

  12. {...}

  13. Animation for UI

  14. OPEN, CLOSE! BUTTONS, LINKS! BASED ON USER INPUT FADES

  15. None
  16. None
  17. None

  18. Animation for Experience

  19. None
  20. None
  21. None

  22. BREAK IT DOWN

  23. None
  24. None
  25. None

  26. {...}

  27. SO Many Options!

  28. Metaphor What are you imitating?

  29. None
  30. None
  31. None
  32. None

  33. Weight & Physics Light as a feather. Stiff as a

    board.
  34. None
  35. None

  36. The idea that various aspects of the character’s attributes come

    together to just feel “right”. Appeal

  37. “... it’s easy to forget that when you’re building a

    game you’re not just building a set of rules or a pile of content. You’re crafting and experience... Animation happens to be my weapon of choice to achieve this” [Mika Mobile blog post]

  38. Internet != Cartoon

  39. Rules Just For Us :)

  40. Are we there yet? “Point B” isn’t static.

  41. Yeah I changed my mind

  42. None
  43. None
  44. None
  45. None

  46. Semantics Matter We care about that codestuffs

  47. That’s Mr. DOM respect!

  48. Hi, I’m a link! Hi, I’m a link! Hi, I’m

    a link!

  49. New Things!! yay?

  50. Fallbacks+ browsers, devices, the future, oh my!

  51. None

  52. Limitations work with them, not against them. frenemies?

  53. None
  54. None

  55. Dealing With Multiples

  56. Transference

  57. None
  58. None

  59. Time Signatures

  60. None
  61. None
  62. None
  63. None
  64. None

  65. Go Play! Experiment. Make things. Have fun. Edit later.

  66. Slides & Things: valhead.com Let’s Chat: [email protected] • @vlh Thanks!