├── README.md ├── easings.less ├── easings.scss └── easings.styl /README.md: -------------------------------------------------------------------------------- 1 | # gsap-easings-css 2 | This is an attempt to bring GSAP easings functions to CSS with cubic bezier timing functions. This is a work in progress so you might notice slight differences. 3 | -------------------------------------------------------------------------------- /easings.less: -------------------------------------------------------------------------------- 1 | @Power0EaseNone: cubic-bezier(0.250, 0.250, 0.750, 0.750); 2 | 3 | @Power1EaseIn: cubic-bezier(0.550, 0.085, 0.680, 0.530); 4 | @Power1EaseOut: cubic-bezier(0.250, 0.460, 0.450, 0.940); 5 | @Power1EaseInOut: cubic-bezier(0.455, 0.030, 0.515, 0.955); 6 | 7 | @Power2EaseIn: cubic-bezier(0.550, 0.055, 0.675, 0.190); 8 | @Power2EaseOut: cubic-bezier(0.215, 0.610, 0.355, 1.000); 9 | @Power2EaseInOut: cubic-bezier(0.645, 0.045, 0.355, 1.000); 10 | 11 | @Power3EaseIn: cubic-bezier(0.895, 0.030, 0.685, 0.220); 12 | @Power3EaseOut: cubic-bezier(0.165, 0.840, 0.440, 1.000); 13 | @Power3EaseInOut: cubic-bezier(0.770, 0.000, 0.175, 1.000); 14 | 15 | @Power4EaseIn: cubic-bezier(0.755, 0.050, 0.855, 0.060); 16 | @Power4EaseOut: cubic-bezier(0.230, 1.000, 0.320, 1.000); 17 | @Power4EaseInOut: cubic-bezier(0.860, 0.000, 0.070, 1.000); 18 | 19 | @CircEaseIn: cubic-bezier(0.600, 0.040, 0.980, 0.335); 20 | @CircEaseOut: cubic-bezier(0.075, 0.820, 0.165, 1.000); // wip 21 | @CircEaseInOut: cubic-bezier(0.785, 0.135, 0.150, 0.860); // wip 22 | 23 | @ExpoEaseIn: cubic-bezier(0.950, 0.050, 0.795, 0.035); 24 | @ExpoEaseOut: cubic-bezier(0.190, 1.000, 0.220, 1.000); 25 | @ExpoEaseInOut: cubic-bezier(1.000, 0.000, 0.000, 1.000); 26 | 27 | @SineEaseIn: cubic-bezier(0.470, 0.000, 0.745, 0.715); 28 | @SineEaseOut: cubic-bezier(0.390, 0.575, 0.565, 1.000); 29 | @SineEaseInOut: cubic-bezier(0.445, 0.050, 0.550, 0.950); -------------------------------------------------------------------------------- /easings.scss: -------------------------------------------------------------------------------- 1 | $Power0EaseNone: cubic-bezier(0.250, 0.250, 0.750, 0.750); 2 | 3 | $Power1EaseIn: cubic-bezier(0.550, 0.085, 0.680, 0.530); 4 | $Power1EaseOut: cubic-bezier(0.250, 0.460, 0.450, 0.940); 5 | $Power1EaseInOut: cubic-bezier(0.455, 0.030, 0.515, 0.955); 6 | 7 | $Power2EaseIn: cubic-bezier(0.550, 0.055, 0.675, 0.190); 8 | $Power2EaseOut: cubic-bezier(0.215, 0.610, 0.355, 1.000); 9 | $Power2EaseInOut: cubic-bezier(0.645, 0.045, 0.355, 1.000); 10 | 11 | $Power3EaseIn: cubic-bezier(0.895, 0.030, 0.685, 0.220); 12 | $Power3EaseOut: cubic-bezier(0.165, 0.840, 0.440, 1.000); 13 | $Power3EaseInOut: cubic-bezier(0.770, 0.000, 0.175, 1.000); 14 | 15 | $Power4EaseIn: cubic-bezier(0.755, 0.050, 0.855, 0.060); 16 | $Power4EaseOut: cubic-bezier(0.230, 1.000, 0.320, 1.000); 17 | $Power4EaseInOut: cubic-bezier(0.860, 0.000, 0.070, 1.000); 18 | 19 | $CircEaseIn: cubic-bezier(0.600, 0.040, 0.980, 0.335); 20 | $CircEaseOut: cubic-bezier(0.075, 0.820, 0.165, 1.000); // wip 21 | $CircEaseInOut: cubic-bezier(0.785, 0.135, 0.150, 0.860); // wip 22 | 23 | $ExpoEaseIn: cubic-bezier(0.950, 0.050, 0.795, 0.035); 24 | $ExpoEaseOut: cubic-bezier(0.190, 1.000, 0.220, 1.000); 25 | $ExpoEaseInOut: cubic-bezier(1.000, 0.000, 0.000, 1.000); 26 | 27 | $SineEaseIn: cubic-bezier(0.470, 0.000, 0.745, 0.715); 28 | $SineEaseOut: cubic-bezier(0.390, 0.575, 0.565, 1.000); 29 | $SineEaseInOut: cubic-bezier(0.445, 0.050, 0.550, 0.950); -------------------------------------------------------------------------------- /easings.styl: -------------------------------------------------------------------------------- 1 | $Power0EaseNone = cubic-bezier(0.250, 0.250, 0.750, 0.750); 2 | 3 | $Power1EaseIn = cubic-bezier(0.550, 0.085, 0.680, 0.530); 4 | $Power1EaseOut = cubic-bezier(0.250, 0.460, 0.450, 0.940); 5 | $Power1EaseInOut = cubic-bezier(0.455, 0.030, 0.515, 0.955); 6 | 7 | $Power2EaseIn = cubic-bezier(0.550, 0.055, 0.675, 0.190); 8 | $Power2EaseOut = cubic-bezier(0.215, 0.610, 0.355, 1.000); 9 | $Power2EaseInOut = cubic-bezier(0.645, 0.045, 0.355, 1.000); 10 | 11 | $Power3EaseIn = cubic-bezier(0.895, 0.030, 0.685, 0.220); 12 | $Power3EaseOut = cubic-bezier(0.165, 0.840, 0.440, 1.000); 13 | $Power3EaseInOut = cubic-bezier(0.770, 0.000, 0.175, 1.000); 14 | 15 | $Power4EaseIn = cubic-bezier(0.755, 0.050, 0.855, 0.060); 16 | $Power4EaseOut = cubic-bezier(0.230, 1.000, 0.320, 1.000); 17 | $Power4EaseInOut = cubic-bezier(0.860, 0.000, 0.070, 1.000); 18 | 19 | $CircEaseIn = cubic-bezier(0.600, 0.040, 0.980, 0.335); 20 | $CircEaseOut = cubic-bezier(0.075, 0.820, 0.165, 1.000); // wip 21 | $CircEaseInOut = cubic-bezier(0.785, 0.135, 0.150, 0.860); // wip 22 | 23 | $ExpoEaseIn = cubic-bezier(0.950, 0.050, 0.795, 0.035); 24 | $ExpoEaseOut = cubic-bezier(0.190, 1.000, 0.220, 1.000); 25 | $ExpoEaseInOut = cubic-bezier(1.000, 0.000, 0.000, 1.000); 26 | 27 | $SineEaseIn = cubic-bezier(0.470, 0.000, 0.745, 0.715); 28 | $SineEaseOut = cubic-bezier(0.390, 0.575, 0.565, 1.000); 29 | $SineEaseInOut = cubic-bezier(0.445, 0.050, 0.550, 0.950); --------------------------------------------------------------------------------