Penner easing equations with GFX and CSS3

27th May 2012 — 2 minute read

It looks like you've found one of my older posts 😅 It's possible that some of the information may be out of date (or just plain wrong!) If you've still found the post helpful, but feel like it could use some improvement, let me know on Twitter.

This is going to be a bit of lightning post because it's rather late and I need to get to bed. I spent most of the day either eating dim sum or hanging out at the SF Creative Coders BBQ so I've neglected my blogging duties a bit.

I have something which will hopefully be useful for some folks who are getting into CSS3 animations with the Gfx plugin for jQuery. I've blogged a bit about Gfx before and one of the first things I noticed was the lack of a built in easing library. Coming from the Flash world where TweenLite is king I've grown very accustomed to using Robert Penner's easing equations for great effect. The same equations are used by the jQuery framework to do its animations. Thankfully Matthew Lein was kind enough to convert those over to cubic-beziers for those of us doing CSS3 animations. Since Gfx accepts cubic-beziers I moved the equations from Matthew's tool into an AMD compliant module and put it up on Github. It's very simple so if AMD isn't your thing you can just rip those parts out :D

Example usage looks something like this:

// After requiring the ease module and
// passing it into your View with the
// name 'Ease'

this.$el.gfx(
  {
    translateY: '300px'
  },
  {
    duration: 500,
    easing: Ease.easeInExpo
  }
);

Give it a shot and consider donating to Matthew's project or buying Robert Penner like a million beers!

You should follow me on Twitter here.

Mood: Tired, Tipsy
Sleep: 7
Hunger: 0
Coffee: 0

permalinkFiled under: