Over a million developers have joined DZone.
{{announcement.body}}
{{announcement.title}}

Combining Edge Animate and CSS FilterLab (video)

DZone's Guide to

Combining Edge Animate and CSS FilterLab (video)

· Web Dev Zone ·
Free Resource

Jumpstart your Angular applications with Indigo.Design, a unified platform for visual design, UX prototyping, code generation, and app development.

Adobe Edge Animate Logo

This week after the Create The Web event, the Adobe Developer Evangelists had a team meeting.  Part of the show was doing demos of what we were working on in front of each other.  They were limited to three minutes.  That’s a tough room to impress, so I figured I had to use some of the cutting edge stuff from Create the Web to have impact.

My idea was to combine stuff from several Adobe tools together. So I took Adobe Edge Animate, our HTML Animation tool and combined it with CSS FilterLab, an experimental tool for working with new CSS features like filters and custom filters. I took animation content created with Adobe Edge Animate and applied CSS filters and custom filters to it.

Here’s a short video of the result.


CSS Filters & Adobe Edge Animate from Terry Ryan on Vimeo.

If you like what you see, you can start fooling around with this stuff by getting the following:

Please note if you are fooling around with this: You have to use Chrome Canary and activate “CSS Shaders” in about://flags

 

 

 

Take a look at an Indigo.Design sample application to learn more about how apps are created with design to code software.

Topics:

Opinions expressed by DZone contributors are their own.

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}