Skip to content

Instantly share code, notes, and snippets.

@Adzetko
Last active August 2, 2023 10:31
Show Gist options
  • Save Adzetko/af40baa34568886574ded6418cd471ee to your computer and use it in GitHub Desktop.
Save Adzetko/af40baa34568886574ded6418cd471ee to your computer and use it in GitHub Desktop.
NOT WORKING - using a map of properties to get some transitions, Generated by SassMeister.com.
@use "sass:string";
.home {
@include reveal-effect-start(false, opacity);
}
.home .viewed {
@include reveal-effect-end(opacity);
}
$properties-map: (
opacity: (start: "opacity: 0", end: "opacity: 1"),
clip-top: (start: "clip-path: inset(100% 0 0 0)", end: "clip-path: inset(0)"),
clip-bottom: (start: "clip-path: inset(0 0 100% 0)", end: "clip-path: inset(0)"),
translate-y: (start: "translate: 0 -100px", end: "translate: 0 0"),
translate-x: (start: "translate: -100px 0", end: "translate: 0 0"),
);
// Return a transition value from a list of properties to transition from
// @param {List} $properties - List of properties
@function transition-properties($properties) {
$transition: "";
@each $property in $properties {
$transition: $transition + $property + " 0.2s ease, ";
}
@return str_slice(unquote($transition), 0, str_length($transition)-2);
}
// Provides transition start to an element
// @param {Bool} $chainChildren - Provides a chaining reveal effect to children
// @param {List} $properties - add each property as a transition
@mixin reveal-effect-start($chainChildren: false, $properties...) {
@each $property in $properties {
string.unquote(map-get($properties-map, $property, start));
}
transition: transition-properties($properties);
@if $chainChildren {
@for $i from 1 through 20 {
&:nth-child(#{$i}) {
transition-delay: $i * .1s;
}
}
}
}
// Provides transition end to an element
// @param {Arglist} $properties - add each property as a transition
@mixin reveal-effect-end($properties...) {
@each $property in $properties {
#{$property}: string.unquote(map-get($properties-map, $property, end));
}
}
{
"sass": {
"compiler": "dart-sass/1.32.12",
"extensions": {},
"syntax": "SCSS",
"outputStyle": "expanded"
},
"autoprefixer": false
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment