Stack Overflow
Stack Overflow

Questions tagged [easing-functions]

...functions attributed to Robert Penner for moving objects smoothly from one on-screen position to another with the illusion of smooth acceleration, deceleration and mass.

Easing is an important topic for anyone who wants to define a point on a computer screen and move an object smoothly to that point in fixed timeframe. Easing functions involve distance and time. Penner style easing functions are called with a value for the current time elapsed (since the start of easing), the current position of the object to be eased, the difference between the destination point and the current position, and the length of time allotted for the completion of the easing. Easing functions are the most commonly encountered and these are functions attributed to Robert Penner for moving objects smoothly from one on-screen position to another with the illusion of smooth acceleration, deceleration and mass. The original Penner equations can be found here:

Penner Easing

Some interesting websites explore easing functions in more depth:

Gizma's Easing Equations

Upshots.org "Understanding Easing"

Tim Groleau's Easing Function Generator

69 questions
83
votes
4 answers

jQuery easing functions without using a plugin

I'm looking for an online list of custom easing functions that I can use with jQuery. I'm not interested in using a plugin for this, nor am I using jQuery UI. I found one below that does a nice little bounce but I'm looking for a few others just so…
Sparky
  • 98,165
  • 25
  • 199
  • 285
61
votes
5 answers

What is an easing function?

What is meant by easing function in the context of animation. It seems that dojo, jquery, silverlight, flex and other UI systems have the notion of easing function. I could not locate a good explanation of easing functions? Can anyone explain the…
ams
  • 60,316
  • 68
  • 200
  • 288
25
votes
5 answers

jQuery easing function — variables' comprehension

How does the easing function for jQuery work? Take for example: easeInQuad = function (x, t, b, c, d) { return c*(t/=d)*t + b; }; How does that work? What does each parameter hold? How would I implement some dumb easing for an animation? Also…
qwertymk
  • 34,200
  • 28
  • 121
  • 184
16
votes
3 answers

jQuery elastic easing equation

How can I modify this jQuery easing function to produce a less exaggerated bounce? $.easing.easeOutElasticSingleBounce = function (x, t, b, c, d) { var s=1.70158;var p=0;var a=c; if (t==0) return b; if ((t/=d)==1) return b+c; if (!p)…
Devon
  • 5,786
  • 5
  • 38
  • 46
14
votes
5 answers

How to apply easing animation function on view in Android

I want to apply a translate animation on an Android view (button) using a custom interpolator where the easing function is: public static float easeOut(float t,float b , float c, float d) { if ((t/=d) < (1/2.75f)) { return c*(7.5625f*t*t)…
Adham
  • 63,550
  • 98
  • 229
  • 344
9
votes
4 answers

Is it possible to specify a custom timing functions for CSS transitions?

I use CSS transitions pretty frequently now but find it limiting to only have access to ease-in, ease-out etc. The bezier-curve option appears to allow the most control but even this does not allow you to specify an actual easing equation that would…
Jim Jeffers
  • 17,572
  • 4
  • 41
  • 49
8
votes
4 answers

Jquery ScrollTo Easing

Can´t apply an easing method to Jquery ScrollTo: $("#scroller").scrollTo(target,1000,{axis:'x',easing:'linear'}); This doesn´t ease anything... Im starting to use jquery now (been using prototype for long) so this is surely my mistake. Do I need an…
JoaoPedro
  • 511
  • 1
  • 6
  • 20
8
votes
1 answer

How to implement JQuery easing into this window scroll movement function?

With this code I've been able to capture the mousewheel movement and apply it to the horizontal scroll bars instead of the vertical default. $('html').bind('mousewheel', function(event, delta) { window.parent.scrollBy(-120 * delta, 0); return…
Mohammad
  • 7,344
  • 15
  • 48
  • 76
7
votes
1 answer

Implementing EaseIn, EaseOut functions in Delphi

I am trying to implement fluid movement of tabs in TChromeTabs. I can see the easing formulas here, but I am no mathematician and have no idea how to translate this into code. My attempts so far have got me nowhere. Are there Delphi implementations…
norgepaul
  • 6,013
  • 4
  • 43
  • 76
6
votes
3 answers

Calculate initial velocity to move a set distance with inertia

I want to move something a set distance. However in my system there is inertia/drag/negative accelaration. I'm using a simple calculation like this for it: v = oldV + ((targetV - oldV) * inertia) Applying that over a number of frames makes the…
MachineElf
  • 1,231
  • 2
  • 15
  • 28
5
votes
1 answer

Simulate gravitational pull on a body in orbit

I'm trying to simulate gravitational pull/acceleration in the following animation. earth's angular velocity should increase as it gets closer to sol and decrease as it gets far. I think I'll need an easing function to modify the…
akinuri
  • 10,690
  • 10
  • 65
  • 102
5
votes
1 answer

Recreate bounce easing with spring easing

Looking through velocity.js changelog I read: ... 2) The back, bounce, and elastic easings have been removed. Use spring physics instead. ... I was wondering if there is any simple way to recreate the easeOutBounce effect that is available with…
easwee
  • 15,757
  • 24
  • 60
  • 83
4
votes
2 answers

How can I compute the duration for a UIViewAnimationCurveEaseOut animation with a known starting velocity and distance?

I'm animating a view between two points using UIViewAnimationCurveLinear, so I know the velocity of this animation. In certain circumstances I want to append a UIViewAnimationCurveEaseOut to make the view slow to a stop. To make this effect…
cduhn
  • 17,818
  • 4
  • 49
  • 65
4
votes
2 answers

Reimplement UIView block based animation methods with custom easing curve

The lack of custom easing curves in UIView's block based animation methods leads to Core Animation if more advanced curves are needed. A way of doing this with a Category on CAKeyframeAnimation is discussed in How to create custom easing function…
andersfrank
  • 86
  • 6
3
votes
2 answers

Help formulating a cubic easing equation

I have the following piece of code int steps = 10; for (int i = 0; i <= steps; i++) { float t = i / float(steps); console.log( "t " + t ); } That out puts numbers in a linear fashion like this { 0, 0.1, 0.2, ..., 0.9, 1.0 } I would like…
Ricardo Sanchez
  • 4,935
  • 11
  • 56
  • 86
1
2 3 4 5