Stack Overflow
Stack Overflow

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
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
54
votes
6 answers

Ease-in and ease-out animation formula

Say, if I'm doing the Ease-Out and then Ease-In animation of an object's movement from X1 coordinate to X2 coordinate over S steps at equal time intervals. Can some suggest the formula to calculate this movement's X coordinates?
ahmd0
  • 16,633
  • 33
  • 137
  • 233
40
votes
5 answers

Smooth scrolling easing effect with mouse wheel

I recently came across this website http://www.ascensionlatorre.com/home, and I love the way the mouse wheel scrolling works - the easing is very smooth. I have been searching Google but I can't find anything similar. Does anybody have any…
idbranding
  • 729
  • 3
  • 10
  • 15
21
votes
2 answers

How to create a slowing scroll effect on a scrollbox?

I like to create a smooth slowing scroll effect after panning an image in a scrollbox. Just like panning the map in maps.google.com. I'm not sure what type it is, but exactly same behaviour: when dragging the map around with a fast move, it doesn't…
XBasic3000
  • 3,418
  • 5
  • 46
  • 91
16
votes
3 answers

Smooth character movement in canvas game using keyboard controls

I'm creating a side-scrolling endless space themed game using canvas and JavaScript. I'm controlling a spaceship just by using the up and down arrows and I want to implement some kind of movement easing so that the ship doesn't just stop dead when I…
Joe Taylor
  • 579
  • 1
  • 6
  • 21
16
votes
1 answer

How To Build Custom jQuery Easing/Bounce Animations?

I am familiar with the jQuery animate function and I have also gone through the various jQuery UI easing functions. Unfortunately none of them appear as the same animation effect I'm looking for so is it possible to create your own easing…
Jake
  • 1,285
  • 11
  • 40
  • 119
14
votes
2 answers

Convert CSS cubic bezier easing to Javascript

I'm looking for a way to generate easing functions for my tweens, I need them in Javascript function format, with the standard t, b, c, d parameters. I've found a great tool to generate CSS easing: http://cubic-bezier.com/ but the output is useless…
Drahcir
  • 11,772
  • 24
  • 86
  • 128
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
13
votes
3 answers

JQuery draggable with ease

I would like to achieve the ease effect with Jquery's draggable. But I did not find the option in this plugin. So I was wondering if there are other plugins that have this option - or an easy solution. The effect I am trying to achieve is something…
dandoen
  • 1,647
  • 5
  • 26
  • 44
13
votes
2 answers

Toggle div with easing

I've got a link, when clicking this I want a div to slideIn with easing, and then clicking the link again, it should close the div, with easing... I've looked at jQuery easing plugin, but it doesn't work with jQuery 1.5.1? Any ideas to what I can…
user431619
12
votes
2 answers

How to use easing in the jQuery plugin jQuery.ScrollTo?

The website only mentions the easing option: # easing: Name of the easing equation. But there's no example. How to use this feature?
alexchenco
  • 53,565
  • 76
  • 241
  • 413
11
votes
2 answers

Pure JavaScript animation easing

I've been trying to find a pure JavaScript ease implementation for some hours, but couldn't find any. The ones that came close didn't make any sense. All I could find was bunch of easing functions without implementation. For example, functions like…
akinuri
  • 10,690
  • 10
  • 65
  • 102
10
votes
1 answer

Implement Damping (Inertia) to Panorama Rotation

I am aware of OrbitControls.js having a damping feature, which adds a smooth dragging of panorama, also known as easing. I want to implement the same functionality but without using this library. The reason is that I need to reduce amount of code…
Vad
  • 3,658
  • 8
  • 46
  • 81
9
votes
2 answers

Determine if a snap-scroll element's snap scrolling event is complete

Abstract I am creating an image gallery using a scrollable element. I am using CSS' scroll-snap feature, which allows me to snap onto the elements (images) in the scroller. By binding to the element's scroll event, I am applying various actions when…
Klaas Leussink
  • 2,208
  • 16
  • 23
9
votes
5 answers

Animate/Ease an element to position when other elements disappear

Please take a look at this fiddle: http://jsfiddle.net/dhcyA/ Try clicking on a block. What I want is that when the other elements disapear, the selected block will animate/ease to his giving position instead of just jumping like it does now. Then…
Jonathan
  • 531
  • 7
  • 21
1
2 3
…
25 26