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

Designing Motion (The JavaScript Version)

Sponsored · Your Podcast. Everywhere. Effortlessly. Share. Educate. Inspire. Entertain. You do you. We'll handle the rest. →
Avatar for Val Head Val Head
November 29, 2011
Design
7
600

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
Tweet

More Decks by Val Head

See All by Val Head
Getting Animation Done
Avatar for Val Head valhead
0
180
Designing Animation Awesomeness - FOWD 2014
Avatar for Val Head valhead
2
540
Putting Your UIs in Motion (AEA Orlando)
Avatar for Val Head valhead
0
820
Designing Animation Awesomeness - Artifact East
Avatar for Val Head valhead
1
1.1k
Web Designer/ Motion Designer - Blend Conf 2014
Avatar for Val Head valhead
1
340
Web Design / Motion Design
Avatar for Val Head valhead
1
180
Designing Animation Awesomeness - Artifact Austin
Avatar for Val Head valhead
4
540
Creative CSS: Thinking in the 3rd dimension FOWD NY
Avatar for Val Head valhead
2
470
CSS Animations Are The Awesomest!
Avatar for Val Head valhead
2
260

Other Decks in Design

See All in Design
デザイナーが主導権を握る、AI協業の本音と実践
Avatar for satosio satosio
7
2.7k
Storyboard Assignment: Storyboard from Comic Strip
Avatar for Mandalyn Teo lynteo
3
180
【MIXI MEETUP！ー TECH & DESIGN DAYー】【工数98%削減】Xでモンストを話題にせよ！生成AIの活用で日本トレンド6位を獲得した企画の設計&デザイン術
Avatar for MIXI DESIGN mixi_design
PRO
0
190
Storyboard Exercise: Chase Sequence
Avatar for Mandalyn Teo lynteo
1
200
株式会社ログラス - 会社説明資料【デザイナー】/ Loglass Designer
Avatar for 株式会社ログラス loglass2019
1
7k
アンエシカルデザインの枠組みの提案 -HCD-Netダークパターン研究会活動報告-
Avatar for Yu Morita securecat
0
190
Mandalyn_DT5001_FinalAssignment.pdf
Avatar for Mandalyn Teo lynteo
0
130
ユーザー体験は細部に宿る -ウィジェットQAの挑戦と気づき- / UX is in the details: Challenges and Learnings from Widget QA
Avatar for 株式会社ビットキー / Bitkey Inc. bitkey
PRO
0
140
Emmy's Artwork
Avatar for McKenna mcksmith
0
190
UI/UX & Web Design Portfolio 2025｜Madoka Kumagai
Avatar for Madoka madoka_portfolio
2
110
チームをデザイン対象にする / Design for your team
Avatar for 株式会社カミナシ kaminashi
1
500
DMMデザイナーの “AI活用の現在と未来”
Avatar for TakumaS takumasaito
1
430

Featured

See All Featured
Product Roadmaps are Hard
Avatar for C. Todd Lombardo iamctodd
PRO
55
12k
Optimizing for Happiness
Avatar for Tom Preston-Werner mojombo
379
71k
HU Berlin: Industrial-Strength Natural Language Processing with spaCy and Prodigy
Avatar for Ines Montani inesmontani
PRO
0
200
Bridging the Design Gap: How Collaborative Modelling removes blockers to flow between stakeholders and teams @FastFlow conf
Avatar for Kenny Baas-Schwegler baasie
0
440
Discover your Explorer Soul
Avatar for Emna emna__ayadi
2
1.1k
SEO in 2025: How to Prepare for the Future of Search
Avatar for Michael King ipullrank
3
3.3k
Principles of Awesome APIs and How to Build Them.
Avatar for Keavy McMinn keavy
128
17k
Building an army of robots
Avatar for Kyle Neath kneath
306
46k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
Avatar for Chris Coyier chriscoyier
508
140k
Performance Is Good for Brains [We Love Speed 2024]
Avatar for Tammy Everts tammyeverts
12
1.4k
Accessibility Awareness
Avatar for Sarah Abderemane sabderemane
0
49
コードの90%をAIが書く世界で何が待っているのか / What awaits us in a world where 90% of the code is written by AI
Avatar for r-kagaya rkaga
60
42k

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!