Last active
November 3, 2018 23:41
-
-
Save jstewsy/cfad40e1e1cee7cbbc57a7dc4cf3d7f2 to your computer and use it in GitHub Desktop.
material design motion scss mixin concept
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/** | |
* 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; |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment