move.gl 0.0.1 → 0.0.2

package/dist/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/{scss → dist/scss}/mixins/animations/_float.scss

@@ -1,22 +1,18 @@
-// ============================================================================
-// Poster
-// ============================================================================
-
 ////
-/// 
+///
 /// Float Animations Mixin Module
 /// ===========================================================================
-/// 
-/// This 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
-/// @todo None
 /// @access public
-/// 
+///
 ////
 
 
@@ -24,8 +20,8 @@
 // Use
 // ============================================================================
 
-@use "../dev" as *;
-@use "../variables" as *;
+@use "../../dev" as *;
+@use "../../variables" as *;
 @use "../keyframes" as *;
 @use "base" as *;
 
@@ -37,15 +33,21 @@
 
 ///
 /// 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.
+/// @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,
@@ -67,15 +69,22 @@
     }
 }
 
+
 ///
-/// Float with Horizontal Movement
+/// Horizontal Float Animation
+/// ---------------------------------------------------------------------------
 /// 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.
+/// @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,
@@ -97,15 +106,21 @@
 
 
 ///
-/// Float with Rotation
+/// Float with Rotation Animation
+/// ---------------------------------------------------------------------------
 /// 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.
+/// @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,

package/{scss → dist/scss}/mixins/animations/_glow.scss

@@ -1,22 +1,18 @@
-// ============================================================================
-// Poster
-// ============================================================================
-
 ////
-/// 
+///
 /// Glow Animations Mixin Module
 /// ===========================================================================
-/// 
-/// This 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
-/// @todo None
 /// @access public
-/// 
+///
 ////
 
 
@@ -25,8 +21,9 @@
 // ============================================================================
 
 @use "sass:math";
-@use "../dev" as *;
-@use "../variables" as *;
+@use "sass:list";
+@use "../../dev" as *;
+@use "../../variables" as *;
 @use "../keyframes" as *;
 @use "base" as *;
 
@@ -36,26 +33,30 @@
 // ============================================================================
 
 
-
-
-
 ///
 /// 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.
+/// @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, 
+    $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(
@@ -65,23 +66,27 @@
         $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; }
+        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.
+/// @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,
@@ -102,22 +107,26 @@
 }
 
 
-// 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.
+/// @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, 
+    $color: $animate_base_color_glow_01,
     $duration: $animate_base_duration_slow,
-    $timing_function: ease-in-out, 
+    $timing_function: ease-in-out,
     $iteration_count: $animate_base_iteration_count
 ) {
     @include animate_base(
@@ -136,18 +145,22 @@
     @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.
+/// @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: (
@@ -165,14 +178,12 @@
         $timing_function,
         $iteration_count,
     );
-    $total_colors: length($colors);
+    $total_colors: list.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);
+            #{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);
             }
         }
     }