Questions tagged [easing]

a set of algorithms for graceful motion over time with acceleration and deceleration.

These were developed by, discovered by, or popularized by and released by Robert Penner under the BSD license and implemented in a very wide variety of languages and frameworks including CSS3 Transitions, jQuery, WPF and Silverlight.

383 questions
2
votes
0 answers

jQuery UI Easing doesn't work inside jQuery plugin

So, I'm creating a plugin to show some modals, I'm creating animations to the modal open and close action, when I Tried to insert some jQuery UI easing the animations just don't happen... Here is my code, what do you think: $.fn.modal = function(a,…
Caio Kawasaki
  • 2,894
  • 6
  • 33
  • 69
2
votes
0 answers

Image scale transform jumps (chrome blink engine only)

Please move cursor from the center of image to whitespace and back. Image jumps to the max scale without animation. Video .wrapper { margin : 120px; } .wrapper img { display : block; width : 400px; -webkit-transition:…
puchu
  • 3,294
  • 6
  • 38
  • 62
2
votes
1 answer

How to ease between two y-coordinates?

For a school assignment we have to make a graph in Javascript. The teacher would like to see some animated graphs. So I build a graph about my Tweets in one week, but cannot find how to ease between two y-coordinates. You can find my project here…
Jonas Leupe
  • 31
  • 1
  • 3
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
1 answer

TypeError: n.easing[this.easing] is not a function jQuery not working

I'm developing this website: http://www.siraryf.com and there is a problem in the responsive version for mobile phones. jQuery works good in normal version but for mobile phones stop working and then TypeError: n.easing[this.easing] is not a…
2
votes
3 answers

Interpolating a value between two values

I'm looking for a function that interpolates a value between two values following a soft curve. Here's an example: float xLerp(float mMin, float mMax, float mFactor) { ... } mFactor should be between 1 and 0. How can I create a function similar to…
Vittorio Romeo
  • 90,666
  • 33
  • 258
  • 416
2
votes
1 answer

C++ - Trouble understanding easeInOutSine

I am trying to understand this easing formula: float easeInOutSine(float t, float b, float c, float d) { return -c/2 * (cos(M_PI*t/d) - 1) + b; }; Here are what the variables equal: t: current time b: start value c: change in value d:…
user923
  • 559
  • 4
  • 12
2
votes
1 answer

Easing a Vector3 to a new position

Not sure if libgdx offers this functionality, so it might be a maths question. I have various 3D camera coordinates stored as a Vector3, and I want to move the camera from one to the other. Vector3 CAM_POSITION_DEFAULT = new Vector3(0f, 1f,…
Jammo
  • 1,838
  • 4
  • 25
  • 39
2
votes
4 answers

What does (t/=d/2) mean in this code?

In the jquery.easing plugin there are many methods like this one: easeInOutQuint: function (x, t, b, c, d) { if ((t/=d/2) < 1) return c/2*t*t*t*t*t + b; return c/2*((t-=2)*t*t*t*t + 2) + b; } (t/=d/2) is severely pissing off jshint!…
Will
  • 4,075
  • 1
  • 17
  • 28
2
votes
1 answer

jQuery easing - flipping image on hover

If you take a look at this fiddle: http://jsfiddle.net/5PH8p/ Then you can see if you hover over the blank image, it will flip over and display some text. The problem is though, when you hover also over the paragraph the image will flip. My…
SmalliSax
  • 342
  • 3
  • 6
  • 24
2
votes
3 answers

jQuery div drop down on a click event

I was looking to achieve the same effect as on the website http://www.wpnukes.com/demo/html/welcare/ Please notice the contact link on the top right of the screen next to sign in link, when you click on Contact a div drop down with jerks, How can I…
Chander Dhingra
  • 61
  • 2
  • 2
  • 11
2
votes
1 answer

Add easing to custom animation function

i created a simple function, which animates values based on the current scroll position. function scrollTransition(startValue, endValue, initScroll, distance, scrollTop) { var min = Math.min, max = Math.max, sum; …
mrksbnch
  • 1,792
  • 2
  • 28
  • 46
2
votes
2 answers

Easing not working with toggleClass() or addClass()

I have a function to show and hide a utility bar on a page. I want to animate it. It's not animating. The class "flag" is empty. The "min" class simply changes the background image and the height and absolute positions of the utility bar. What am I…
2
votes
3 answers

jQuery easing of an image not working

For whatever reason I cannot get the easing to work on some images. The browser just loads them instantly without easing. What I'm trying to accomplish is so that the side images slide from the bottom to it's position and the middle image slides…
2
votes
2 answers

Most efficient way of easing in dozens of div's with CSS3

I have ten div's added every second, each with an image, and I want them to slide in from the left. This is too intensive work for javascript, and also too much for keyframing. So what would be the most efficient (CPU/memory wise, also…
knutole
  • 1,709
  • 2
  • 22
  • 41