Talk about Adobe's plans for HTML motion. Talk about the present with Adobe Edge and the future with potential Adobe contributions to Webkit.

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

2. Who are
you?

3. NEAR FUTURE

7. EDGE

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

10. Demo
Webvisions

11. Examples

12. Demo
Webvisions Part
2

13. What’s
actually
happening
here?

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

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

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

18. Y o!

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

20. Why
JavaScript?

21. Edge
Preview 6
Now
Available

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

23. LESS NEAR FUTURE

25. CSS SHADERS

26. Demo
Shaders

27. CONCLUSIONS

28. Expression
is harder

29. Adobe
would like
to help

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

31. 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