After Effects: Penner Easing Functions

Introduction

The last article I went through how I like to use the linear and ease functions, linking parameters to time, in order to create motion. More often than not, I use the ease function rather than linear, as the easing motion looks more natural.

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

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.

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. It also 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.

Creating a .jsx file for After Effects

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 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 in your chosen parameter like 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 it away can prevent it from being accidently deleted if you 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.

Adjusting For The Differences Between Default Ease And Penner's Easing Functions

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

You may also notice that Penner's opening arguement of "time" is harder to adjust than the "t" in the default easing function. This is because its arguements work differently, not containing an in and out point, but rather a "duration" arguement. Fortunately, we can still do this by creating a variable containing a linear function. This will allow us to set a point in time for Penner's functions, rather than having to trigger the animation at the start of the layer.

So, for example, our full expression code could look something like this:

const penner = footage("file.jsx").sourceData.getFunctions();

var aniDuration = 1;
var aniStart = 1;
var aniTime = linear(time, aniStart, aniStart+aniDuration, 0, aniDuration);

penner.easeInQuad(aniTime, 0, 180, aniDuration);

Imagine this expression is pasted into the rotation parameter of a layer.

First, we call our functions written inside of our .jsx file. Next, we create the variables aniDuration, the duration of our animation, aniStart, the place in time we want our animation to start, and aniTime, which uses the linear function to count from 0 to our aniDuration length, between our aniStart, and aniStart plus our aniDuration. So in this example, the linear expression lasts for 1 second, starting at 1 second, and ending at 2 seconds. This allows us to move the start time of Penner's functions. Lastly, we call one of our saved Penner easing functions. We reference aniTime as our time arguement, then set our beginning value of 0, our change in value of 180, and our duration to aniDuration so it matches our linear function (although occasionally you may want to add a little extra time for the animation to settle, depending on which Penner function you are using). This will cause the layer to rotate 180 degrees using Penner's easeInQuad function, which is slightly smother than the easing on the default ease function.

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

Do you have any questions? Feel free to leave them in the comments.

Credits

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.