move.gl 0.0.1 → 0.0.2

package/src/scss/mixins/animations/_flip.scss

@@ -0,0 +1,251 @@
+////
+///
+/// Flip Animations Mixin Module
+/// ===========================================================================
+///
+/// Provides 3D flip animations that rotate elements around X, Y, or Z axes.
+/// Supports customizable rotation angles, axis combinations, and timing.
+/// Useful for card flips, page transitions, and reveal effects.
+///
+/// @group Animations
+/// @author Scape Agency
+/// @link https://move.gl
+/// @since 0.1.0 initial release
+/// @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] - Animation duration.
+/// @param {String} $timing_function [ease-in-out] - Timing function.
+/// @param {Number|String} $iteration_count [$animate_base_iteration_count] - Iterations.
+/// @param {Number} $rotate_x [0] - X-axis rotation factor.
+/// @param {Number} $rotate_y [1] - Y-axis rotation factor.
+/// @param {Number} $rotate_z [0] - Z-axis rotation factor.
+/// @param {Angle} $rotate_start_angle [0] - Starting angle.
+/// @param {Angle} $rotate_end_angle [360deg] - Ending angle.
+///
+@mixin animate_flip(
+    $duration: $animate_base_duration,
+    $timing_function: $animate_base_timing_function,
+    $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
+    );
+    @include keyframes_flip($rotate_x, $rotate_y, $rotate_z, $rotate_start_angle, $rotate_end_angle);
+}
+
+
+///
+/// Flip In X Animation
+/// ---------------------------------------------------------------------------
+/// Creates a flip-in animation around the X-axis.
+///
+/// @name animate_flip_in_x
+/// @param {Angle} $start_angle [90deg] - Starting angle.
+/// @param {Time} $duration [$animate_base_duration] - Animation duration.
+/// @param {String} $timing_function [ease-out] - Timing function.
+///
+@mixin animate_flip_in_x(
+    $start_angle: 90deg,
+    $duration: $animate_base_duration,
+    $timing_function: ease-out
+) {
+    @include animate_base(
+        animate_flip_in_x,
+        $duration,
+        $timing_function,
+        1,
+        $fill_mode: both
+    );
+    @include keyframes_flip_in_x($start_angle);
+}
+
+
+///
+/// Flip In Y Animation
+/// ---------------------------------------------------------------------------
+/// Creates a flip-in animation around the Y-axis.
+///
+/// @name animate_flip_in_y
+/// @param {Angle} $start_angle [90deg] - Starting angle.
+/// @param {Time} $duration [$animate_base_duration] - Animation duration.
+/// @param {String} $timing_function [ease-out] - Timing function.
+///
+@mixin animate_flip_in_y(
+    $start_angle: 90deg,
+    $duration: $animate_base_duration,
+    $timing_function: ease-out
+) {
+    @include animate_base(
+        animate_flip_in_y,
+        $duration,
+        $timing_function,
+        1,
+        $fill_mode: both
+    );
+    @include keyframes_flip_in_y($start_angle);
+}
+
+
+///
+/// Flip Out X Animation
+/// ---------------------------------------------------------------------------
+/// Creates a flip-out animation around the X-axis.
+///
+/// @name animate_flip_out_x
+/// @param {Angle} $end_angle [90deg] - Ending angle.
+/// @param {Time} $duration [$animate_base_duration] - Animation duration.
+/// @param {String} $timing_function [ease-in] - Timing function.
+///
+@mixin animate_flip_out_x(
+    $end_angle: 90deg,
+    $duration: $animate_base_duration,
+    $timing_function: ease-in
+) {
+    @include animate_base(
+        animate_flip_out_x,
+        $duration,
+        $timing_function,
+        1,
+        $fill_mode: forwards
+    );
+    @include keyframes_flip_out_x($end_angle);
+}
+
+
+///
+/// Flip Out Y Animation
+/// ---------------------------------------------------------------------------
+/// Creates a flip-out animation around the Y-axis.
+///
+/// @name animate_flip_out_y
+/// @param {Angle} $end_angle [90deg] - Ending angle.
+/// @param {Time} $duration [$animate_base_duration] - Animation duration.
+/// @param {String} $timing_function [ease-in] - Timing function.
+///
+@mixin animate_flip_out_y(
+    $end_angle: 90deg,
+    $duration: $animate_base_duration,
+    $timing_function: ease-in
+) {
+    @include animate_base(
+        animate_flip_out_y,
+        $duration,
+        $timing_function,
+        1,
+        $fill_mode: forwards
+    );
+    @include keyframes_flip_out_y($end_angle);
+}
+
+
+///
+/// Card Flip Animation
+/// ---------------------------------------------------------------------------
+/// Creates a card flip with perspective effect.
+///
+/// @name animate_card_flip
+/// @param {Length} $perspective [1000px] - 3D perspective distance.
+/// @param {Time} $duration [$animate_base_duration] - Animation duration.
+/// @param {String} $timing_function [ease-in-out] - Timing function.
+/// @param {Number|String} $iteration_count [$animate_base_iteration_count] - Iterations.
+///
+@mixin animate_card_flip(
+    $perspective: 1000px,
+    $duration: $animate_base_duration,
+    $timing_function: $animate_base_timing_function,
+    $iteration_count: $animate_base_iteration_count
+) {
+    perspective: $perspective;
+
+    @include animate_base(
+        animate_card_flip,
+        $duration,
+        $timing_function,
+        $iteration_count
+    );
+    @include keyframes_card_flip();
+}
+
+
+///
+/// Flip with Scale Animation
+/// ---------------------------------------------------------------------------
+/// Creates a flip combined with scaling effect.
+///
+/// @name animate_flip_scale
+/// @param {Number} $scale [1.1] - Scale factor at midpoint.
+/// @param {Time} $duration [$animate_base_duration] - Animation duration.
+/// @param {String} $timing_function [ease-in-out] - Timing function.
+/// @param {Number|String} $iteration_count [$animate_base_iteration_count] - Iterations.
+///
+@mixin animate_flip_scale(
+    $scale: 1.1,
+    $duration: $animate_base_duration,
+    $timing_function: $animate_base_timing_function,
+    $iteration_count: $animate_base_iteration_count
+) {
+    @include animate_base(
+        animate_flip_scale,
+        $duration,
+        $timing_function,
+        $iteration_count
+    );
+    @include keyframes_flip_scale($scale);
+}
+
+
+///
+/// Diagonal Flip Animation
+/// ---------------------------------------------------------------------------
+/// Creates a flip along a diagonal axis.
+///
+/// @name animate_flip_diagonal
+/// @param {Time} $duration [$animate_base_duration] - Animation duration.
+/// @param {String} $timing_function [ease-in-out] - Timing function.
+/// @param {Number|String} $iteration_count [$animate_base_iteration_count] - Iterations.
+///
+@mixin animate_flip_diagonal(
+    $duration: $animate_base_duration,
+    $timing_function: $animate_base_timing_function,
+    $iteration_count: $animate_base_iteration_count
+) {
+    @include animate_base(
+        animate_flip_diagonal,
+        $duration,
+        $timing_function,
+        $iteration_count
+    );
+    @include keyframes_flip_diagonal();
+}

package/src/scss/mixins/animations/_float.scss

@@ -0,0 +1,141 @@
+////
+///
+/// Float Animations Mixin Module
+/// ===========================================================================
+///
+/// Provides gentle floating animations that simulate buoyancy and levitation.
+/// Includes vertical, horizontal, and combined float patterns with optional
+/// rotation. Perfect for background elements, icons, and ambient effects.
+///
+/// @group Animations
+/// @author Scape Agency
+/// @link https://move.gl
+/// @since 0.1.0 initial release
+/// @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 {Length} $start_position [0] - Starting position of the animation
+/// @param {Length} $mid_position [10px] - Mid-position of the animation
+/// @param {Length} $end_position [0] - Ending position of the animation
+/// @param {Time} $duration [$animate_base_duration_slow] - Animation duration
+/// @param {String} $timing_function [ease-in-out] - Timing function
+/// @param {Number|String} $iteration_count - Number of iterations
+///
+/// @example scss - Basic usage
+///   .cloud {
+///     @include animate_float;
+///   }
+///
+@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); }
+    }
+}
+
+
+///
+/// Horizontal Float Animation
+/// ---------------------------------------------------------------------------
+/// Creates a floating animation where the element moves horizontally.
+///
+/// @name animate_float_horizontal
+/// @param {Length} $horizontal-distance [10px] - Horizontal movement distance
+/// @param {Time} $duration [$animate_base_duration_slow] - Animation duration
+/// @param {String} $timing_function [ease-in-out] - Timing function
+/// @param {Number|String} $iteration_count - Number of iterations
+///
+/// @example scss - Usage
+///   .icon {
+///     @include animate_float_horizontal;
+///   }
+///
+@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 Animation
+/// ---------------------------------------------------------------------------
+/// Creates a floating animation where the element moves up and down with a
+/// rotation.
+///
+/// @name animate_float_rotate
+/// @param {Angle} $rotation_angle [15deg] - Rotation angle during float
+/// @param {Time} $duration [$animate_base_duration_slow] - Animation duration
+/// @param {String} $timing_function [ease-in-out] - Timing function
+/// @param {Number|String} $iteration_count - Number of iterations
+///
+/// @example scss - Usage
+///   .leaf {
+///     @include animate_float_rotate;
+///   }
+///
+@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/src/scss/mixins/animations/_glow.scss

@@ -0,0 +1,190 @@
+////
+///
+/// Glow Animations Mixin Module
+/// ===========================================================================
+///
+/// Provides glowing effects using animated box-shadows. Includes pulse glow,
+/// color shifting, and multi-color rainbow variants. Perfect for buttons,
+/// highlights, and emphasis effects.
+///
+/// @group Animations
+/// @author Scape Agency
+/// @link https://move.gl
+/// @since 0.1.0 initial release
+/// @access public
+///
+////
+
+
+// ============================================================================
+// Use
+// ============================================================================
+
+@use "sass:math";
+@use "sass:list";
+@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 {Length} $start_shadow_size [5px] - Initial shadow size
+/// @param {Length} $end_shadow_size [15px] - Maximum shadow size
+/// @param {Time} $duration [$animate_base_duration] - Animation duration
+/// @param {String} $timing_function [ease-in-out] - Timing function
+/// @param {Number|String} $iteration_count - Number of iterations
+///
+/// @example scss - Basic usage
+///   .button {
+///     @include animate_glow;
+///   }
+///
+@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
+/// ---------------------------------------------------------------------------
+/// 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 {Time} $duration [$animate_base_duration] - Animation duration
+/// @param {String} $timing_function [ease-in-out] - Timing function
+/// @param {Number|String} $iteration_count - Number of iterations
+///
+/// @example scss - Usage
+///   .notification {
+///     @include animate_glow_pulse;
+///   }
+///
+@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
+/// ---------------------------------------------------------------------------
+/// 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 {Time} $duration [$animate_base_duration_slow] - Animation duration
+/// @param {String} $timing_function [ease-in-out] - Timing function
+/// @param {Number|String} $iteration_count - Number of iterations
+///
+/// @example scss - Usage
+///   .card {
+///     @include animate_glow_soft;
+///   }
+///
+@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
+/// ---------------------------------------------------------------------------
+/// Creates a glow animation that cycles through multiple colors.
+///
+/// @name animate_glow_multicolor
+/// @param {List} $colors - A list of colors for the glow animation
+/// @param {Time} $duration [$animate_base_duration_slow] - Animation duration
+/// @param {String} $timing_function [linear] - Timing function
+/// @param {Number|String} $iteration_count - Number of iterations
+///
+/// @example scss - Usage
+///   .rainbow-button {
+///     @include animate_glow_multicolor;
+///   }
+///
+@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: list.length($colors);
+    @keyframes animate_glow_multicolor {
+        @for $i from 1 through $total_colors {
+            #{math.percentage(math.div(($i - 1), $total_colors))},
+            #{math.percentage(math.div($i, $total_colors))} {
+                    box-shadow: 0 0 10px 5px list.nth($colors, $i);
+            }
+        }
+    }
+}