Presented at FITC Toronto 2017 More info at http://fitc.ca/event/to17/

1. @MOTIONOGRAPHER
T H E F U T U R E O F M O T I O N D E S I G N
A 100% accurate, absolutely infallible forecast for the next decade from
the industry’s incomparably brilliant yet surprisingly humble Justin Cone.

2. JUSTIN CONE
deepthoughts,circa1988

3. A LO O K A H E A D
1. Wait, what is motion design?
2. Behold, the predictions!
3. Well… now what?

4. W H AT I S M OT I O N D E S I G N ?

5. motiondesign/motiongraphics
motiongraphicdesign
=
graphicdesigninmotion
=

6. G E N E A LO GY O F M OT I O N D E S I G N
motion design
storytellingproblem-solving
filmmakingvisual communication
animationgraphic design

7. FASCINATING.
TELL ME AGAIN HOW YOU CREATE
SUCH ARBITRARY DISTINCTIONS.

8. DOCTORSTRANGE/SAROFSKY

9. NBCELECTIONGRAPHICS/BLOCK&TACKLE

10. 2016EUROCUP/IMAGINARYFORCES(DIR.BYJEREMYCOX)

11. MAILCHIMP+FACEBOOK /GIANTANT

12. PANTHELLAMINI/FRAME

13. DON’TBLINK/GRETEL

14. THEMEDIUMISTHEMESSAGE/DANSAVAGE

15. ANAFLIGHTCONNECTIONS/FIRSTBORN

16. UBERREDESIGN/UBER

17. MATERIALMOTION/GOOGLEDESIGN

18. UXINMOTION/ISARRAWILLENSKOMER

19. ARCHITECTURALPROJECTS/UNIVERSALEVERYTHING

20. INORI“PRAYER” /NOBUMICHIASAI

21. TOYOTACONCEPT-I

22. – J U ST I N C O N E
“Motiondesignistothe21stcentury
whatgraphicdesignwastothe20th century.”

23. T H E P R E D I CT I O N S

24. W H Y M A K E P R E D I C T I O N S ?
1. To focus a critical lens on current practice
2. To identify and/or get “unstuck” from creative ruts
3. To have fun

25. P R E D I C T I O N N O . 1
CGwilleattheworld.

26. W H Y C G ’ S A P P E T I T E I S G R O W I N G …
1. Hardware: The rise of the GPU
2. Software: Near-real-time rendering
3. Market forces: Growing demand for immersive experiences

27. GTXTITANZGRAPHICSCARD
1.HARDWARE

28. OCTANE+CINEMA4D/RAMIZSHEIKH
2.SOFTWARE

29. INDUSTRIALLIGHT&MAGIC(1982) GUYTOURGEMAN(2016)
2.SOFTWARE

30. 3.MARKETFORCES
ELEMENTS/DESIGNI/O

31. “Computersdon'tcreatecomputeranimationany
morethanapencilcreatespencilanimation.
Whatcreatescomputeranimationistheartist.”
– J O H N LA S S E T E R
C H I E F C R E AT I V E O F F I C E R O F P I XA R A N D WA LT D I S N E Y A N I M AT I O N ST U D I O S

32. NIKEID/MANVSMACHINE

33. TERRAFORM-PLANET/ALEXDINGFELDER+JOSHUAHARVEY

34. P R E D I C T I O N N O . 2
Analoguewillmakesenseagain.

35. SEEDMATTERS/BUCK

36. DOLE“THEPROCESS”/BLINK(NOAHHARRIS)

37. SEEDMATTERS/BUCK

38. DOLE“THEPROCESS”/BLINK(NOAHHARRIS)

40. JUSTIN’S MOM
somewhereinnature,whichI’veheardisgreat

41. THIS IS A BLANK SLIDE. ENJOY.

42. Analogue—asatermandanaesthetic—has
lostitsmeaning.

43. IMPRESSION:SUNRISE/CLAUDEMONET(1873)

44. ANOTHER BLANK SLIDE. GOOD TIMES.

45. P R E D I C T I O N N O . 3
Thewebwillmove(again).

46. 2ADVANCED.COM(2004)

47. PHOTOBYFARISALGOSAIBI

48. YEP. ANOTHER BLANK SLIDE.

49. A T I N Y S A M P L I N G O F A N I M AT I O N L I B R A R I E S
• Anima.js
• Animate.css
• Bounce.js
• Choreographer.js
• csshake
• DynCSS
• Effeckt.css
• GSAP
• Hover.css
• Loaders.css
• magic
• mo,js
• Paper.js
• Pixi JS
• Particles.js
• Rekapi
• Rocket
• Saffron
• Snap.svg
• three.js
• uilang
• Velocity.js
• vivus.js
• WOW.js

50. EDGEANIMATE HYPE FRAMER PRINCIPLE

52. GITHUB.COM/BODYMOVIN/BODYMOVIN

53. GITHUB.COM/FACEBOOKINCUBATOR/KEYFRAMES SQUALL.NO

54. VIKINGS:AWORLDREVEALED/JAM3

55. NORTH2PORTFOLIO

56. P R E D I C T I O N N O . 4
Motiondesignwillbethevisualmarkup
languagefor(augmented)reality.

57. PA U L M I LG R A M ’ S R E A L I TY-V I RT U A L I TY C O N T I N U U M
SOURCE A Taxonomy of Mixed Reality Visual Displays, P Milgram, F Kishino, IEICE Transactions on Information and Systems, 1994
realenvironment augmentedreality virtualenvironmentaugmentedvirtuality

58. realenvironment augmentedreality virtualenvironmentaugmentedvirtuality
(optional,butsometimesnecessary)

59. realenvironment augmentedreality virtualenvironmentaugmentedvirtuality
First Contact / Oculus Rift + Touch demo

60. realenvironment augmentedreality virtualenvironmentaugmentedvirtuality
Oculus Rift (Facebook) HTC Vive (Valve) Playstation VR

61. realenvironment augmentedreality virtualenvironmentaugmentedvirtuality
Pretty sure that’s a bicycle helmet…

62. PA U L M I LG R A M ’ S R E A L I TY-V I RT U A L I TY C O N T I N U U M
realenvironment augmentedreality virtualenvironmentaugmentedvirtuality
mixed reality
🤔

63. realenvironment augmentedreality virtualenvironment
mixed reality
+
PA U L M I LG R A M ’ S R E A L I TY-V I RT U A L I TY C O N T I N U U M

64. Psyop AR demo, 2013 Generic AR concept image from Shutterstock
realenvironment augmentedreality virtualenvironment
mixed reality
+

65. Microsoft HoloLens demo
realenvironment augmentedreality virtualenvironment
mixed reality
+

66. realenvironment augmentedreality virtualenvironment
mixed reality
+
Meta Daqri

67. 🙄Magic Leap demo

68. realenvironment augmentedreality virtualenvironment
mixed reality
+

69. Formotiondesign,
theclearestpathforward
leadsthroughaugmentedreality.

70. C I N E M AT I C V S I N T E R A CT I V E
realenvironment augmentedreality virtualenvironment
mixed reality
+

71. V I RT U A L R E A L I TY
Goosebumps VR / MPC
C I N E M AT I C

72. V I RT U A L R E A L I TY
Job Simulator / Owlchemy Labs
I N T E R A CT I V E

73. “Viveisthemostexpensivedeviceonthemarket.It’s
barelycapableofdoingamarginallyadequatejobof
deliveringaVRexperience.
Wehavetofigureoutallsortsofotherproblemsbefore
eventhehardwarequestiongetsanswered,muchless
what’sgoingtobethecompellingcontent.”
– G A B E N E W E L L
C O - F O U N D E R A N D P R E S I D E N T O F VA LV E C O R P O R AT I O N
SOURCE Valve: Only 30 SteamVR Apps Have Made $250,000+ (and other truths of the young VR market), Road To VR, February 21, 2017

74. SANKHARA/TENDRIL

75. Mark Zuckerberg’s keynote centered on advances in augmented reality
realenvironment augmentedreality virtualenvironment
mixed reality
+

76. FACEBOOKSTREETARTDEMO

77. AUGMENTEDREALITYFASHIONSHOW/SUPERBRIGHT

78. VIZLIBERO-AMERICANFOOTBALL

79. AUGMENTEDREALITYSPORTSEXPERIENCE/ABT

81. W H AT N OW ?

84. AT A P E R S O N A L L E V E L
1. Be honest and play to your strengths.

86. I N T E R E ST- S K I L LS M A P
WEB
DEVELOPMENT ENTREPRENEURSHIP
BACK-END
DEVELOPMENT
FRONT-END
DEVELOPMENT
MARKETING
WRITING
MOTION
DESIGN
GRAPHIC
DESIGN
AUTOMATION
NODE.JS
PHP
REACT
MONGO
DB
BLOGGING
DESIGN
HISTORY
SKILLS/CONFIDENCE
HIGH
MEDIUM
LOW
PUBLIC
SPEAKING

87. AT A P E R S O N A L L E V E L
1. Be honest and play to your strengths.
2. Start small.

88. AT A P E R S O N A L L E V E L
1. Be honest and play to your strengths.
2. Start small.
3. No, smaller.

89. AT A P E R S O N A L L E V E L
1. Be honest and play to your strengths.
2. Start small.
3. No, smaller.
4. Always be learning.

90. student>master
understanding>commanding

91. F O R B U S I N E S S
1. Nimbleness is inversely proportional to size.

92. team size
nimbleness

93. F O R B U S I N E S S
1. Nimbleness is inversely proportional to size.
2. Understand what “investing in change” means.

94. I N V E ST I N G I N C H A N G E
technology people
+ failures
+
short-term financial loss
=new capabilities/offerings
+ higher retention
+

95. F O R B U S I N E S S
1. Nimbleness is inversely proportional to size.
2. Understand what “investing in change” means.
3. Play to your strengths — and focus.

96. I N T E R E ST- S K I L LS M A P
WEB
DEVELOPMENT ENTREPRENEURSHIP
BACK-END
DEVELOPMENT
FRONT-END
DEVELOPMENT
MARKETING
WRITING
MOTION
DESIGN
GRAPHIC
DESIGN
AUTOMATION
NODE.JS
PHP
REACT
MONGO
DB
BLOGGING
DESIGN
HISTORY
SKILLS/CONFIDENCE
HIGH
MEDIUM
LOW
PUBLIC
SPEAKING

97. –J O H N C A R M A C K , CTO O F O C U L U S V R
“Focusisamatterofdeciding
whatthingsyou'renotgoingtodo.”

99. bye. orwhatever.