• Adobe After Effects Expressions

  Using Penner ease functions

  Posted by Chris Meadmore on February 25, 2019 at 7:45 pm

  I’ve started digging deeper into expression and assumed (wrongly) that controlling the value of an ease would be a simple function available in AE. After browsing the forum I’ve found that’s not the case!

  Can someone please tell me how I might implement the top code into the bottom code so I can see how it’s done?

  May be a stupid question so I’m sorry. It’s not the easiest thing to understand with little knowledge of Java. Thanks!

  Math.easeInOutExpo = function (t, b, c, d) {
t /= d/2;
if (t < 1) return c/2 * Math.pow( 2, 10 * (t - 1) ) + b;
t--;
return c/2 * ( -Math.pow( 2, -10 * t) + 2 ) + b;
};


  function easeInOutCubic(t) { return t<.5 ? 4*t*t*t : (t-1)*(2*t-2)*(2*t-2)+1 };

  startVal = 100;
  xendVal = 450;
  yendVal = 800;
  startDur = 1;
  endDur = 1.8;

  t = linear(time,startDur,endDur,0,1);
  e = easeInOutCubic(t);
  y = linear(e,0,1,startVal,yendVal);
  x = linear(e,0,1,startVal,xendVal);

  [x,y];

  Alex Printz replied 7 years, 6 months ago 2 Members · 3 Replies
• 3 Replies

• 

  Alex Printz

  February 25, 2019 at 8:12 pm

  I think it should look like this:

  /* Legend:
t: current time
b: beginning value
c: change In value
d: duration
*/

  function easeInOutExpo (t, b, c, d) {
  t /= d/2;
  if (t < 1) return c/2 * Math.pow( 2, 10 * (t - 1) ) + b;
  t--;
  return c/2 * ( -Math.pow( 2, -10 * t) + 2 ) + b;
  };

  var startVal = 100;
  var xendVal = 450;
  var yendVal = 800;
  var startDur = 1;
  var endDur = 1.8;

  t = time - startDur;
  d = endDur - startDur;

  y = easeInOutExpo(t,startVal, yendVal - startVal, d);
  x = easeInOutExpo (t,startVal, xendVal - startVal, d);

  [x,y];

  Alex Printz
  Mograph Designer
• 

  Chris Meadmore

  February 26, 2019 at 8:12 am

  That worked perfectly, thanks! Is there any chance you can explain in a little detail what you did?

  I’m trying to test out other penner functions but still struggling to get them working with limited understanding.
• 

  Alex Printz

  February 26, 2019 at 3:35 pm

  Yeah sure;

  first I changed the notation of the expression into after effects (I think I mostly removed the .Math) and placed it above the final declaration of the code. That’s a new feature requirement of the new javascript engine (vs. old extendScript).

  I then refamilarized myself with the penner functions about how they are written; they require the duration and the change in values, rather than the input/outputs like after effects’ built-in interpolation functions.

  So I simply created the t variable (current time, minus the initial time, so that the transition will start at 0) and figured out the duration (end time minus the start time).

  Then it was just a matter of feeding the correct inputs into the function using the notation the function called for; I also had to figure out c for each dimensions (x and y) separately since they’re being calculated differently, and since we need to know the change rather than the final value, subtracted the start value from both of those separately.

  Finally, recombined x and y into an array.

  Alex Printz
  Mograph Designer

Reply to this Discussion! Login or Sign Up