Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
spring.scss: an attempt at making spring animations using only SASS. Still a work in progress.
@mixin spring($selector, $name, $duration, $delay, $location, $spring) {
// Set Defaults
$selector: ".spring" !default;
$location: 0,0,0 !default;
$name: "spring" !default;
$duration: 1s !default;
$delay: 0s !default;
$spring: 0.1 !default;
// Set selector to use animation
#{$selector} { @include vendor-prefix(animation, $name $duration $delay); }
// Set location
$over:();
@each $coord in $location {
$coord: $coord * -1 * $spring;
$over: append($over, $coord, comma);
}
$under:();
@each $coord in $location {
$coord: $coord * (1 * $spring);
$under: append($under, $coord, comma);
}
// Setup animation
@include keyframes($name) {
0% { @include vendor-prefix(transform, translate3d(#{$location})); }
75% { @include vendor-prefix(transform, translate3d(#{$over})); }
85% { @include vendor-prefix(transform, translate3d(#{$under})); }
50%, 100% { @include vendor-prefix(transform, translate3d(0, 0, 0)); }
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.