easeInCirc

It starts slowly and ends fast. A geometric curve: it starts or stops almost vertically, like a wall.

easeInCirc reaches 50% of its travel at 87% of the time and 90% at 100%. Its peak speed is over 20x (it ends vertically) the average.

Classic easesfamily: circpeak over 20x

Progress against time

The dashed line is linear. The dots mark 50% and 90% of the travel.

Velocity, in multiples of average speed

The dashed line is 1x, the speed of linear. The chart stops at 12x.

Live demo

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

easeInCirc

linear

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

Numbers

50% of travel: 87%of the time
90% of travel: 100%of the time
After 10% of time: 0.5%of the travel is done
Peak speed: over 20xit ends vertically
Overshoot: 0%stays inside the end
Undershoot: 0%never below the start
linear() points: 1281at a 0.002 tolerance
cubic-bezier: exactworst gap 0.2 points

Copy the code

css linear() (exact)

animation-timing-function: linear(0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0.0001, 0.0001, 0.0001, 0.0001, 0.0001, 0.0001, 0.0001, 0.0001, 0.0001, 0.0001, 0.0002, 0.0002, 0.0002, 0.0002, 0.0002, 0.0002, 0.0003, 0.0003, 0.0003, 0.0003, 0.0003, 0.0004, 0.0004, 0.0004, 0.0004, 0.0004, 0.0005, 0.0005, 0.0005, 0.0005, 0.0006, 0.0006, 0.0006, 0.0006, 0.0007, 0.0007, 0.0007, 0.0008, 0.0008, 0.0008, 0.0009, 0.0009, 0.0009, 0.001, 0.001, 0.001, 0.0011, 0.0011, 0.0011, 0.0012, 0.0012, 0.0013, 0.0013, 0.0013, 0.0014, 0.0014, 0.0015, 0.0015, 0.0015, 0.0016, 0.0016, 0.0017, 0.0017, 0.0018, 0.0018, 0.0019, 0.0019, 0.002, 0.002, 0.0021, 0.0021, 0.0022, 0.0022, 0.0023, 0.0023, 0.0024, 0.0024, 0.0025, 0.0025, 0.0026, 0.0026, 0.0027, 0.0028, 0.0028, 0.0029, 0.0029, 0.003, 0.0031, 0.0031, 0.0032, 0.0032, 0.0033, 0.0034, 0.0034, 0.0035, 0.0036, 0.0036, 0.0037, 0.0038, 0.0038, 0.0039, 0.004, 0.004, 0.0041, 0.0042, 0.0043, 0.0043, 0.0044, 0.0045, 0.0046, 0.0046, 0.0047, 0.0048, 0.0049, 0.0049, 0.005, 0.0051, 0.0052, 0.0053, 0.0053, 0.0054, 0.0055, 0.0056, 0.0057, 0.0057, 0.0058, 0.0059, 0.006, 0.0061, 0.0062, 0.0063, 0.0063, 0.0064, 0.0065, 0.0066, 0.0067, 0.0068, 0.0069, 0.007, 0.0071, 0.0072, 0.0073, 0.0074, 0.0075, 0.0076, 0.0076, 0.0077, 0.0078, 0.0079, 0.008, 0.0081, 0.0082, 0.0083, 0.0084, 0.0085, 0.0087, 0.0088, 0.0089, 0.009, 0.0091, 0.0092, 0.0093, 0.0094, 0.0095, 0.0096, 0.0097, 0.0098, 0.0099, 0.01, 0.0102, 0.0103, 0.0104, 0.0105, 0.0106, 0.0107, 0.0108, 0.011, 0.0111, 0.0112, 0.0113, 0.0114, 0.0116, 0.0117, 0.0118, 0.0119, 0.012, 0.0122, 0.0123, 0.0124, 0.0125, 0.0127, 0.0128, 0.0129, 0.013, 0.0132, 0.0133, 0.0134, 0.0136, 0.0137, 0.0138, 0.0139, 0.0141, 0.0142, 0.0143, 0.0145, 0.0146, 0.0147, 0.0149, 0.015, 0.0152, 0.0153, 0.0154, 0.0156, 0.0157, 0.0159, 0.016, 0.0161, 0.0163, 0.0164, 0.0166, 0.0167, 0.0169, 0.017, 0.0171, 0.0173, 0.0174, 0.0176, 0.0177, 0.0179, 0.018, 0.0182, 0.0183, 0.0185, 0.0186, 0.0188, 0.0189, 0.0191, 0.0193, 0.0194, 0.0196, 0.0197, 0.0199, 0.02, 0.0202, 0.0204, 0.0205, 0.0207, 0.0208, 0.021, 0.0212, 0.0213, 0.0215, 0.0217, 0.0218, 0.022, 0.0222, 0.0223, 0.0225, 0.0227, 0.0228, 0.023, 0.0232, 0.0234, 0.0235, 0.0237, 0.0239, 0.024, 0.0242, 0.0244, 0.0246, 0.0247, 0.0249, 0.0251, 0.0253, 0.0255, 0.0256, 0.0258, 0.026, 0.0262, 0.0264, 0.0266, 0.0267, 0.0269, 0.0271, 0.0273, 0.0275, 0.0277, 0.0279, 0.028, 0.0282, 0.0284, 0.0286, 0.0288, 0.029, 0.0292, 0.0294, 0.0296, 0.0298, 0.03, 0.0302, 0.0304, 0.0306, 0.0308, 0.031, 0.0312, 0.0314, 0.0316, 0.0318, 0.032, 0.0322, 0.0324, 0.0326, 0.0328, 0.033, 0.0332, 0.0334, 0.0336, 0.0338, 0.034, 0.0342, 0.0344, 0.0346, 0.0349, 0.0351, 0.0353, 0.0355, 0.0357, 0.0359, 0.0361, 0.0364, 0.0366, 0.0368, 0.037, 0.0372, 0.0374, 0.0377, 0.0379, 0.0381, 0.0383, 0.0386, 0.0388, 0.039, 0.0392, 0.0395, 0.0397, 0.0399, 0.0401, 0.0404, 0.0406, 0.0408, 0.0411, 0.0413, 0.0415, 0.0418, 0.042, 0.0422, 0.0425, 0.0427, 0.0429, 0.0432, 0.0434, 0.0436, 0.0439, 0.0441, 0.0444, 0.0446, 0.0448, 0.0451, 0.0453, 0.0456, 0.0458, 0.0461, 0.0463, 0.0466, 0.0468, 0.047, 0.0473, 0.0475, 0.0478, 0.048, 0.0483, 0.0486, 0.0488, 0.0491, 0.0493, 0.0496, 0.0498, 0.0501, 0.0503, 0.0506, 0.0509, 0.0511, 0.0514, 0.0516, 0.0519, 0.0522, 0.0524, 0.0527, 0.053, 0.0532, 0.0535, 0.0538, 0.054, 0.0543, 0.0546, 0.0548, 0.0551, 0.0554, 0.0556, 0.0559, 0.0562, 0.0565, 0.0567, 0.057, 0.0573, 0.0576, 0.0578, 0.0581, 0.0584, 0.0587, 0.059, 0.0592, 0.0595, 0.0598, 0.0601, 0.0604, 0.0607, 0.0609, 0.0612, 0.0615, 0.0618, 0.0621, 0.0624, 0.0627, 0.063, 0.0633, 0.0635, 0.0638, 0.0641, 0.0644, 0.0647, 0.065, 0.0653, 0.0656, 0.0659, 0.0662, 0.0665, 0.0668, 0.0671, 0.0674, 0.0677, 0.068, 0.0683, 0.0686, 0.0689, 0.0692, 0.0695, 0.0699, 0.0702, 0.0705, 0.0708, 0.0711, 0.0714, 0.0717, 0.072, 0.0723, 0.0727, 0.073, 0.0733, 0.0736, 0.0739, 0.0742, 0.0746, 0.0749, 0.0752, 0.0755, 0.0759, 0.0762, 0.0765, 0.0768, 0.0771, 0.0775, 0.0778, 0.0781, 0.0785, 0.0788, 0.0791, 0.0795, 0.0798, 0.0801, 0.0804, 0.0808, 0.0811, 0.0815, 0.0818, 0.0821, 0.0825, 0.0828, 0.0831, 0.0835, 0.0838, 0.0842, 0.0845, 0.0849, 0.0852, 0.0855, 0.0859, 0.0862, 0.0866, 0.0869, 0.0873, 0.0876, 0.088, 0.0883, 0.0887, 0.089, 0.0894, 0.0898, 0.0901, 0.0905, 0.0908, 0.0912, 0.0915, 0.0919, 0.0923, 0.0926, 0.093, 0.0933, 0.0937, 0.0941, 0.0944, 0.0948, 0.0952, 0.0955, 0.0959, 0.0963, 0.0967, 0.097, 0.0974, 0.0978, 0.0981, 0.0985, 0.0989, 0.0993, 0.0996, 0.1, 0.1004, 0.1008, 0.1012, 0.1015, 0.1019, 0.1023, 0.1027, 0.1031, 0.1035, 0.1038, 0.1042, 0.1046, 0.105, 0.1054, 0.1058, 0.1062, 0.1066, 0.107, 0.1074, 0.1078, 0.1082, 0.1086, 0.109, 0.1093, 0.1097, 0.1101, 0.1105, 0.111, 0.1114, 0.1118, 0.1122, 0.1126, 0.113, 0.1134, 0.1138, 0.1142, 0.1146, 0.115, 0.1154, 0.1158, 0.1163, 0.1167, 0.1171, 0.1175, 0.1179, 0.1183, 0.1188, 0.1192, 0.1196, 0.12, 0.1204, 0.1209, 0.1213, 0.1217, 0.1221, 0.1226, 0.123, 0.1234, 0.1238, 0.1243, 0.1247, 0.1251, 0.1256, 0.126, 0.1264, 0.1269, 0.1273, 0.1278, 0.1282, 0.1286, 0.1291, 0.1295, 0.13, 0.1304, 0.1308, 0.1313, 0.1317, 0.1322, 0.1326, 0.1331, 0.1335, 0.134, 0.1344, 0.1349, 0.1353, 0.1358, 0.1362, 0.1367, 0.1372, 0.1376, 0.1381, 0.1385, 0.139, 0.1395, 0.1399, 0.1404, 0.1408, 0.1413, 0.1418, 0.1422, 0.1427, 0.1432, 0.1437, 0.1441, 0.1446, 0.1451, 0.1455, 0.146, 0.1465, 0.147, 0.1475, 0.1479, 0.1484, 0.1489, 0.1494, 0.1499, 0.1503, 0.1508, 0.1513, 0.1518, 0.1523, 0.1528, 0.1533, 0.1538, 0.1543, 0.1548, 0.1552, 0.1557, 0.1562, 0.1567, 0.1572, 0.1577, 0.1582, 0.1587, 0.1592, 0.1597, 0.1602, 0.1608, 0.1613, 0.1618, 0.1623, 0.1628, 0.1633, 0.1638, 0.1643, 0.1648, 0.1654, 0.1659, 0.1664, 0.1669, 0.1674, 0.1679, 0.1685, 0.169, 0.1695, 0.17, 0.1706, 0.1711, 0.1716, 0.1721, 0.1727, 0.1732, 0.1737, 0.1743, 0.1748, 0.1753, 0.1759, 0.1764, 0.1769, 0.1775, 0.178, 0.1786, 0.1791, 0.1797, 0.1802, 0.1808, 0.1813, 0.1818, 0.1824, 0.1829, 0.1835, 0.1841, 0.1846, 0.1852, 0.1857, 0.1863, 0.1868, 0.1874, 0.188, 0.1885, 0.1891, 0.1896, 0.1902, 0.1908, 0.1913, 0.1919, 0.1925, 0.1931, 0.1936, 0.1942, 0.1948, 0.1954, 0.1959, 0.1965, 0.1971, 0.1977, 0.1982, 0.1988, 0.1994, 0.2, 0.2006, 0.2012, 0.2018, 0.2024, 0.2029, 0.2035, 0.2041, 0.2047, 0.2053, 0.2059, 0.2065, 0.2071, 0.2077, 0.2083, 0.2089, 0.2095, 0.2101, 0.2107, 0.2114, 0.212, 0.2126, 0.2132, 0.2138, 0.2144, 0.215, 0.2156, 0.2163, 0.2169, 0.2175, 0.2181, 0.2188, 0.2194, 0.22, 0.2206, 0.2213, 0.2219, 0.2225, 0.2232, 0.2238, 0.2244, 0.2251, 0.2257, 0.2263, 0.227, 0.2276, 0.2283, 0.2289, 0.2295, 0.2302, 0.2308, 0.2315, 0.2321, 0.2328, 0.2335, 0.2341, 0.2348, 0.2354, 0.2361, 0.2367, 0.2374, 0.2381, 0.2387, 0.2394, 0.2401, 0.2407, 0.2414, 0.2421, 0.2427, 0.2434, 0.2441, 0.2448, 0.2455, 0.2461, 0.2468, 0.2475, 0.2482, 0.2489, 0.2496, 0.2502, 0.2509, 0.2516, 0.2523, 0.253, 0.2537, 0.2544, 0.2551, 0.2558, 0.2565, 0.2572, 0.2579, 0.2586, 0.2593, 0.26, 0.2608, 0.2615, 0.2622, 0.2629, 0.2636, 0.2643, 0.2651, 0.2658, 0.2665, 0.2672, 0.2679, 0.2687, 0.2694, 0.2701, 0.2709, 0.2716, 0.2723, 0.2731, 0.2738, 0.2746, 0.2753, 0.276, 0.2768, 0.2775, 0.2783, 0.279, 0.2798, 0.2805, 0.2813, 0.282, 0.2828, 0.2836, 0.2843, 0.2851, 0.2859, 0.2866, 0.2874, 0.2882, 0.2889, 0.2897, 0.2905, 0.2913, 0.292, 0.2928, 0.2936, 0.2944, 0.2952, 0.296, 0.2967, 0.2975, 0.2983, 0.2991, 0.2999, 0.3007, 0.3015, 0.3023, 0.3031, 0.3039, 0.3047, 0.3055, 0.3064, 0.3072, 0.308, 0.3088, 0.3096, 0.3104, 0.3113, 0.3121, 0.3129, 0.3137, 0.3146, 0.3154, 0.3162, 0.3171, 0.3179, 0.3187, 0.3196, 0.3204, 0.3213, 0.3221, 0.323, 0.3238, 0.3247, 0.3255, 0.3264, 0.3272, 0.3281, 0.3289, 0.3298, 0.3307, 0.3315, 0.3324, 0.3333, 0.3342, 0.335, 0.3359, 0.3368, 0.3377, 0.3386, 0.3394, 0.3403, 0.3412, 0.3421, 0.343, 0.3439, 0.3448, 0.3457, 0.3466, 0.3475, 0.3484, 0.3493, 0.3503, 0.3512, 0.3521, 0.353, 0.3539, 0.3549, 0.3558, 0.3567, 0.3576, 0.3586, 0.3595, 0.3605, 0.3614, 0.3623, 0.3633, 0.3642, 0.3652, 0.3661, 0.3671, 0.368, 0.369, 0.37, 0.3709, 0.3719, 0.3729, 0.3738, 0.3748, 0.3758, 0.3768, 0.3777, 0.3787, 0.3797, 0.3807, 0.3817, 0.3827, 0.3837, 0.3847, 0.3857, 0.3867, 0.3877, 0.3887, 0.3897, 0.3907, 0.3918, 0.3928, 0.3938, 0.3948, 0.3959, 0.3969, 0.3979, 0.399, 0.4, 0.401, 0.4021, 0.4031, 0.4042, 0.4052, 0.4063, 0.4074, 0.4084, 0.4095, 0.4106, 0.4116, 0.4127, 0.4138, 0.4149, 0.416, 0.417, 0.4181, 0.4192, 0.4203, 0.4214, 0.4225, 0.4236, 0.4247, 0.4258, 0.427, 0.4281, 0.4292, 0.4303, 0.4315, 0.4326, 0.4337, 0.4349, 0.436, 0.4372, 0.4383, 0.4395, 0.4406, 0.4418, 0.4429, 0.4441, 0.4453, 0.4464, 0.4476, 0.4488, 0.45, 0.4512, 0.4524, 0.4536, 0.4548, 0.456, 0.4572, 0.4584, 0.4596, 0.4608, 0.462, 0.4633, 0.4645, 0.4657, 0.467, 0.4682, 0.4695, 0.4707, 0.472, 0.4732, 0.4745, 0.4757, 0.477, 0.4783, 0.4796, 0.4809, 0.4821, 0.4834, 0.4847, 0.486, 0.4873, 0.4887, 0.49, 0.4913, 0.4926, 0.4939, 0.4953, 0.4966, 0.498, 0.4993, 0.5007, 0.502, 0.5034, 0.5047, 0.5061, 0.5075, 0.5089, 0.5103, 0.5117, 0.5131, 0.5145, 0.5159, 0.5173, 0.5187, 0.5201, 0.5216, 0.523, 0.5244, 0.5259, 0.5273, 0.5288, 0.5303, 0.5317, 0.5332, 0.5347, 0.5362, 0.5377, 0.5392, 0.5407, 0.5422, 0.5437, 0.5453, 0.5468, 0.5483, 0.5499, 0.5514, 0.553, 0.5546, 0.5561, 0.5577, 0.5593, 0.5609, 0.5625, 0.5641, 0.5657, 0.5674, 0.569, 0.5706, 0.5723, 0.5739, 0.5756, 0.5773, 0.5789, 0.5806, 0.5823, 0.584, 0.5857, 0.5875, 0.5892, 0.5909, 0.5927, 0.5944, 0.5962, 0.598, 0.5998, 0.6015, 0.6033, 0.6052, 0.607, 0.6088, 0.6107, 0.6125, 0.6144, 0.6163, 0.6181, 0.62, 0.6219, 0.6239, 0.6258, 0.6277, 0.6297, 0.6317, 0.6336, 0.6356, 0.6376, 0.6396, 0.6417, 0.6437, 0.6458, 0.6478, 0.6499, 0.652, 0.6541, 0.6563, 0.6584, 0.6606, 0.6627, 0.6649, 0.6671, 0.6693, 0.6716, 0.6738, 0.6761, 0.6784, 0.6807, 0.683, 0.6854, 0.6878, 0.6901, 0.6925, 0.695, 0.6974, 0.6999, 0.7024, 0.7049, 0.7074, 0.71, 0.7126, 0.7152, 0.7179, 0.7205, 0.7232, 0.726, 0.7287, 0.7315, 0.7343, 0.7372, 0.7401, 0.743, 0.7459, 0.7489, 0.752, 0.755, 0.7581, 0.7613, 0.7645, 0.7678, 0.771, 0.7744, 0.7778, 0.7813, 0.7848, 0.7883, 0.792, 0.7957, 0.7995, 0.8033, 0.8073, 0.8113, 0.8154, 0.8196, 0.8239, 0.8283, 0.8329, 0.8376, 0.8424, 0.8474, 0.8525, 0.8578, 0.8634, 0.8692, 0.8752, 0.8816, 0.8884, 0.8956, 0.9033, 0.9117, 0.921, 0.9316, 0.9441, 0.9605, 1);

cubic-bezier (matches within 0.5%)

animation-timing-function: cubic-bezier(0.56, 0, 1, 0.46);

Least-squares fit to the easeInCirc curve; the worst gap is 0.2 points of travel. The linear() string is exact.

web animations api

el.animate({ translate: ['0 0', '240px 0'] }, { duration: 600, easing: 'cubic-bezier(0.56, 0, 1, 0.46)', fill: 'both' });

vawe

import { easeInCirc } from '../../core/motion/curves.js';
import { curveToLinear } from '../../core/motion/springs.js';

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

When to use it, and when to avoid it

Use it for

Exits and build-ups that leave the frame at speed.
For circ: mechanical moves and wipes with a hard edge.

Avoid it for

Entrances: the first frames barely move, so the viewer waits.
For circ: soft, organic motion: the stop feels cut.

The nearest vawe ease

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

easeOutCirccurve gap 0.5914
easeInOutCirccurve gap 0.3739
carrycurve gap 0.0917
easeInQuartcurve gap 0.0573
easeInCubiccurve gap 0.073
easeInQuintcurve gap 0.0759