This document discusses the future of HTML5 motion design. It presents Adobe Edge Animate as a current tool that allows creating animations and interactions using HTML5, CSS, and JavaScript that perform well across devices. Upcoming advances like CSS shaders are mentioned, which will enable more complex visual effects directly in browsers. The document encourages downloading and experimenting with Edge Animate, and offers Adobe's help in advancing HTML5 capabilities for richer creative expression on the web.

1. The Future of
HTML5 Motion
Design
Terry Ryan | Developer Evangelist
Twitter: @tpryan #CreateTheWeb

2. Who are
you?
@tpryan

3. @tpryan

4. NEAR FUTURE
@tpryan

5. @tpryan

6. @tpryan

7. @tpryan

8. ADOBE EDGE ANIMATE @tpryan

9. Adobe Edge Animate
• Motion and interaction design for open
standards
• Build with HTML5,Text JavaScript
CSS,
Text performant
• Precise, productive and
• Output performs well on devices
@tpryan

10. Demo
Coat of Arms
@tpryan

11. Examples
@tpryan

12. Demo
Coat of Arms
Part 2
@tpryan

13. What’s
actually
happening
here? @tpryan

14. @tpryan

15. <div id="box">Yo!</div>
Yo!
Defined by HTML
@tpryan

16. <div id="box">Yo!</div> #box{
height: 200px;
width: 200px;
border: 1px solid #003399;
background-color: #99CCFF;
Yo!
}
Styled by CSS
@tpryan

17. <div id="box">Yo!</div> #box{
height: 200px;
width: 200px;
border: 1px solid #003399;
background-color: #99CCFF;
transform: rotate(30deg)
}
Y o!
Transformed by CSS
@tpryan

18. Y o!
@tpryan

19. Animated by JavaScript
{
id:
"#box",
tween: [ "", "", "top", '300', { fromValue: '0'}],
Y o!
position: 0,
duration: 500 },
@tpryan

20. Why
JavaScript?
@tpryan

21. Edge
Animate
Preview 7
Now
@tpryan

22. Next Steps
• Download Edge
• http://labs.adobe.com/technologies/
edge/
Text
Text
@tpryan

23. LESS NEAR FUTURE
@tpryan

24. CSS SHADERS
@tpryan

25. Demo
Shaders
@tpryan

26. CONCLUSIONS
@tpryan

27. Expression
is harder
@tpryan

28. Adobe
would like
to help
@tpryan

29. Adobe’s Help
Near Future Future
•Adobe Edge Animate •CSS Shaders
-Animation -Make Browsers do more
Text
Text
-HTML/JS/CSS
-Works across
available browsers
@tpryan

30. Follow up?
• Preso will be up at:
- http://slideshare.net/tpryan
• Feel free to contact me
- terry.ryan@adobe.com
Text
- http://terrenceryan.com
- Twitter: @tpryan #CreateTheWeb
@tpryan