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
【pmconf2025】PdMの頭の中を見える化する体験構造図
Avatar for Shigeyuki Kameda kamechi7222222
1
1.9k
Correspondence：共に生成していく過程
Avatar for Akira Motomura akiramotomura
0
190
root COMPANY DECK / We are hiring！
Avatar for 株式会社ルート root_recruit
2
26k
AIスライドデザインを生成する仕組みを社内共有する
Avatar for 太田賢一 kenichiota0711
5
3.9k
プラットフォームに馴染むモバイルアプリデザイン / Mobile App UI Design Lunch LT
Avatar for Hiroki Nagasawa pixyzehn
0
130
デザイナーがはばたく未来の入り口『hatch』が描く、新しいデザイナー育成のカタチ
Avatar for Goodpatch Inc. goodpatch
3
3.1k
【Designship 2025｜10.11】デザイン組織と事業貢献、その挑戦と結果。
Avatar for payatsun payatsusan213
1
910
チームをデザイン対象にする / Design for your team
Avatar for 株式会社カミナシ kaminashi
1
520
Treasure_Hunting
Avatar for Sol Metts solmetts
0
230
AIエージェントが対話的なUIを返す！MCP−UIで変わるユーザ体験
Avatar for daitasu daitasu
1
140
不確実性の時代にみんなで試したFigma × MCP × Cursor ハンズオン
Avatar for PERSOL CAREER Dev | techtekt techtekt
PRO
7
1.8k
「デザイン」の自分ごと化から始める、デザインピープルのふるまい
Avatar for mewmo mewmo
PRO
0
160

Featured

See All Featured
Fight the Zombie Pattern Library - RWD Summit 2016
Avatar for Marcelo Somers marcelosomers
234
17k
So, you think you're a good person
Avatar for Per Axbom axbom
PRO
2
1.9k
Claude Code どこまでも/ Claude Code Everywhere
Avatar for nwiizo nwiizo
61
52k
Site-Speed That Sticks
Avatar for Harry Roberts csswizardry
13
1.1k
Darren the Foodie - Storyboard
Avatar for Kevinho.art khoart
PRO
2
2.4k
世界の人気アプリ100個を分析して見えたペイウォール設計の心得
Avatar for Akihiro Kokubo akihiro_kokubo
PRO
66
36k
How to Align SEO within the Product Triangle To Get 
Buy-In & Support - #RIMC
Avatar for Aleyda Solis aleyda
1
1.4k
The Impact of AI in SEO - AI Overviews June 2024 Edition
Avatar for Aleyda Solis aleyda
5
730
Ecommerce SEO: The Keys for Success Now & Beyond - #SERPConf2024
Avatar for Aleyda Solis aleyda
1
1.8k
YesSQL, Process and Tooling at Scale
Avatar for Rocio Delgado rocio
174
15k
Exploring the relationship between traditional SERPs and Gen AI search
Avatar for Ray Grieselhuber raygrieselhuber
PRO
2
3.6k
From π to Pie charts
Avatar for Rasagy Sharma rasagy
0
120

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!