The Future of HTML5 Motion Design

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

description

A presentation on Adobe Edge and CSS shaders.

Transcript of The Future of HTML5 Motion Design

Page 1: The Future of HTML5 Motion Design

The Future of HTML5 Motion DesignTerry Ryan | Developer EvangelistTwitter: @tpryan

Page 2: The Future of HTML5 Motion Design

Who Are You?

Page 3: The Future of HTML5 Motion Design

ANIMATION

Page 4: The Future of HTML5 Motion Design

HTML JS CSS animation is very capable

Page 5: The Future of HTML5 Motion Design

Prove it!

Page 6: The Future of HTML5 Motion Design
Page 7: The Future of HTML5 Motion Design

ADOBE EDGEIntroducing

Page 8: The Future of HTML5 Motion Design

Adobe Edge

• Motion and interaction design for open standards

• Build with HTML5, CSS, JavaScript

• Precise, productive and performant

• Output performs well on devices

Page 9: The Future of HTML5 Motion Design

Demo

Punchy

Page 10: The Future of HTML5 Motion Design

Examples

Page 11: The Future of HTML5 Motion Design

Preview 4 Released Yesterday

Page 12: The Future of HTML5 Motion Design

Preview 4Features

• Symbols– Timelines within

timelines

• Clipping– Revealing pieces

of complete animation

• Font Face– Ability to pull in

web fonts

Page 13: The Future of HTML5 Motion Design

Demo

Punchy

Page 14: The Future of HTML5 Motion Design

• Get Edge– http://labs.adobe.com/technologies/

edge/

Next Steps with Edge

Page 15: The Future of HTML5 Motion Design

CSS SHADERS

Page 16: The Future of HTML5 Motion Design
Page 17: The Future of HTML5 Motion Design

What if browsers could do more?

Page 18: The Future of HTML5 Motion Design

Enter CSS Shaders

Page 19: The Future of HTML5 Motion Design

Cinematic effects for the

web

Page 20: The Future of HTML5 Motion Design

Examples

Page 21: The Future of HTML5 Motion Design

• Coming to browsers soon.

Next Steps with CSS Shaders

Page 22: The Future of HTML5 Motion Design

CONCLUSIONS

Page 23: The Future of HTML5 Motion Design

Web creators live in three

worlds

Page 24: The Future of HTML5 Motion Design

The PastThe Present The Future

Page 25: The Future of HTML5 Motion Design

Adobe wants to help

(Near) Present• Adobe Edge

– Animation– HTML/JS/CSS– Works across

available browsers

Future• CSS Shaders

– Make browsers do more

Page 26: The Future of HTML5 Motion Design

Follow up?

• Preso will be up at – http://slideshare.net/tpryan

• Feel free to contact me– [email protected]– http://terrenceryan.com– Twitter: @tpryan