Various ease in / ease out through functions

0 favourites
From the Asset Store
Human/Character Base Pixel Art Sprites in various poses (nearly 100 files)
  • I saw this link:

    Easing Equations


    Robert Penner Easing Equations

    and was trying to get the quadratic ease out to work but couldn't figure out a certain section of code marked in bold :

    // quadratic easing out - decelerating to zero velocity

    Math.easeOutQuad = function (t, b, c, d) {

    return -c *(t/=d)*(t-2) + b;


    How do I translate 't/=d' to C2? I'm basically using trying to move a ball across the screen that eases out to zero velocity.

    [Edit] I changed the title from 'Quadratic Easing' to 'Various ease in / ease out through functions'. While I was looking for a single form of ease out, the mighty Yann returned many types of ease ins/outs via functions with an excellent capx example file.

  • t /= d means t = t / d. basically a shortcut for 'set t to t / d'.

    It looks like you copied the function over wrong - the t /= d comes in a separate line on the linked website. I don't see why you put it into the algorithm.

  • Check out easytween plugin too, has lots of easing functions in easy to use form!

  • Try Construct 3

    Develop games in your browser. Powerful, performant & highly capable.

    Try Now Construct 3 users don't see these ads
  • I copied the info from the second link which shows it as being part of the code.

    Strange that it's separate in the first link.

  • Check out easytween plugin too, has lots of easing functions in easy to use form!

    Was trying to avoid using a plugin.

  • A more 'traditional' way to do ease out is to use this formula:

    set x to lerp(self.x,destinationx,dt * factor)

    same for y.

  • Thanks sqiddster

    I was hoping to create a function sheet collection of ease ins and outs based on Robert Penner's codes and to mimmic the sample screen on the first link.

  • demo


    (Though it wouldn't be hard to make a plugin for that)

  • Holy smokes Yann that's beautiful!

  • Just rewrote the thing as in the first link o.o

  • I'm all smiles <img src="smileys/smiley4.gif" border="0" align="middle" /> <img src="smileys/smiley4.gif" border="0" align="middle" /> <img src="smileys/smiley36.gif" border="0" align="middle" />

    This is brilliant! I love the simplicity of your code. Mine looks like a garbage dump compared to yours <img src="smileys/smiley36.gif" border="0" align="middle" />

    Tr?s excellente!

  • Yann would it be too much to implement these last three easings: Elastic, Back and Bounce to your awesome interpolation.capx?

    I made an attempt but was unsuccessful at it.

  • Darn they don't have the same signature as the others... It might break the cleanliness of my capx /o/

    I'll try someday, ring me again in a few days if I didn't pop a new capx.

  • I'll look for code that comes closer to the the one you based it on.

  • Yann, found this for bounce, elastic & back. May be a little clearer than the first.

    bounce, back & elastic

    It starts at line 194.

    Also this link


    as it looks a bit easier to read. Nonetheless for cross referencing.

    It looks a little more involved. Taking a second look, I'm not sure if it could be done since the bounce ease out has multiple 'else's. Am I correct that C2 can only use a single else per condition?

    For those who are curious about easing here's another visual example of the various types.

Jump to:
Active Users
There are 1 visitors browsing this topic (0 users and 1 guests)