Making it move without Flash: CSS3 2D & 3D Animations in the Browser

CSS3 animation brings us many new ways to add interactivity, movement, and creativity to your sites.  While Adobe Flash allowed us to do these things in the past, it does not allow us to do them universally on tablets and phones. Flash also required third party software to create.

With just a modern browser and a text editor, you now can achieve effects that are both impressive and subtle to give your work a modern look and feel.  Even Adobe has embraced these technologies in their recent product suites.

This 60 minute talk will cover the basic mechanics of how to use these techniques, demonstrate how to gracefully degrade to the oldest browsers, and show you creative examples for what can be done.  We'll be covering both 2D and 3D techniques, so bring your Anaglyph 3D glasses if you've got them!

Speaker Bio: Mike Randrup has been intensely geeky about computer graphics and programming since 1993. In addition to a decade of building complex custom web projects for DFW busineses, he had a prior life creating 3D animation for broadcast TV and Playstation game cinematics.  Currently he is a User Interface and .NET Application Engineer on the mobile team at Match.com, and very excited about HTML5's capabilities.

 

 

 

Join or login to comment.

  • Bob T.

    Enjoyed the presentation, venue and meeting people.

    September 19, 2013

  • Ericca C.

    Does anyone have the link to the examples shown last nite; specifically the Google popup book for buying advertising

    September 18, 2013

    • A former member
      A former member

      That's the video, Erik! Thank you for finding and sharing. Can you imagine if the reflow process had to happen during every frame of a CSS3 animation? Glad they wrote the spec the way they did.

      1 · September 17, 2013

  • Bob T.

    Does presentation start at 6:30 or 7pm?

    September 17, 2013

    • Jose O.

      Usually there is a 30 minute or so presentation that starts around 6:30pm, usually WordPress but it all depends on the scheduling. I would try to be there at 6:00pm just to ensure getting a decent seat. I have had to stand or sit on the floor many times.

      September 17, 2013

    • Bob T.

      Ok. Thanks for your reply.

      September 17, 2013

  • Leblanc M.

    currently i'm using animate.css with angularjs - div.ng-enter (fly content in from left ), div.ng-leave (fly content out to right ) on ng-switch . it looks good except at start - both are visible and both take up html space - seems i also need to animate max-height 0 to x - so content isn't pushed down immediately when transitions start. I am looking forward to learn some pro tips today!

    September 17, 2013

Our Sponsors

People in this
Meetup are also in:

Create your own Meetup Group

Get started Learn more
Allison

Meetup has allowed me to meet people I wouldn't have met naturally - they're totally different than me.

Allison, started Women's Adventure Travel

Sign up

Meetup members, Log in

By clicking "Sign up" or "Sign up using Facebook", you confirm that you accept our Terms of Service & Privacy Policy