Penner Easing Functions In After Effects

I find myself using the ease expression at lot.

ease(t, tMin, tMax, value1, value2)

ECAbrams has a great tutorial on it here. In short, you can use the ease expression to remap values, like time, in order to create movement. As the name suggests, the expression eases from "value1" to "value2", between "tMin" and "tMax". So if you typed this into your position parameter:

x = ease(time, 0, 2, 500, 700);
[x, value[1]]

Your x co-ordinate will animate from 500 to 700, between 0-2 seconds on your timeline, easing in and out.

But sometimes the default ease isn't what I'm looking for, and unlike keyframes, we can't just play around in the graph editor when it comes to expressions. Which means a lot of math in order to make the easing more unique. Fortunately, we have Penner's easing functions. The link is a great resource by Robert Penner, who has done all the heavy lifting to make some really varied easing options. The link provides many options for using the functions in various code languages.

If, like me, you want to look at the code and tweak it for your needs in After Effects, then you probably want to head over to the Javascript link. Here you'll see the functions layed out clearly. From there, you can almost copy/paste straight into After Effects, but you'll need to make some slight format changes. For instance, the code written on GitHub is like this:

easeInQuad: function (x, t, b, c, d) {
return c(t/=d)t + b;
}

But in order to make it work in After Effects, you need to swap the position of "function" and the function name. I also went ahead and removed "x" as it's not necessary when applied to a parameter in After Effects. So when you're done the altered code looks like this:

function easeInQuad(t, b, c, d) {
return c(t/=d)t + b;
}

As explained on the website, t = current time, b = beginning value, c = change in value, and d = duration.

Going a step further, I wanted to create my own .jsx file to store all the easing functions, so I didn't have to type them out over and over for different projects. I did this with a little help from using Motion Developer's tools. By looking at how they created their aeFunctions jsx file, I was able to make my own callable functions in After Effects, by typing the following into ExtendScript Toolkit CC:

{
 getFunctions(time = thisLayer.time) {
  //Inset function code here
 }
 return {
  //Insert name of functions on each line separated by commas:
  //function1,
  //function2,
  //etc,
  };
 },
}

Once the file is created, you can import it into your project. Then, should you wish to use one of your saved functions, you simply need to pull the data from the jsx file. You can do so by starting off your expression code in your chosen parameter with this:

const {ref name} = footage("file.jsx").sourceData.getFunctions();

where {ref name} is whatever your prefered label is (I usually go with "penner"), and "file.jsx" is the file with your functions saved. The file doesn't need to be in your timeline for this to work, as the expression is drawing from the project panel, but putting the jsx file in your timeline and shy guy-ing away can prevent it from being accidently deleted if your collect the project later.

Then when you want to use a function, you can do so like this:

{ref name}.{name of function}();

Motion developer also explain how it works (and links to their free collection of functions) here.

And that's it! Nicer easing for your after effects expression-driven animations.

The only thing to note is Penner's functions work slightly differently to the default ease, which asks you to imput 4 arguements (tMin, tMax, value1, value2). Penner's easing only asks for 3 (beginning value, change in value, duration). So bear this is mind when imputting your values.

Please check out Motion Developer and Robert Penner's resources, and show them support if their work is helpful to you.

Link to Jquery easing BSD licence can be found here.