material design motion scss mixin concept

material_motion_mixin.scss

/**
 * material-motion
 *
 * apply configurable animation enter and exit speed/easing combo for mobile
 * and medium view port sizes
 */

$enter-animation-speed:         0.225s;
$enter-animation-speed-medium:  0.300s;
$enter-animation-easing:        cubic-bezier(0, 0, 0.2, 1);

$exit-animation-speed:          0.195s;
$exit-animation-speed-medium:   0.250s;
$exit-animation-easing:         cubic-bezier(0.4, 0, 0.6, 1);

@mixin material-motion($properties: all, $state: 'enter') {
    @if $state == 'enter' {
        transition: $properties $enter-animation-speed $enter-animation-easing;

        @media screen and (min-width: $breakpoint) {
            transition-duration: $enter-animation-speed-medium;
        }
    }
    @if $state == 'exit' {
        transition: $properties $exit-animation-speed $exit-animation-easing;

        @media screen and (min-width: $breakpoint) {
            transition-duration: $exit-animation-speed-medium;
        }
    }
}

// ex $breakpoint = 650px;