Skip to content

Instantly share code, notes, and snippets.

View patrickmatte's full-sized avatar

Patrick Matte patrickmatte

View GitHub Profile
// Ease out
value = value + (targetValue - value) / friction;
// Elastic
speed = speed * elasticity + (targetValue - value) / friction;
value = value + speed;
@patrickmatte
patrickmatte / gist:ed2ae277172c0c5d084a9e3e733bb415
Last active May 8, 2024 10:20
CSS easing methods based on Robert Penner's, as accurate as possible to do with cubic-bezier
$easeLinear: cubic-bezier(0, 0, 1, 1);
$easeSineInOut: cubic-bezier(0.37, 0, 0.63, 1);
$easeSineIn: cubic-bezier(0.12, 0, 0.39, 0);
$easeSineOut: cubic-bezier(0.61, 1, 0.88, 1);
$easeQuadraticInOut: cubic-bezier(0.45, 0, 0.55, 1);
$easeQuadraticIn: cubic-bezier(0.11, 0, 0.5, 0);
$easeQuadraticOut: cubic-bezier(0.5, 1, 0.89, 1);
$easeCubicInOut: cubic-bezier(0.65, 0, 0.35, 1);
$easeCubicIn: cubic-bezier(0.32, 0, 0.67, 0);
$easeCubicOut: cubic-bezier(0.33, 1, 0.68, 1);