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
3
votes
1 answer

Help with custom jquery easing function

I need a rather atypical jquery easing function. It's basically the opposite of your traditional easeInOut easing because I want the process to go from a fast intro to a slower middle part to a fast outro (you might call it…
ximi
  • 596
  • 5
  • 17
3
votes
1 answer

Ease rotation towards the mouse

The following code rotates the line towards the mouse position using a simple ease function, but the problem is that the atan2() methods works form -PI to PI, making the line to rotate backwards when the angle reach either of the limits, I can make…
Ricardo Sanchez
  • 4,935
  • 11
  • 56
  • 86
3
votes
3 answers

Animated css change (jQuery)

I was trying apply jQuery easing plugin to .css and .animate, but not working, i dont know why, because normally it works. Code example: $('#img').hover(function() { $(this).animate({"border-radius":"5px"}, 0, "easeOutBounce"); }, function() { …
Oliver
  • 341
  • 2
  • 4
  • 21
3
votes
1 answer

How to calculate this constant in various easing functions?

Based on this blog post (japanese, so I used google translate to read that) and other various source, it's seems that the magic constant 1.70158 equal 10% "bounce". The constant appear in various easing functions such as inBack, outBack, ... How did…
Trung0246
  • 689
  • 1
  • 10
  • 21
3
votes
1 answer

D3.js Scales with custom easing-like interpolation

I want to modify an array of numbers and output it to a new range using d3.scale but with custom interpolation function. The interpolation function should be one of the easing functions used in transitions, e.g. easeInOutQuad: easeInOutQuad =…
ALx
  • 611
  • 9
  • 24
3
votes
1 answer

WPF 3.5 Easing Functions for Animations?

I know that there are some easing functions for silverlight and WPF 4.0 coming out. But I really need some for my own project, and I cant seem to find any on the net (not for WPF 4.0) Does anyone know any implementations or perhaps ports from…
Mark
  • 14,820
  • 17
  • 99
  • 159
2
votes
2 answers

Customize jQuery easeOutElastic function

I've got a side scrolling web site under jQuery control, with several pages that are thousands of pixels apart, horizontally. I'm using the easeOutElastic function, but the animation happens way to fast and the elastic bounce needs to be dampened. …
Gordon
  • 79
  • 1
  • 8
2
votes
1 answer

create easing function programmatically C#

I am learning how to create animations with C#. so if I am animating the margin of an object for example then I would use the following method to animate its margin: test(someObject, FrameworkElement.MarginProperty); /// /// animate…
Tono Nam
  • 34,064
  • 78
  • 298
  • 470
2
votes
2 answers

General easing algorithms (Not for sepecific GUI API)

I'm developing a control program for a Quadrocopter (AR Drone) under C# I want to ease the input from keyboards (Which do not have axes like joysticks)... So i need a collection of methods that the user can choose from with different kind of…
Anders
  • 17,306
  • 10
  • 76
  • 144
2
votes
2 answers

css animation timing/easing function only effective the first time

https://jsfiddle.net/elgs/580nhepk/11/ This tiny demo is trying to slide up/down a div with the ease-in timing/easing function. However, it seems the easing effect is only effective the first time it slides down. From the second time onward, the…
user1663023
2
votes
1 answer

How to make custom CSS animation/transition timing function

CSS timing functions always seem to be between 2 points: Even with custom bezier curves, your curve can only go from one point to another. Is it possible to make a custom CSS timing function, where you can make a curve that consists of multiple…
clickbait
  • 2,818
  • 1
  • 25
  • 61
2
votes
1 answer

How to add easing to parallax movement?

I am applying a parallax effect to some images and I would like to apply easing to them. The logic of the parallax is quite simple, I am calculating the distance the image is from the center of the window and expressing this as a factor of 1 whereby…
hamishtaplin
  • 1,679
  • 5
  • 18
  • 27
2
votes
2 answers

WPF Window ScaleTransform animation

I have a Window in WPF that I want to display with ShowDialog and when the window is displayed it should have a scaling animation. I have successfully created the animation and all works great except one thing: When the window approaches it's fully…
vane
  • 2,125
  • 1
  • 21
  • 40
1
vote
1 answer

List of Control Points of Easing Functions

I'm looking for a list or a method to get the x1, x2, y1, y2 (KeySpline equivalent) values of the current Easing Functions (for ex: CircleEase with mode EaseInOut). How I can get them?
Kaan
  • 902
  • 2
  • 16
  • 38
1
vote
1 answer

Can't figure out how to properly use easing function

I really need help to figure out on how to use these easing functions I found on this helpful website: https://spicyyoghurt.com/tools/easing-functions I know what the values that the function needs means, I created a function in one of my classes…
aka_lux
  • 23
  • 5
1
2
3 4 5