packages/styles/scss/lib/_easing.scss

   1 /**
   2  * Easing functions for transitions and animations
   3  * Learn more at http://easings.net/
   4  * @param {String} $type - The wanted easing name
   5  * @returns {String} - The easing function, using cubic-bezier
   6  */
   7 @function easing($type: 'ease') {
   8         $value: '';
   9
  10         @if $type == 'linear' {
  11                 $value: '0, 0, 1, 1';
  12         } @else if $type == 'ease' {
  13                 $value: '0.25, 0.1, 0.25, 1';
  14         } @else if $type == 'ease-in' {
  15                 $value: '0.42, 0, 1, 1';
  16         } @else if $type == 'ease-out' {
  17                 $value: '0, 0, 0.58, 1';
  18         } @else if $type == 'ease-in-out' {
  19                 $value: '0.42, 0, 0.58, 1';
  20         } @else if $type == 'ease-in-sine' {
  21                 $value: '0.12, 0, 0.39, 0';
  22         } @else if $type == 'ease-in-quad' {
  23                 $value: '0.11, 0, 0.5, 0';
  24         } @else if $type == 'ease-in-cubic' {
  25                 $value: '0.32, 0, 0.67, 0';
  26         } @else if $type == 'ease-in-quart' {
  27                 $value: '0.5 , 0, 0.75, 0';
  28         } @else if $type == 'ease-in-quint' {
  29                 $value: '0.64, 0, 0.78, 0';
  30         } @else if $type == 'ease-in-expo' {
  31                 $value: '0.7 , 0, 0.84, 0';
  32         } @else if $type == 'ease-in-circ' {
  33                 $value: '0.55, 0, 1, 0.45';
  34         } @else if $type == 'ease-in-back' {
  35                 $value: '0.36, 0, 0.66, -0.56';
  36         } @else if $type == 'ease-out-sine' {
  37                 $value: '0.61, 1, 0.88, 1';
  38         } @else if $type == 'ease-out-quad' {
  39                 $value: '0.5, 1, 0.89, 1';
  40         } @else if $type == 'ease-out-cubic' {
  41                 $value: '0.33, 1, 0.68, 1';
  42         } @else if $type == 'ease-out-quart' {
  43                 $value: '0.25, 1, 0.5, 1';
  44         } @else if $type == 'ease-out-quint' {
  45                 $value: '0.22, 1, 0.36, 1';
  46         } @else if $type == 'ease-out-expo' {
  47                 $value: '0.16, 1, 0.3, 1';
  48         } @else if $type == 'ease-out-circ' {
  49                 $value: '0, 0.55, 0.45, 1';
  50         } @else if $type == 'ease-out-back' {
  51                 $value: '0.34, 1.56, 0.64, 1';
  52         } @else if $type == 'ease-in-out-sine' {
  53                 $value: '0.37, 0, 0.63, 1';
  54         } @else if $type == 'ease-in-out-quad' {
  55                 $value: '0.45, 0, 0.55, 1';
  56         } @else if $type == 'ease-in-out-cubic' {
  57                 $value: '0.65, 0, 0.35, 1';
  58         } @else if $type == 'ease-in-out-quart' {
  59                 $value: '0.76, 0, 0.24, 1';
  60         } @else if $type == 'ease-in-out-quint' {
  61                 $value: '0.83, 0, 0.17, 1';
  62         } @else if $type == 'ease-in-out-expo' {
  63                 $value: '0.87, 0, 0.13, 1';
  64         } @else if $type == 'ease-in-out-circ' {
  65                 $value: '0.85, 0, 0.15, 1';
  66         } @else if $type == 'ease-in-out-back' {
  67                 $value: '0.68, -0.6, 0.32, 1.6';
  68         } @else {
  69                 @error "'#{$type}' is not a correct value for easing().";
  70         }
  71
  72         @return cubic-bezier(unquote($value));
  73 }