Skip to content

Commit

Permalink
Animation Fixes
Browse files Browse the repository at this point in the history
  • Loading branch information
@vanvianen
vanvianen committed Jan 21, 2024
1 parent 3a5c822 commit 61a0830
Show file tree
Hide file tree
Showing 11 changed files with 195 additions and 181 deletions.
2 changes: 1 addition & 1 deletion dist/css/stylescape.css
View file

Large diffs are not rendered by default.

187 changes: 94 additions & 93 deletions src/scss/animation/_base.scss
View file
Expand Up @@ -30,10 +30,11 @@ $animate_base_iteration_count: infinite !default;
$animate_base_direction: normal !default;
$animate_base_color_start: #ffffff !default;
$animate_base_color_end: #000000 !default;
$animate_base_color_glow_01: $N2405 !default;
$animate_base_color_glow_02: $N3005 !default;
$animate_base_color_glow_03: $N3605 !default;


$color_start: #fff,
$color_end: #f00,

// Base Mixin
// ----------------------------------------------------------------------------
Expand All @@ -42,30 +43,30 @@ $color_end: #f00,
$name: none,
$duration: $animate_base_duration,
$timing_function: $animate_base_timing_function,
$iteration-count: $animate_base_iteration_count,
$iteration_count: $animate_base_iteration_count,
$delay: $animate_base_delay,
$direction: $animate_base_direction,
) {
// animation: $name $duration $timing_function $iteration-count $delay $direction;
// animation: $name $duration $timing_function $iteration_count $delay $direction;
animation-name: $name;
animation-duration: $duration;
animation-timing-function: $timing_function;
animation-iteration-count: $iteration-count;
animation-iteration-count: $iteration_count;
animation-delay: $delay;
animation-direction: $direction;
}

// General Animation Classes
// ----------------------------------------------------------------------------

// Base classes for animations
[class^="#{$icongl_prefix}animate_"],
[class*=" #{$icongl_prefix}animate_"] {
// Base animation properties
display: inline-block;
backface-visibility: hidden;
perspective: 1000px; // Improve 3D animations
}
// // Base classes for animations
// [class^="#{$icongl_prefix}animate_"],
// [class*=" #{$icongl_prefix}animate_"] {
// // Base animation properties
// display: inline-block;
// backface-visibility: hidden;
// perspective: 1000px; // Improve 3D animations
// }

// Reduced Motion Preference
// ----------------------------------------------------------------------------
Expand Down Expand Up @@ -173,92 +174,92 @@ $slideshow-time: 6s;



// @mixin transition_hover_opacity {
// @include transition_duration_00;
// opacity: 1.00;
// :hover {
// @include transition_duration_00;
// opacity: 0.50;
// }
// }
@mixin transition_hover_opacity {
@include transition_duration_00;
opacity: 1.00;
:hover {
@include transition_duration_00;
opacity: 0.50;
}
}

// @mixin transition_duration($val) {
// transition: all $val ease-in-out;
// -moz-transition: all $val ease-in-out;
// -ms-transition: all $val ease-in-out;
// -o-transition: all $val ease-in-out;
// -webkit-transition: all $val ease-in-out;
// transition-duration: all $val ease-in-out;
// -moz-transition-duration: all $val ease-in-out;
// -ms-transition-duration: all $val ease-in-out;
// -o-transition-duration: all $val ease-in-out;
// -webkit-transition-duration: all $val ease-in-out;
// }
@mixin transition_duration($val) {
transition: all $val ease-in-out;
-moz-transition: all $val ease-in-out;
-ms-transition: all $val ease-in-out;
-o-transition: all $val ease-in-out;
-webkit-transition: all $val ease-in-out;
transition-duration: all $val ease-in-out;
-moz-transition-duration: all $val ease-in-out;
-ms-transition-duration: all $val ease-in-out;
-o-transition-duration: all $val ease-in-out;
-webkit-transition-duration: all $val ease-in-out;
}



// @mixin transition_duration_00 {
// transition: all $transition_duration_00 ease-in-out;
// -moz-transition: all $transition_duration_00 ease-in-out;
// -ms-transition: all $transition_duration_00 ease-in-out;
// -o-transition: all $transition_duration_00 ease-in-out;
// -webkit-transition: all $transition_duration_00 ease-in-out;
// transition-duration: all $transition_duration_00 ease-in-out;
// -moz-transition-duration: all $transition_duration_00 ease-in-out;
// -ms-transition-duration: all $transition_duration_00 ease-in-out;
// -o-transition-duration: all $transition_duration_00 ease-in-out;
// -webkit-transition-duration: all $transition_duration_00 ease-in-out;
// }
@mixin transition_duration_00 {
transition: all $transition_duration_00 ease-in-out;
-moz-transition: all $transition_duration_00 ease-in-out;
-ms-transition: all $transition_duration_00 ease-in-out;
-o-transition: all $transition_duration_00 ease-in-out;
-webkit-transition: all $transition_duration_00 ease-in-out;
transition-duration: all $transition_duration_00 ease-in-out;
-moz-transition-duration: all $transition_duration_00 ease-in-out;
-ms-transition-duration: all $transition_duration_00 ease-in-out;
-o-transition-duration: all $transition_duration_00 ease-in-out;
-webkit-transition-duration: all $transition_duration_00 ease-in-out;
}

// @mixin transition_duration_01 {
// transition: all $transition_duration_01 ease-in-out;
// -moz-transition: all $transition_duration_01 ease-in-out;
// -ms-transition: all $transition_duration_01 ease-in-out;
// -o-transition: all $transition_duration_01 ease-in-out;
// -webkit-transition: all $transition_duration_01 ease-in-out;
// transition-duration: all $transition_duration_01 ease-in-out;
// -moz-transition-duration: all $transition_duration_01 ease-in-out;
// -ms-transition-duration: all $transition_duration_01 ease-in-out;
// -o-transition-duration: all $transition_duration_01 ease-in-out;
// -webkit-transition-duration: all $transition_duration_01 ease-in-out;
// }
@mixin transition_duration_01 {
transition: all $transition_duration_01 ease-in-out;
-moz-transition: all $transition_duration_01 ease-in-out;
-ms-transition: all $transition_duration_01 ease-in-out;
-o-transition: all $transition_duration_01 ease-in-out;
-webkit-transition: all $transition_duration_01 ease-in-out;
transition-duration: all $transition_duration_01 ease-in-out;
-moz-transition-duration: all $transition_duration_01 ease-in-out;
-ms-transition-duration: all $transition_duration_01 ease-in-out;
-o-transition-duration: all $transition_duration_01 ease-in-out;
-webkit-transition-duration: all $transition_duration_01 ease-in-out;
}

// @mixin transition_duration_02 {
// transition: all $transition_duration_02 ease-in-out;
// -moz-transition: all $transition_duration_02 ease-in-out;
// -ms-transition: all $transition_duration_02 ease-in-out;
// -o-transition: all $transition_duration_02 ease-in-out;
// -webkit-transition: all $transition_duration_02 ease-in-out;
// transition-duration: all $transition_duration_02 ease-in-out;
// -moz-transition-duration: all $transition_duration_02 ease-in-out;
// -ms-transition-duration: all $transition_duration_02 ease-in-out;
// -o-transition-duration: all $transition_duration_02 ease-in-out;
// -webkit-transition-duration: all $transition_duration_02 ease-in-out;
// }
@mixin transition_duration_02 {
transition: all $transition_duration_02 ease-in-out;
-moz-transition: all $transition_duration_02 ease-in-out;
-ms-transition: all $transition_duration_02 ease-in-out;
-o-transition: all $transition_duration_02 ease-in-out;
-webkit-transition: all $transition_duration_02 ease-in-out;
transition-duration: all $transition_duration_02 ease-in-out;
-moz-transition-duration: all $transition_duration_02 ease-in-out;
-ms-transition-duration: all $transition_duration_02 ease-in-out;
-o-transition-duration: all $transition_duration_02 ease-in-out;
-webkit-transition-duration: all $transition_duration_02 ease-in-out;
}

// @mixin transition_duration_03 {
// transition: all $transition_duration_03 ease-in-out;
// -moz-transition: all $transition_duration_03 ease-in-out;
// -ms-transition: all $transition_duration_03 ease-in-out;
// -o-transition: all $transition_duration_03 ease-in-out;
// -webkit-transition: all $transition_duration_03 ease-in-out;
// transition-duration: all $transition_duration_03 ease-in-out;
// -moz-transition-duration: all $transition_duration_03 ease-in-out;
// -ms-transition-duration: all $transition_duration_03 ease-in-out;
// -o-transition-duration: all $transition_duration_03 ease-in-out;
// -webkit-transition-duration: all $transition_duration_03 ease-in-out;
// }
@mixin transition_duration_03 {
transition: all $transition_duration_03 ease-in-out;
-moz-transition: all $transition_duration_03 ease-in-out;
-ms-transition: all $transition_duration_03 ease-in-out;
-o-transition: all $transition_duration_03 ease-in-out;
-webkit-transition: all $transition_duration_03 ease-in-out;
transition-duration: all $transition_duration_03 ease-in-out;
-moz-transition-duration: all $transition_duration_03 ease-in-out;
-ms-transition-duration: all $transition_duration_03 ease-in-out;
-o-transition-duration: all $transition_duration_03 ease-in-out;
-webkit-transition-duration: all $transition_duration_03 ease-in-out;
}

// @mixin transition_duration_04 {
// transition: all $transition_duration_04 ease-in-out;
// -moz-transition: all $transition_duration_04 ease-in-out;
// -ms-transition: all $transition_duration_04 ease-in-out;
// -o-transition: all $transition_duration_04 ease-in-out;
// -webkit-transition: all $transition_duration_04 ease-in-out;
// transition-duration: all $transition_duration_04 ease-in-out;
// -moz-transition-duration: all $transition_duration_04 ease-in-out;
// -ms-transition-duration: all $transition_duration_04 ease-in-out;
// -o-transition-duration: all $transition_duration_04 ease-in-out;
// -webkit-transition-duration: all $transition_duration_04 ease-in-out;
// }
@mixin transition_duration_04 {
transition: all $transition_duration_04 ease-in-out;
-moz-transition: all $transition_duration_04 ease-in-out;
-ms-transition: all $transition_duration_04 ease-in-out;
-o-transition: all $transition_duration_04 ease-in-out;
-webkit-transition: all $transition_duration_04 ease-in-out;
transition-duration: all $transition_duration_04 ease-in-out;
-moz-transition-duration: all $transition_duration_04 ease-in-out;
-ms-transition-duration: all $transition_duration_04 ease-in-out;
-o-transition-duration: all $transition_duration_04 ease-in-out;
-webkit-transition-duration: all $transition_duration_04 ease-in-out;
}

6 changes: 3 additions & 3 deletions src/scss/animation/_beat.scss
View file
Expand Up @@ -39,7 +39,7 @@
}
}

.#{$icongl_prefix}animate_beat {
.animate_beat {
@include animate_beat();
}

Expand Down Expand Up @@ -72,7 +72,7 @@
}
}

.#{$icongl_prefix}animate_beat_fade {
.animate_beat_fade {
@include animate_beat_fade();
}

Expand Down Expand Up @@ -101,6 +101,6 @@
}
}

.#{$icongl_prefix}animate_beat_double {
.animate_beat_double {
@include animate_beat_double();
}
32 changes: 20 additions & 12 deletions src/scss/animation/_glow.scss
View file
Expand Up @@ -17,11 +17,13 @@
// StyleScape | Animations | Glow
// ============================================================================

@use "sass:math";


// Glow Animation
// ----------------------------------------------------------------------------
@mixin animate_glow(
$color: #f00,
$color: $animate_base_color_glow_01,
$start-shadow_size: 5px,
$end-shadow_size: 15px,
$duration: $animate_base_duration,
Expand All @@ -41,13 +43,13 @@
}

.animate_glow {
@include animate_glow(#f00);
@include animate_glow($animate_base_color_glow_01);
}

// Pulse Glow Animation
// ----------------------------------------------------------------------------
@mixin animate_glow_pulse(
$color: #f00,
$color: $animate_base_color_glow_01,
$duration: $animate_base_duration,
$timing_function: ease-in-out,
$iteration_count: $animate_base_iteration_count
Expand All @@ -65,13 +67,13 @@
}

.animate_glow_pulse {
@include animate_glow_pulse(#f00);
@include animate_glow_pulse($animate_base_color_glow_01);
}

// Soft Glow Animation
// ----------------------------------------------------------------------------
@mixin animate_glow_soft(
$color: #f00,
$color: $animate_base_color_glow_01,
$duration: $animate_base_duration_slow,
$timing_function: ease-in-out,
$iteration_count: $animate_base_iteration_count
Expand All @@ -89,13 +91,17 @@
}

.animate_glow_soft {
@include animate_glow_d(#f00);
@include animate_glow_soft($animate_base_color_glow_01);
}

// Multi-Color Glow Animation
// ----------------------------------------------------------------------------
@mixin animate_glow_multicolor(
$colors: (#f00, #0f0, #00f),
$colors: (
$animate_base_color_glow_01,
$animate_base_color_glow_02,
$animate_base_color_glow_03,
),
$duration: $animate_base_duration_slow,
$timing_function: linear,
$iteration_count: $animate_base_iteration_count
Expand All @@ -106,12 +112,14 @@
$timing_function,
$iteration_count,
);
$total-colors: length($colors);
$total_colors: length($colors);
@keyframes animate_glow_multicolor {
@for $i from 1 through $total-colors {
#{percentage(($i - 1) / $total-colors)},
#{percentage($i / $total-colors)} {
box-shadow: 0 0 10px 5px nth($colors, $i);
@for $i from 1 through $total_colors {
// #{percentage(($i - 1) / $total_colors)},
// #{percentage($i / $total_colors)} {
#{percentage(math.div(($i - 1), $total_colors))},
#{percentage(math.div($i, $total-colors))} {
box-shadow: 0 0 10px 5px nth($colors, $i);
}
}
}
Expand Down
4 changes: 2 additions & 2 deletions src/scss/animation/_heartbeat.scss
View file
Expand Up @@ -143,8 +143,8 @@
$duration: $animate_base_duration,
$timing_function: linear,
$iteration_count: $animate_base_iteration_count,
$color_start: #f00,
$color_end: #ff0
$color_start: $animate_base_color_start,
$color_end: $animate_base_color_end,
) {
@include animate_base(
animate_heartbeat_color,
Expand Down

0 comments on commit 61a0830

Please sign in to comment.