move.gl 0.0.1

package/scss/mixins/animations/_flash.scss

@@ -0,0 +1,177 @@
+// ============================================================================
+// Poster
+// ============================================================================
+
+////
+/// 
+/// Flash Animations Mixin Module
+/// ===========================================================================
+/// 
+/// This module ...
+/// 
+/// 
+/// @group Animations
+/// @author Scape Agency
+/// @link https://move.gl
+/// @since 0.1.0 initial release
+/// @todo None
+/// @access public
+/// 
+////
+
+
+// ============================================================================
+// Use
+// ============================================================================
+
+@use "../dev" as *;
+@use "../variables" as *;
+@use "../keyframes" as *;
+@use "base" as *;
+
+
+// ============================================================================
+// Mixins
+// ============================================================================
+
+
+///
+/// Flash Animation
+/// Creates a flash animation that transitions between different opacity
+/// levels.
+/// 
+/// @name animate_flash
+/// @param {Number} $start_opacity [1] - The initial opacity of the element.
+/// @param {Number} $mid_opacity [0] - The opacity at the midpoint of the animation.
+/// @param {Number} $end_opacity [1] - The final opacity of the element.
+/// @param {Number|String} $duration [$animate_base_duration] - The duration of the animation.
+/// @param {String} $timing_function [ease-in-out] - The timing function to use for the animation.
+/// @param {Number|String} $iteration_count [$animate_base_iteration_count] - The number of times the animation should run.
+///
+@mixin animate_flash(
+    $start_opacity: 1,
+    $mid_opacity: 0,
+    $end_opacity: 1,
+    $duration: $animate_base_duration,
+    $timing_function: ease-in-out,
+    $iteration_count: $animate_base_iteration_count
+) {
+    @include animate_base(
+        animate_flash,
+        $duration,
+        $timing_function,
+        $iteration_count,
+    );
+    @keyframes animate_flash {
+        0%, 100% { opacity: $start-opacity; }
+        50% { opacity: $mid-opacity; }
+    }
+}
+
+
+///
+/// Flash Fade In and Out
+/// Creates a flash fade effect that smoothly transitions in and out of view.
+/// 
+/// @name animate_flash_fade
+/// @param {Number|String} $duration [2s] - The duration of the animation.
+/// @param {String} $timing_function [ease-in-out] - The timing function to use for the animation.
+///
+@mixin animate_flash_fade(
+    $duration: 2s,
+    $timing_function: ease-in-out
+) {
+    @include animate_base(
+        animate_flash_fade,
+        $duration,
+        $timing_function, infinite
+    );
+    @keyframes animate_flash_fade {
+        0%, 100% { opacity: 0; }
+        50% { opacity: 1; }
+    }
+}
+
+
+///
+/// Strobe Flash Animation
+/// Creates a strobe flash effect with a configurable frequency.
+/// 
+/// @name animate_flash_strobe
+/// @param {Number|String} $frequency [0.1s] - The frequency of the strobe effect.
+/// @param {Number|String} $duration [$animate_base_duration] - The duration of the animation.
+/// @param {String} $timing_function [steps(1, end)] - The timing function to use for the animation.
+///
+@mixin animate_flash_strobe(
+    $frequency: 0.1s,
+    $duration: $animate_base_duration,
+    $timing_function: steps(1, end)
+) {
+    @include animate_base(
+        animate_flash_strobe,
+        $duration,
+        $timing_function,
+        infinite
+    );
+    @keyframes animate_flash_strobe {
+        0%, 100% { opacity: 1; }
+        50% { opacity: 0; }
+    }
+    animation-duration: $frequency;
+}
+
+
+///
+/// Slow Fade Flash
+/// ---------------------------------------------------------------------------
+/// Creates a slow fading flash effect, fading in and out of view.
+/// 
+/// @name animate_flash_fade_slow
+/// @param {Number|String} $duration [$animate_base_duration_slow] - The duration of the animation.
+/// @param {String} $timing_function [ease-in-out] - The timing function to use for the animation.
+///
+@mixin animate_flash_fade_slow(
+    $duration: $animate_base_duration_slow,
+    $timing_function: ease-in-out
+) {
+    @include animate_base(
+        animate_flash_fade_slow,
+        $duration,
+        $timing_function,
+        infinite
+    );
+    @keyframes animate_flash_fade_slow {
+        0%, 100% { opacity: 1; }
+        50% { opacity: 0; }
+    }
+}
+
+
+
+
+
+// @-webkit-keyframes flash {
+//     from, 50%, 100% {
+//       opacity: 1;
+//     }
+  
+//     25%, 75% {
+//       opacity: 0;
+//     }
+//   }
+  
+//   @keyframes flash {
+//     from, 50%, 100% {
+//       opacity: 1;
+//     }
+  
+//     25%, 75% {
+//       opacity: 0;
+//     }
+//   }
+  
+//   .flash {
+//     -webkit-animation-name: flash;
+//     animation-name: flash;
+//   }
+  

package/scss/mixins/animations/_flip.scss

@@ -0,0 +1,72 @@
+// ============================================================================
+// Poster
+// ============================================================================
+
+////
+/// 
+/// Flip Animations Mixin Module
+/// ===========================================================================
+/// 
+/// This module ...
+/// 
+/// 
+/// @group Animations
+/// @author Scape Agency
+/// @link https://move.gl
+/// @since 0.1.0 initial release
+/// @todo None
+/// @access public
+/// 
+////
+
+
+// ============================================================================
+// Use
+// ============================================================================
+
+@use "../dev" as *;
+@use "../variables" as *;
+@use "../keyframes" as *;
+@use "base" as *;
+
+
+// ============================================================================
+// Mixins
+// ============================================================================
+
+
+///
+/// Flip Animation
+/// Creates a flip animation that rotates an element around a 3D axis.
+/// 
+/// @name animate_flip
+/// @param {Number|String} $duration [$animate_base_duration] - The duration of the flip animation.
+/// @param {String} $timing_function [ease-in-out] - The timing function for the flip animation.
+/// @param {Number|String} $iteration_count [$animate_base_iteration_count] - The number of iterations the animation will run.
+/// @param {Number} $rotate_x [0] - The X-axis rotation factor.
+/// @param {Number} $rotate_y [1] - The Y-axis rotation factor.
+/// @param {Number} $rotate_z [0] - The Z-axis rotation factor.
+/// @param {Number|String} $rotate_start-angle [0] - The starting angle of rotation.
+/// @param {Number|String} $rotate_end-angle [360deg] - The ending angle of rotation.
+///
+@mixin animate_flip(
+    $duration: $animate_base_duration,
+    $timing_function: ease-in-out,
+    $iteration_count: $animate_base_iteration_count,
+    $rotate_x: 0,
+    $rotate_y: 1,
+    $rotate_z: 0,
+    $rotate_start-angle: 0,
+    $rotate_end-angle: 360deg
+) {
+    @include animate_base(
+        animate_flip,
+        $duration,
+        $timing_function,
+        $iteration_count,
+    );
+    @keyframes animate_flip {
+        0% { transform: rotate3d($rotate_x, $rotate_y, $rotate_z, $rotate_start-angle); }
+        100% { transform: rotate3d($rotate_x, $rotate_y, $rotate_z, $rotate_end-angle); }
+    }
+}

package/scss/mixins/animations/_float.scss

@@ -0,0 +1,126 @@
+// ============================================================================
+// Poster
+// ============================================================================
+
+////
+/// 
+/// Float Animations Mixin Module
+/// ===========================================================================
+/// 
+/// This module ...
+/// 
+/// 
+/// @group Animations
+/// @author Scape Agency
+/// @link https://move.gl
+/// @since 0.1.0 initial release
+/// @todo None
+/// @access public
+/// 
+////
+
+
+// ============================================================================
+// Use
+// ============================================================================
+
+@use "../dev" as *;
+@use "../variables" as *;
+@use "../keyframes" as *;
+@use "base" as *;
+
+
+// ============================================================================
+// Mixins
+// ============================================================================
+
+
+///
+/// Float Animation
+/// Creates a floating animation where the element moves up and down smoothly.
+/// 
+/// @name animate_float
+/// @param {Number|String} $start_position [0] - The starting position of the float animation.
+/// @param {Number|String} $mid_position [10px] - The mid-position of the float animation.
+/// @param {Number|String} $end_position [0] - The ending position of the float animation.
+/// @param {Number|String} $duration [$animate_base_duration_slow] - The duration of the float animation.
+/// @param {String} $timing_function [ease-in-out] - The timing function for the float animation.
+/// @param {Number|String} $iteration_count [$animate_base_iteration_count] - The number of iterations the animation will run.
+///
+@mixin animate_float(
+    $start_position: 0,
+    $mid_position: 10px,
+    $end_position: 0,
+    $duration: $animate_base_duration_slow,
+    $timing_function: ease-in-out,
+    $iteration_count: $animate_base_iteration_count
+) {
+    @include animate_base(
+        animate_float,
+        $duration,
+        $timing_function,
+        $iteration_count,
+    );
+    @keyframes animate_float {
+        0%, 100% { transform: translateY($start_position); }
+        50% { transform: translateY($mid_position); }
+    }
+}
+
+///
+/// Float with Horizontal Movement
+/// Creates a floating animation where the element moves horizontally.
+/// 
+/// @name animate_float_horizontal
+/// @param {Number|String} $horizontal-distance [10px] - The distance the element moves horizontally.
+/// @param {Number|String} $duration [$animate_base_duration_slow] - The duration of the float animation.
+/// @param {String} $timing_function [ease-in-out] - The timing function for the float animation.
+/// @param {Number|String} $iteration_count [$animate_base_iteration_count] - The number of iterations the animation will run.
+///
+@mixin animate_float_horizontal(
+    $horizontal-distance: 10px,
+    $duration: $animate_base_duration_slow,
+    $timing_function: ease-in-out,
+    $iteration_count: $animate_base_iteration_count
+) {
+    @include animate_base(
+        animate_float_horizontal,
+        $duration,
+        $timing_function,
+        $iteration_count,
+    );
+    @keyframes animate_float_horizontal {
+        0%, 100% { transform: translateX(0); }
+        50% { transform: translateX($horizontal-distance); }
+    }
+}
+
+
+///
+/// Float with Rotation
+/// Creates a floating animation where the element moves up and down with a
+/// rotation.
+/// 
+/// @name animate_float_rotate
+/// @param {Number|String} $rotation_angle [15deg] - The angle of rotation during the float animation.
+/// @param {Number|String} $duration [$animate_base_duration_slow] - The duration of the float animation.
+/// @param {String} $timing_function [ease-in-out] - The timing function for the float animation.
+/// @param {Number|String} $iteration_count [$animate_base_iteration_count] - The number of iterations the animation will run.
+///
+@mixin animate_float_rotate(
+    $rotation_angle: 15deg,
+    $duration: $animate_base_duration_slow,
+    $timing_function: ease-in-out,
+    $iteration_count: $animate_base_iteration_count
+) {
+    @include animate_base(
+        animate_float_rotate,
+        $duration,
+        $timing_function,
+        $iteration_count,
+    );
+    @keyframes animate_float_rotate {
+        0%, 100% { transform: translateY(0) rotate(0); }
+        50% { transform: translateY(-10px) rotate($rotation_angle); }
+    }
+}

package/scss/mixins/animations/_glow.scss

@@ -0,0 +1,179 @@
+// ============================================================================
+// Poster
+// ============================================================================
+
+////
+/// 
+/// Glow Animations Mixin Module
+/// ===========================================================================
+/// 
+/// This module ...
+/// 
+/// 
+/// @group Animations
+/// @author Scape Agency
+/// @link https://move.gl
+/// @since 0.1.0 initial release
+/// @todo None
+/// @access public
+/// 
+////
+
+
+// ============================================================================
+// Use
+// ============================================================================
+
+@use "sass:math";
+@use "../dev" as *;
+@use "../variables" as *;
+@use "../keyframes" as *;
+@use "base" as *;
+
+
+// ============================================================================
+// Mixins
+// ============================================================================
+
+
+
+
+
+///
+/// Glow Animation
+/// Creates a glowing effect by animating the box shadow of the element.
+/// @name animate_glow
+/// @param {Color} $color [$animate_base_color_glow_01] - The color of the glow.
+/// @param {Number|String} $start-shadow_size [5px] - The initial size of the shadow.
+/// @param {Number|String} $end-shadow_size [15px] - The maximum size of the shadow.
+/// @param {Number|String} $duration [$animate_base_duration] - The duration of the glow animation.
+/// @param {String} $timing_function [ease-in-out] - The timing function for the glow animation.
+/// @param {Number|String} $iteration_count [$animate_base_iteration_count] - The number of iterations the animation will run.
+///
+@mixin animate_glow(
+    $color: $animate_base_color_glow_01, 
+    $start-shadow_size: 5px, 
+    $end-shadow_size: 15px, 
+    $duration: $animate_base_duration, 
+    $timing_function: ease-in-out, 
+    $iteration_count: $animate_base_iteration_count
+) {
+    @include animate_base(
+        animate_glow,
+        $duration,
+        $timing_function,
+        $iteration_count,
+    );
+    @keyframes animate_glow {
+        0%, 100% { box-shadow: 0 0 $start-shadow-size 0 $color; }
+        50% { box-shadow: 0 0 $end-shadow-size 5px $color; }
+    }
+}
+
+
+// Pulse Glow Animation
+// ----------------------------------------------------------------------------
+
+///
+/// Pulse Glow Animation
+/// Creates a pulsing glow effect where the glow size changes over time.
+/// @name animate_glow_pulse
+/// @param {Color} $color [$animate_base_color_glow_01] - The color of the glow.
+/// @param {Number|String} $duration [$animate_base_duration] - The duration of the glow animation.
+/// @param {String} $timing_function [ease-in-out] - The timing function for the glow animation.
+/// @param {Number|String} $iteration_count [$animate_base_iteration_count] - The number of iterations the animation will run.
+///
+@mixin animate_glow_pulse(
+    $color: $animate_base_color_glow_01,
+    $duration: $animate_base_duration,
+    $timing_function: ease-in-out,
+    $iteration_count: $animate_base_iteration_count
+) {
+    @include animate_base(
+        animate_glow_pulse,
+        $duration,
+        $timing_function,
+        $iteration_count,
+    );
+    @keyframes animate_glow_pulse {
+        0%, 100% { box-shadow: 0 0 10px -5px $color; }
+        50% { box-shadow: 0 0 20px 0 $color; }
+    }
+}
+
+
+// Soft Glow Animation
+// ----------------------------------------------------------------------------
+
+///
+/// Soft Glow Animation
+/// Creates a soft glow effect with a slower and subtler animation.
+/// @name animate_glow_soft
+/// @param {Color} $color [$animate_base_color_glow_01] - The color of the glow.
+/// @param {Number|String} $duration [$animate_base_duration_slow] - The duration of the glow animation.
+/// @param {String} $timing_function [ease-in-out] - The timing function for the glow animation.
+/// @param {Number|String} $iteration_count [$animate_base_iteration_count] - The number of iterations the animation will run.
+///
+@mixin animate_glow_soft(
+    $color: $animate_base_color_glow_01, 
+    $duration: $animate_base_duration_slow,
+    $timing_function: ease-in-out, 
+    $iteration_count: $animate_base_iteration_count
+) {
+    @include animate_base(
+        animate_glow_soft,
+        $duration,
+        $timing_function,
+        $iteration_count,
+    );
+    @keyframes animate_glow_soft {
+        0%, 100% { box-shadow: 0 0 10px 0 rgba($color, 0.5); }
+        50% { box-shadow: 0 0 20px 5px rgba($color, 0.8); }
+    }
+}
+
+.animate_glow_soft {
+    @include animate_glow_soft($animate_base_color_glow_01);
+}
+
+// Multi-Color Glow Animation
+// ----------------------------------------------------------------------------
+
+
+///
+/// Multi-Color Glow Animation
+/// Creates a glow animation that cycles through multiple colors.
+/// @name animate_glow_multicolor
+/// @param {List} $colors [($animate_base_color_glow_01, $animate_base_color_glow_02, $animate_base_color_glow_03)] - A list of colors for the glow animation.
+/// @param {Number|String} $duration [$animate_base_duration_slow] - The duration of the glow animation.
+/// @param {String} $timing_function [linear] - The timing function for the glow animation.
+/// @param {Number|String} $iteration_count [$animate_base_iteration_count] - The number of iterations the animation will run.
+///
+@mixin animate_glow_multicolor(
+    $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
+) {
+    @include animate_base(
+        animate_glow_multicolor,
+        $duration,
+        $timing_function,
+        $iteration_count,
+    );
+    $total_colors: length($colors);
+    @keyframes animate_glow_multicolor {
+        @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);
+            }
+        }
+    }
+}