vaweGitHub

EasingClassic eases

easeOutBounce

It starts fast and ends slowly. It drops to the end and rebounds with shrinking hops.

easeOutBounce reaches 50% of its travel at 26% of the time and 90% at 35%. Its peak speed is 5.5x the average.

Classic easesfamily: bouncepeak 5.5x

Progress against time0100.51progress50%90%
The dashed line is linear. The dots mark 50% and 90% of the travel.
Velocity, in multiples of average speed01400.51speed, x average
The dashed line is 1x, the speed of linear.

Live demo

The blue box uses the exact linear() string below, in your browser. The grey box is linear.

easeOutBounce
linear

Your system asks for reduced motion, so the boxes rest at the end of the move.

Numbers

50% of travel
26%of the time
90% of travel
35%of the time
After 10% of time
7.56%of the travel is done
Peak speed
5.5xtimes the average
Overshoot
0%stays inside the end
Undershoot
0%never below the start
linear() points
641at a 0.002 tolerance
cubic-bezier
nonecannot express it

Copy the code

css linear() (exact)
animation-timing-function: linear(0, 0, 0.0001, 0.0002, 0.0003, 0.0005, 0.0007, 0.0009, 0.0012, 0.0015, 0.0018, 0.0022, 0.0027, 0.0031, 0.0036, 0.0042, 0.0047, 0.0053, 0.006, 0.0067, 0.0074, 0.0081, 0.0089, 0.0098, 0.0106, 0.0115, 0.0125, 0.0135, 0.0145, 0.0155, 0.0166, 0.0177, 0.0189, 0.0201, 0.0213, 0.0226, 0.0239, 0.0253, 0.0267, 0.0281, 0.0295, 0.031, 0.0326, 0.0341, 0.0357, 0.0374, 0.0391, 0.0408, 0.0425, 0.0443, 0.0462, 0.048, 0.0499, 0.0519, 0.0538, 0.0559, 0.0579, 0.06, 0.0621, 0.0643, 0.0665, 0.0687, 0.071, 0.0733, 0.0756, 0.078, 0.0804, 0.0829, 0.0854, 0.0879, 0.0905, 0.0931, 0.0957, 0.0984, 0.1011, 0.1039, 0.1066, 0.1095, 0.1123, 0.1152, 0.1182, 0.1211, 0.1241, 0.1272, 0.1303, 0.1334, 0.1366, 0.1397, 0.143, 0.1462, 0.1496, 0.1529, 0.1563, 0.1597, 0.1631, 0.1666, 0.1702, 0.1737, 0.1773, 0.181, 0.1846, 0.1883, 0.1921, 0.1959, 0.1997, 0.2036, 0.2075, 0.2114, 0.2154, 0.2194, 0.2234, 0.2275, 0.2316, 0.2358, 0.2399, 0.2442, 0.2484, 0.2527, 0.2571, 0.2615, 0.2659, 0.2703, 0.2748, 0.2793, 0.2839, 0.2885, 0.2931, 0.2978, 0.3025, 0.3072, 0.312, 0.3168, 0.3217, 0.3266, 0.3315, 0.3365, 0.3415, 0.3465, 0.3516, 0.3567, 0.3619, 0.3671, 0.3723, 0.3776, 0.3829, 0.3882, 0.3936, 0.399, 0.4044, 0.4099, 0.4154, 0.421, 0.4266, 0.4322, 0.4379, 0.4436, 0.4493, 0.4551, 0.4609, 0.4668, 0.4727, 0.4786, 0.4845, 0.4905, 0.4966, 0.5027, 0.5088, 0.5149, 0.5211, 0.5273, 0.5336, 0.5399, 0.5462, 0.5526, 0.559, 0.5654, 0.5719, 0.5784, 0.585, 0.5916, 0.5982, 0.6049, 0.6116, 0.6183, 0.6251, 0.6319, 0.6388, 0.6456, 0.6526, 0.6595, 0.6665, 0.6736, 0.6806, 0.6877, 0.6949, 0.7021, 0.7093, 0.7165, 0.7238, 0.7312, 0.7385, 0.7459, 0.7534, 0.7608, 0.7684, 0.7759, 0.7835, 0.7911, 0.7988, 0.8065, 0.8142, 0.822, 0.8298, 0.8377, 0.8455, 0.8535, 0.8614, 0.8694, 0.8774, 0.8855, 0.8936, 0.9018, 0.9099, 0.9182, 0.9264, 0.9347, 0.943, 0.9514, 0.9598, 0.9682, 0.9767, 0.9852, 0.9938, 0.9988, 0.9946, 0.9903, 0.9861, 0.982, 0.9779, 0.9738, 0.9697, 0.9657, 0.9617, 0.9578, 0.9539, 0.95, 0.9462, 0.9424, 0.9387, 0.935, 0.9313, 0.9276, 0.924, 0.9205, 0.9169, 0.9135, 0.91, 0.9066, 0.9032, 0.8999, 0.8965, 0.8933, 0.89, 0.8868, 0.8837, 0.8806, 0.8775, 0.8744, 0.8714, 0.8684, 0.8655, 0.8626, 0.8597, 0.8569, 0.8541, 0.8514, 0.8486, 0.846, 0.8433, 0.8407, 0.8381, 0.8356, 0.8331, 0.8306, 0.8282, 0.8258, 0.8235, 0.8212, 0.8189, 0.8167, 0.8145, 0.8123, 0.8102, 0.8081, 0.806, 0.804, 0.802, 0.8001, 0.7982, 0.7963, 0.7945, 0.7927, 0.7909, 0.7892, 0.7875, 0.7859, 0.7843, 0.7827, 0.7812, 0.7797, 0.7782, 0.7768, 0.7754, 0.774, 0.7727, 0.7715, 0.7702, 0.769, 0.7678, 0.7667, 0.7656, 0.7646, 0.7636, 0.7626, 0.7616, 0.7607, 0.7598, 0.759, 0.7582, 0.7575, 0.7567, 0.756, 0.7554, 0.7548, 0.7542, 0.7537, 0.7532, 0.7527, 0.7523, 0.7519, 0.7515, 0.7512, 0.7509, 0.7507, 0.7505, 0.7503, 0.7502, 0.7501, 0.75, 0.75, 0.75, 0.7501, 0.7502, 0.7503, 0.7504, 0.7506, 0.7509, 0.7512, 0.7515, 0.7518, 0.7522, 0.7526, 0.7531, 0.7536, 0.7541, 0.7547, 0.7553, 0.7559, 0.7566, 0.7573, 0.7581, 0.7589, 0.7597, 0.7606, 0.7615, 0.7624, 0.7634, 0.7644, 0.7654, 0.7665, 0.7676, 0.7688, 0.77, 0.7712, 0.7725, 0.7738, 0.7752, 0.7765, 0.778, 0.7794, 0.7809, 0.7824, 0.784, 0.7856, 0.7872, 0.7889, 0.7906, 0.7924, 0.7942, 0.796, 0.7979, 0.7997, 0.8017, 0.8037, 0.8057, 0.8077, 0.8098, 0.8119, 0.8141, 0.8163, 0.8185, 0.8208, 0.8231, 0.8254, 0.8278, 0.8302, 0.8327, 0.8351, 0.8377, 0.8402, 0.8428, 0.8455, 0.8481, 0.8509, 0.8536, 0.8564, 0.8592, 0.8621, 0.865, 0.8679, 0.8709, 0.8739, 0.8769, 0.88, 0.8831, 0.8863, 0.8895, 0.8927, 0.8959, 0.8992, 0.9026, 0.906, 0.9094, 0.9128, 0.9163, 0.9198, 0.9234, 0.927, 0.9306, 0.9343, 0.938, 0.9417, 0.9455, 0.9493, 0.9532, 0.9571, 0.961, 0.965, 0.969, 0.973, 0.9771, 0.9812, 0.9854, 0.9896, 0.9938, 0.9981, 0.9988, 0.9967, 0.9947, 0.9926, 0.9906, 0.9887, 0.9867, 0.9848, 0.983, 0.9812, 0.9794, 0.9777, 0.976, 0.9743, 0.9727, 0.9711, 0.9695, 0.968, 0.9665, 0.9651, 0.9637, 0.9623, 0.9609, 0.9596, 0.9584, 0.9572, 0.956, 0.9548, 0.9537, 0.9526, 0.9516, 0.9506, 0.9496, 0.9487, 0.9478, 0.947, 0.9461, 0.9454, 0.9446, 0.9439, 0.9432, 0.9426, 0.942, 0.9415, 0.9409, 0.9404, 0.94, 0.9396, 0.9392, 0.9389, 0.9386, 0.9383, 0.9381, 0.9379, 0.9377, 0.9376, 0.9375, 0.9375, 0.9375, 0.9375, 0.9376, 0.9377, 0.9379, 0.938, 0.9382, 0.9385, 0.9388, 0.9391, 0.9395, 0.9399, 0.9403, 0.9408, 0.9413, 0.9419, 0.9424, 0.9431, 0.9437, 0.9444, 0.9452, 0.9459, 0.9467, 0.9476, 0.9485, 0.9494, 0.9503, 0.9513, 0.9524, 0.9534, 0.9545, 0.9557, 0.9568, 0.9581, 0.9593, 0.9606, 0.9619, 0.9633, 0.9647, 0.9661, 0.9676, 0.9691, 0.9706, 0.9722, 0.9738, 0.9755, 0.9772, 0.9789, 0.9807, 0.9825, 0.9843, 0.9862, 0.9881, 0.9901, 0.9921, 0.9941, 0.9962, 0.9983, 0.9998, 0.9988, 0.9977, 0.9968, 0.9958, 0.9949, 0.9941, 0.9932, 0.9924, 0.9917, 0.991, 0.9903, 0.9897, 0.989, 0.9885, 0.9879, 0.9875, 0.987, 0.9866, 0.9862, 0.9858, 0.9855, 0.9853, 0.985, 0.9848, 0.9847, 0.9845, 0.9844, 0.9844, 0.9844, 0.9844, 0.9845, 0.9846, 0.9847, 0.9849, 0.9851, 0.9853, 0.9856, 0.9859, 0.9863, 0.9866, 0.9871, 0.9875, 0.988, 0.9886, 0.9892, 0.9898, 0.9904, 0.9911, 0.9918, 0.9926, 0.9934, 0.9942, 0.9951, 0.996, 0.9969, 0.9979, 0.9989, 1);
cubic-bezier: no usable fit
/* Best single fit, off by up to 23 points of travel: cubic-bezier(0.57, 0.91, 0, 0.7) */

A cubic-bezier() has two control points and makes one smooth S. easeOutBounce changes direction 6 times, so no four numbers draw it. Use the linear() string above.

web animations api
el.animate({ translate: ['0 0', '240px 0'] }, { duration: 600, easing: 'linear(0, 0, 0.0001, 0.0002, 0.0003, 0.0005, 0.0007, 0.0009, 0.0012, 0.0015, 0.0018, 0.0022, 0.0027, 0.0031, 0.0036, 0.0042, 0.0047, 0.0053, 0.006, 0.0067, 0.0074, 0.0081, 0.0089, 0.0098, 0.0106, 0.0115, 0.0125, 0.0135, 0.0145, 0.0155, 0.0166, 0.0177, 0.0189, 0.0201, 0.0213, 0.0226, 0.0239, 0.0253, 0.0267, 0.0281, 0.0295, 0.031, 0.0326, 0.0341, 0.0357, 0.0374, 0.0391, 0.0408, 0.0425, 0.0443, 0.0462, 0.048, 0.0499, 0.0519, 0.0538, 0.0559, 0.0579, 0.06, 0.0621, 0.0643, 0.0665, 0.0687, 0.071, 0.0733, 0.0756, 0.078, 0.0804, 0.0829, 0.0854, 0.0879, 0.0905, 0.0931, 0.0957, 0.0984, 0.1011, 0.1039, 0.1066, 0.1095, 0.1123, 0.1152, 0.1182, 0.1211, 0.1241, 0.1272, 0.1303, 0.1334, 0.1366, 0.1397, 0.143, 0.1462, 0.1496, 0.1529, 0.1563, 0.1597, 0.1631, 0.1666, 0.1702, 0.1737, 0.1773, 0.181, 0.1846, 0.1883, 0.1921, 0.1959, 0.1997, 0.2036, 0.2075, 0.2114, 0.2154, 0.2194, 0.2234, 0.2275, 0.2316, 0.2358, 0.2399, 0.2442, 0.2484, 0.2527, 0.2571, 0.2615, 0.2659, 0.2703, 0.2748, 0.2793, 0.2839, 0.2885, 0.2931, 0.2978, 0.3025, 0.3072, 0.312, 0.3168, 0.3217, 0.3266, 0.3315, 0.3365, 0.3415, 0.3465, 0.3516, 0.3567, 0.3619, 0.3671, 0.3723, 0.3776, 0.3829, 0.3882, 0.3936, 0.399, 0.4044, 0.4099, 0.4154, 0.421, 0.4266, 0.4322, 0.4379, 0.4436, 0.4493, 0.4551, 0.4609, 0.4668, 0.4727, 0.4786, 0.4845, 0.4905, 0.4966, 0.5027, 0.5088, 0.5149, 0.5211, 0.5273, 0.5336, 0.5399, 0.5462, 0.5526, 0.559, 0.5654, 0.5719, 0.5784, 0.585, 0.5916, 0.5982, 0.6049, 0.6116, 0.6183, 0.6251, 0.6319, 0.6388, 0.6456, 0.6526, 0.6595, 0.6665, 0.6736, 0.6806, 0.6877, 0.6949, 0.7021, 0.7093, 0.7165, 0.7238, 0.7312, 0.7385, 0.7459, 0.7534, 0.7608, 0.7684, 0.7759, 0.7835, 0.7911, 0.7988, 0.8065, 0.8142, 0.822, 0.8298, 0.8377, 0.8455, 0.8535, 0.8614, 0.8694, 0.8774, 0.8855, 0.8936, 0.9018, 0.9099, 0.9182, 0.9264, 0.9347, 0.943, 0.9514, 0.9598, 0.9682, 0.9767, 0.9852, 0.9938, 0.9988, 0.9946, 0.9903, 0.9861, 0.982, 0.9779, 0.9738, 0.9697, 0.9657, 0.9617, 0.9578, 0.9539, 0.95, 0.9462, 0.9424, 0.9387, 0.935, 0.9313, 0.9276, 0.924, 0.9205, 0.9169, 0.9135, 0.91, 0.9066, 0.9032, 0.8999, 0.8965, 0.8933, 0.89, 0.8868, 0.8837, 0.8806, 0.8775, 0.8744, 0.8714, 0.8684, 0.8655, 0.8626, 0.8597, 0.8569, 0.8541, 0.8514, 0.8486, 0.846, 0.8433, 0.8407, 0.8381, 0.8356, 0.8331, 0.8306, 0.8282, 0.8258, 0.8235, 0.8212, 0.8189, 0.8167, 0.8145, 0.8123, 0.8102, 0.8081, 0.806, 0.804, 0.802, 0.8001, 0.7982, 0.7963, 0.7945, 0.7927, 0.7909, 0.7892, 0.7875, 0.7859, 0.7843, 0.7827, 0.7812, 0.7797, 0.7782, 0.7768, 0.7754, 0.774, 0.7727, 0.7715, 0.7702, 0.769, 0.7678, 0.7667, 0.7656, 0.7646, 0.7636, 0.7626, 0.7616, 0.7607, 0.7598, 0.759, 0.7582, 0.7575, 0.7567, 0.756, 0.7554, 0.7548, 0.7542, 0.7537, 0.7532, 0.7527, 0.7523, 0.7519, 0.7515, 0.7512, 0.7509, 0.7507, 0.7505, 0.7503, 0.7502, 0.7501, 0.75, 0.75, 0.75, 0.7501, 0.7502, 0.7503, 0.7504, 0.7506, 0.7509, 0.7512, 0.7515, 0.7518, 0.7522, 0.7526, 0.7531, 0.7536, 0.7541, 0.7547, 0.7553, 0.7559, 0.7566, 0.7573, 0.7581, 0.7589, 0.7597, 0.7606, 0.7615, 0.7624, 0.7634, 0.7644, 0.7654, 0.7665, 0.7676, 0.7688, 0.77, 0.7712, 0.7725, 0.7738, 0.7752, 0.7765, 0.778, 0.7794, 0.7809, 0.7824, 0.784, 0.7856, 0.7872, 0.7889, 0.7906, 0.7924, 0.7942, 0.796, 0.7979, 0.7997, 0.8017, 0.8037, 0.8057, 0.8077, 0.8098, 0.8119, 0.8141, 0.8163, 0.8185, 0.8208, 0.8231, 0.8254, 0.8278, 0.8302, 0.8327, 0.8351, 0.8377, 0.8402, 0.8428, 0.8455, 0.8481, 0.8509, 0.8536, 0.8564, 0.8592, 0.8621, 0.865, 0.8679, 0.8709, 0.8739, 0.8769, 0.88, 0.8831, 0.8863, 0.8895, 0.8927, 0.8959, 0.8992, 0.9026, 0.906, 0.9094, 0.9128, 0.9163, 0.9198, 0.9234, 0.927, 0.9306, 0.9343, 0.938, 0.9417, 0.9455, 0.9493, 0.9532, 0.9571, 0.961, 0.965, 0.969, 0.973, 0.9771, 0.9812, 0.9854, 0.9896, 0.9938, 0.9981, 0.9988, 0.9967, 0.9947, 0.9926, 0.9906, 0.9887, 0.9867, 0.9848, 0.983, 0.9812, 0.9794, 0.9777, 0.976, 0.9743, 0.9727, 0.9711, 0.9695, 0.968, 0.9665, 0.9651, 0.9637, 0.9623, 0.9609, 0.9596, 0.9584, 0.9572, 0.956, 0.9548, 0.9537, 0.9526, 0.9516, 0.9506, 0.9496, 0.9487, 0.9478, 0.947, 0.9461, 0.9454, 0.9446, 0.9439, 0.9432, 0.9426, 0.942, 0.9415, 0.9409, 0.9404, 0.94, 0.9396, 0.9392, 0.9389, 0.9386, 0.9383, 0.9381, 0.9379, 0.9377, 0.9376, 0.9375, 0.9375, 0.9375, 0.9375, 0.9376, 0.9377, 0.9379, 0.938, 0.9382, 0.9385, 0.9388, 0.9391, 0.9395, 0.9399, 0.9403, 0.9408, 0.9413, 0.9419, 0.9424, 0.9431, 0.9437, 0.9444, 0.9452, 0.9459, 0.9467, 0.9476, 0.9485, 0.9494, 0.9503, 0.9513, 0.9524, 0.9534, 0.9545, 0.9557, 0.9568, 0.9581, 0.9593, 0.9606, 0.9619, 0.9633, 0.9647, 0.9661, 0.9676, 0.9691, 0.9706, 0.9722, 0.9738, 0.9755, 0.9772, 0.9789, 0.9807, 0.9825, 0.9843, 0.9862, 0.9881, 0.9901, 0.9921, 0.9941, 0.9962, 0.9983, 0.9998, 0.9988, 0.9977, 0.9968, 0.9958, 0.9949, 0.9941, 0.9932, 0.9924, 0.9917, 0.991, 0.9903, 0.9897, 0.989, 0.9885, 0.9879, 0.9875, 0.987, 0.9866, 0.9862, 0.9858, 0.9855, 0.9853, 0.985, 0.9848, 0.9847, 0.9845, 0.9844, 0.9844, 0.9844, 0.9844, 0.9845, 0.9846, 0.9847, 0.9849, 0.9851, 0.9853, 0.9856, 0.9859, 0.9863, 0.9866, 0.9871, 0.9875, 0.988, 0.9886, 0.9892, 0.9898, 0.9904, 0.9911, 0.9918, 0.9926, 0.9934, 0.9942, 0.9951, 0.996, 0.9969, 0.9979, 0.9989, 1)', fill: 'both' });
vawe
import { easeOutBounce } from '../../core/motion/curves.js';
import { curveToLinear } from '../../core/motion/springs.js';

const easing = curveToLinear(easeOutBounce, { tolerance: 0.002 }); // the linear() string above
const x = easeOutBounce(u);                                         // per-frame code, u in 0..1

When to use it, and when to avoid it

Use it for

  • An object that drops into place and rebounds: a ball, a coin, a sticker.

Avoid it for

  • UI that should feel quick: the rebounds hold the final value back for most of the move.

The nearest vawe ease

The closest of the nine vawe After Effects eases is landSoft, an RMS gap of 0.1229 in progress. After Effects and vawe set the shape with two handles, so it can be tuned where a named curve cannot.