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ネイティブスタートアップにおけるプロダクト開発の新常識 / Product Development Tips in AI-Native Startups
Avatar for Jumpei Sakatsu saka2jp
2
940
はじめての演奏会フライヤーデザイン
Avatar for Kaito Kikuchi chorkaichan
1
220
Figmaレクチャー会Part1 基本のき編＠千株式会社 社内勉強会
Avatar for ぽん designer_no_pon
2
250
結びながら、ひらく - にじむ境界のデザイン
Avatar for Hiroki Tani hilokifigma
3
1.3k
見過ごさない誠実さ_アクティブバイスタンダーとIntegrityが支えるアジャイル文化 / integrity-and-active-bystander
Avatar for Aki spring_aki
1
290
2026の目標「もっと定量的に事業、会社へ貢献する！」
Avatar for yuri ohashi yuri_ohashi
0
680
OJTで学んだ 「心を動かす」ファシリテーション
Avatar for さき saki822
1
240
Mandalyn_DT5001_FinalAssignment.pdf
Avatar for Mandalyn Teo lynteo
0
130
チームをデザイン対象にする / Design for your team
Avatar for 株式会社カミナシ kaminashi
1
550
組織はみんなでつくる。デザイナーが仕掛ける急拡大する組織のカルチャーづくり
Avatar for Kasumi Morita mkasumi
0
1.1k
モビリティプラットフォームの未来を築くクラウド基盤
Avatar for Hajime KOSHIRO kossykinto
0
210
デザインエンジニアの延長にデザインマネージャーとしての可能性を探る
Avatar for takanorip takanorip
1
900

Featured

See All Featured
Noah Learner - AI + Me: how we built a GSC Bulk Export data pipeline
Avatar for Tech SEO Connect techseoconnect
PRO
0
110
Future Trends and Review - Lecture 12 - Web Technologies (1019888BNR)
Avatar for Beat Signer signer
PRO
0
3.2k
Un-Boring Meetings
Avatar for Sebastian Deterding codingconduct
0
200
The Limits of Empathy - UXLibs8
Avatar for Cassini Nazir cassininazir
1
220
Building Adaptive Systems
Avatar for Chris Keathley keathley
44
2.9k
The SEO Collaboration Effect
Avatar for Kristina Bergwall kristinabergwall1
0
350
The browser strikes back
Avatar for Jono Alderson jonoalderson
0
390
Conquering PDFs: document understanding beyond plain text
Avatar for Ines Montani inesmontani
PRO
4
2.3k
Measuring & Analyzing Core Web Vitals
Avatar for Philip Tellis bluesmoon
9
750
Color Theory Basics | Prateek | Gurzu
Avatar for Gurzu gurzu
0
200
SERP Conf. Vienna - Web Accessibility: Optimizing for Inclusivity and SEO
Avatar for Sara Fernández Carmona sarafernandez
1
1.3k
The Success of Rails: Ensuring Growth for the Next 100 Years
Avatar for Eileen M. Uchitelle eileencodes
47
7.9k

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!