0

I've created a div which drops to the bottom of the screen on click. It needs to bounce, so I've used 'easeOutBounce' as the ease effect. It works nicely but the client has requested that it's "more bouncy". I know I can slow the animation down but I don't really want the object to move more slowly, I just want it to bounce more. Less gravity, I suppose.

Here's the jQuery:

$( document ).click(function() {
    $( "div" ).animate({ top: 400 }, { duration: 2000, easing: 'easeOutBounce' });
});

And here's a fiddle: http://jsfiddle.net/NtkNB/1/

I'm really struggling to find documentation on this specific effect and wondered if anyone could suggest either how to configure the current set-up to get the desired effect or alternatively if there are any more advanced animation effects around that would do this which I could plug-in.

Thanks

Dan
  • 5,836
  • 22
  • 86
  • 140
  • 1
    Easiest route would be to grab the source for the `easeOutBounce`, amend it yourself as required, and create a new easing effect. – Rory McCrossan Feb 05 '13 at 12:32
  • Thanks Rory. So I've found this, which is where I think the magic happens: `Bounce: function ( p ) { var pow2, bounce = 4; while ( p < ( ( pow2 = Math.pow( 2, --bounce ) ) - 1 ) / 11 ) {} return 1 / Math.pow( 4, 3 - bounce ) - 7.5625 * Math.pow( ( pow2 * 3 - 2 ) / 22 - p, 2 ); }` However, my maths skills REALLY leave a lot to be desired and I just don't understand this at all. What would relate to 'gravity'? In the meantime I'll trial-and-error it, but that never usually goes too well ;) – Dan Feb 05 '13 at 12:39
  • 2
    Fiddle with the numbers in this [fiddle](http://jsfiddle.net/NtkNB/2/) and see if you figure it out. – adeneo Feb 05 '13 at 12:48
  • Thanks adeneo. Although I'm not sure what the intial variables are, that equation doesn't seem to account for gravity (or I think 'restitution' is the more accurate term to describe what I'm looking to change). – Dan Feb 05 '13 at 13:54

1 Answers1

2

This question is old, but it doesn't appear to have been answered. Happened across it because I had the same issue only opposite (div needed to be 'less bouncy'). The solution I came up with was a quadratic equation to govern each bounce (maybe not the most elegant). Here is a jsfiddle: http://jsfiddle.net/NtkNB/194/ This one is less bouncy than the default jquery animation. To make it more bouncy, you will just have to change the equation, which is kind of a pain.

var thing = (-17.34*x*x)+(14.351*x)-2.944;

I used wolfram to determine: http://www.wolframalpha.com/input/?i=quadratic+through+%28.343%2C0%29%2C%28.4715%2C.1%29%2C+%28.6%2C0%29

bradimus
  • 825
  • 11
  • 25