move.gl 0.0.1 → 0.0.2

package/dist/scss/mixins/animations/_spin.scss

@@ -0,0 +1,322 @@
+////
+///
+/// Spin Animations Mixin Module
+/// ===========================================================================
+///
+/// Provides SCSS mixins for creating rotation animations. Includes basic spin,
+/// reverse spin, spin with scaling effects, pulsing spin, and spin with flip
+/// for various visual 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
+// ============================================================================
+
+///
+/// Spin Animation
+/// ---------------------------------------------------------------------------
+/// Creates a continuous rotation animation.
+///
+/// @name animate_spin
+/// @param {Angle} $start_angle [0deg] - Starting rotation angle
+/// @param {Angle} $end_angle [360deg] - Ending rotation angle
+/// @param {Time} $duration [$animate_base_duration] - Animation duration
+/// @param {String} $timing_function [linear] - Timing function
+/// @param {Number|String} $iteration_count [$animate_base_iteration_count] - Iterations
+///
+/// @example scss - Basic usage
+///   .loader {
+///     @include animate_spin;
+///   }
+///
+/// @example scss - Slower spin
+///   .slow-spinner {
+///     @include animate_spin($duration: 3s);
+///   }
+///
+@mixin animate_spin(
+    $start_angle: 0deg,
+    $end_angle: 360deg,
+    $duration: $animate_base_duration,
+    $timing_function: linear,
+    $iteration_count: $animate_base_iteration_count
+) {
+    @include animate_base(
+        animate_spin,
+        $duration,
+        $timing_function,
+        $iteration_count
+    );
+    @include keyframes_spin($start_angle, $end_angle);
+}
+
+
+///
+/// Spin Reverse Animation
+/// ---------------------------------------------------------------------------
+/// Creates a counter-clockwise rotation animation.
+///
+/// @name animate_spin_reverse
+/// @param {Angle} $start_angle [360deg] - Starting rotation angle
+/// @param {Angle} $end_angle [0deg] - Ending rotation angle
+/// @param {Time} $duration [$animate_base_duration] - Animation duration
+/// @param {String} $timing_function [linear] - Timing function
+/// @param {Number|String} $iteration_count [$animate_base_iteration_count] - Iterations
+///
+@mixin animate_spin_reverse(
+    $start_angle: 360deg,
+    $end_angle: 0deg,
+    $duration: $animate_base_duration,
+    $timing_function: linear,
+    $iteration_count: $animate_base_iteration_count
+) {
+    @include animate_base(
+        animate_spin_reverse,
+        $duration,
+        $timing_function,
+        $iteration_count
+    );
+    @include keyframes_spin_reverse($start_angle, $end_angle);
+}
+
+
+///
+/// Spin and Grow Animation
+/// ---------------------------------------------------------------------------
+/// Creates a spinning animation combined with scaling for a dynamic effect.
+///
+/// @name animate_spin_grow
+/// @param {Number} $scale [1.2] - Maximum scale during rotation
+/// @param {Time} $duration [$animate_base_duration_slow] - Animation duration
+/// @param {String} $timing_function [ease-in-out] - Timing function
+/// @param {Number|String} $iteration_count [$animate_base_iteration_count] - Iterations
+///
+@mixin animate_spin_grow(
+    $scale: 1.2,
+    $duration: $animate_base_duration_slow,
+    $timing_function: $animate_base_timing_function,
+    $iteration_count: $animate_base_iteration_count
+) {
+    @include animate_base(
+        animate_spin_grow,
+        $duration,
+        $timing_function,
+        $iteration_count
+    );
+    @include keyframes_spin_grow($scale);
+}
+
+
+///
+/// Spin and Shrink Animation
+/// ---------------------------------------------------------------------------
+/// Creates a spinning animation combined with shrinking for a dynamic effect.
+///
+/// @name animate_spin_shrink
+/// @param {Number} $scale [0.8] - Minimum scale during rotation
+/// @param {Time} $duration [$animate_base_duration_slow] - Animation duration
+/// @param {String} $timing_function [ease-in-out] - Timing function
+/// @param {Number|String} $iteration_count [$animate_base_iteration_count] - Iterations
+///
+@mixin animate_spin_shrink(
+    $scale: 0.8,
+    $duration: $animate_base_duration_slow,
+    $timing_function: $animate_base_timing_function,
+    $iteration_count: $animate_base_iteration_count
+) {
+    @include animate_base(
+        animate_spin_shrink,
+        $duration,
+        $timing_function,
+        $iteration_count
+    );
+    @include keyframes_spin_shrink($scale);
+}
+
+
+///
+/// Spin Pulse Animation
+/// ---------------------------------------------------------------------------
+/// Creates a spinning animation with pulsing scale for a rhythmic effect.
+///
+/// @name animate_spin_pulse
+/// @param {Number} $scale_min [1] - Minimum scale
+/// @param {Number} $scale_max [1.1] - Maximum scale
+/// @param {Angle} $rotation_angle [360deg] - Full rotation angle
+/// @param {Time} $duration [$animate_base_duration] - Animation duration
+/// @param {String} $timing_function [linear] - Timing function
+/// @param {Number|String} $iteration_count [$animate_base_iteration_count] - Iterations
+///
+@mixin animate_spin_pulse(
+    $scale_min: 1,
+    $scale_max: 1.1,
+    $rotation_angle: 360deg,
+    $duration: $animate_base_duration,
+    $timing_function: linear,
+    $iteration_count: $animate_base_iteration_count
+) {
+    @include animate_base(
+        animate_spin_pulse,
+        $duration,
+        $timing_function,
+        $iteration_count
+    );
+    @include keyframes_spin_pulse($scale_min, $scale_max, $rotation_angle);
+}
+
+
+///
+/// Spin and Flip Animation
+/// ---------------------------------------------------------------------------
+/// Creates a spinning animation combined with a 3D flip effect.
+///
+/// @name animate_spin_flip
+/// @param {Angle} $rotation_angle [360deg] - Rotation angle
+/// @param {Angle} $flip_angle [180deg] - 3D flip angle on Y-axis
+/// @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_spin_flip(
+    $rotation_angle: 360deg,
+    $flip_angle: 180deg,
+    $duration: $animate_base_duration,
+    $timing_function: $animate_base_timing_function,
+    $iteration_count: $animate_base_iteration_count
+) {
+    @include animate_base(
+        animate_spin_flip,
+        $duration,
+        $timing_function,
+        $iteration_count
+    );
+    @include keyframes_spin_flip($rotation_angle, $flip_angle);
+}
+
+
+///
+/// Spin Wobble Animation
+/// ---------------------------------------------------------------------------
+/// Creates a spinning animation with a slight wobble effect.
+///
+/// @name animate_spin_wobble
+/// @param {Angle} $wobble_angle [5deg] - Wobble tilt angle
+/// @param {Time} $duration [$animate_base_duration] - Animation duration
+/// @param {String} $timing_function [linear] - Timing function
+/// @param {Number|String} $iteration_count [$animate_base_iteration_count] - Iterations
+///
+@mixin animate_spin_wobble(
+    $wobble_angle: 5deg,
+    $duration: $animate_base_duration,
+    $timing_function: linear,
+    $iteration_count: $animate_base_iteration_count
+) {
+    @include animate_base(
+        animate_spin_wobble,
+        $duration,
+        $timing_function,
+        $iteration_count
+    );
+    @include keyframes_spin_wobble($wobble_angle);
+}
+
+
+///
+/// Spin Loader Animation
+/// ---------------------------------------------------------------------------
+/// Creates a loader-style spinning animation (full 360 degree rotation).
+///
+/// @name animate_spin_loader
+/// @param {Time} $duration [$animate_base_duration] - Animation duration
+/// @param {String} $timing_function [linear] - Timing function
+/// @param {Number|String} $iteration_count [$animate_base_iteration_count] - Iterations
+///
+@mixin animate_spin_loader(
+    $duration: $animate_base_duration,
+    $timing_function: linear,
+    $iteration_count: $animate_base_iteration_count
+) {
+    @include animate_base(
+        animate_spin_loader,
+        $duration,
+        $timing_function,
+        $iteration_count
+    );
+    @include keyframes_spin_loader();
+}
+
+
+///
+/// Spin X Animation
+/// ---------------------------------------------------------------------------
+/// Creates a rotation around the X-axis (horizontal flip).
+///
+/// @name animate_spin_x
+/// @param {Angle} $start_angle [0deg] - Starting rotation angle
+/// @param {Angle} $end_angle [360deg] - Ending rotation angle
+/// @param {Time} $duration [$animate_base_duration] - Animation duration
+/// @param {String} $timing_function [linear] - Timing function
+/// @param {Number|String} $iteration_count [$animate_base_iteration_count] - Iterations
+///
+@mixin animate_spin_x(
+    $start_angle: 0deg,
+    $end_angle: 360deg,
+    $duration: $animate_base_duration,
+    $timing_function: linear,
+    $iteration_count: $animate_base_iteration_count
+) {
+    @include animate_base(
+        animate_spin_x,
+        $duration,
+        $timing_function,
+        $iteration_count
+    );
+    @include keyframes_spin_x($start_angle, $end_angle);
+}
+
+
+///
+/// Spin Y Animation
+/// ---------------------------------------------------------------------------
+/// Creates a rotation around the Y-axis (vertical flip).
+///
+/// @name animate_spin_y
+/// @param {Angle} $start_angle [0deg] - Starting rotation angle
+/// @param {Angle} $end_angle [360deg] - Ending rotation angle
+/// @param {Time} $duration [$animate_base_duration] - Animation duration
+/// @param {String} $timing_function [linear] - Timing function
+/// @param {Number|String} $iteration_count [$animate_base_iteration_count] - Iterations
+///
+@mixin animate_spin_y(
+    $start_angle: 0deg,
+    $end_angle: 360deg,
+    $duration: $animate_base_duration,
+    $timing_function: linear,
+    $iteration_count: $animate_base_iteration_count
+) {
+    @include animate_base(
+        animate_spin_y,
+        $duration,
+        $timing_function,
+        $iteration_count
+    );
+    @include keyframes_spin_y($start_angle, $end_angle);
+}

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

@@ -1,22 +1,18 @@
-// ============================================================================
-// Poster
-// ============================================================================
-
 ////
-/// 
+///
 /// Sway Animations Mixin Module
 /// ===========================================================================
-/// 
-/// This module ...
-/// 
-/// 
+///
+/// Provides gentle swaying animations that simulate wind or pendulum motion.
+/// Includes variants for different speeds and depths. Ideal for trees,
+/// flags, hanging objects, and relaxed 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 *;
 
@@ -35,21 +31,26 @@
 // ============================================================================
 
 
-
-
 ///
 /// Sway Animation
+/// ---------------------------------------------------------------------------
 /// Creates a swaying motion animation.
+///
 /// @name animate_sway
-/// @param {Angle} $angle [5deg] - The maximum angle to sway.
-/// @param {Duration} $duration [$animate_base_duration/// 2] - The duration of the sway animation.
-/// @param {String} $timing_function [ease-in-out] - The timing function for the sway animation.
-/// @param {Number|String} $iteration_count [$animate_base_iteration_count] - The number of iterations the animation will run.
+/// @param {Angle} $angle [5deg] - Maximum angle to sway
+/// @param {Time} $duration - Animation duration
+/// @param {String} $timing_function [ease-in-out] - Timing function
+/// @param {Number|String} $iteration_count - Number of iterations
+///
+/// @example scss - Basic usage
+///   .tree {
+///     @include animate_sway;
+///   }
 ///
 @mixin animate_sway(
-    $angle: 5deg, 
+    $angle: 5deg,
     $duration: $animate_base_duration * 2,
-    $timing_function: ease-in-out, 
+    $timing_function: ease-in-out,
     $iteration_count: $animate_base_iteration_count
 ) {
     @include animate_base(
@@ -58,10 +59,7 @@
         $timing_function,
         $iteration_count,
     );
-    @keyframes animate_sway {
-        0%, 100% { transform: rotate(0deg); }
-        50% { transform: rotate($angle); }
-    }
+    @include keyframes_animate_sway($angle);
 }
 
 
@@ -79,9 +77,9 @@
 /// @param {Number|String} $iteration_count [$animate_base_iteration_count] - The number of iterations the animation will run.
 ///
 @mixin animate_sway_slow(
-    $angle: 3deg, 
+    $angle: 3deg,
     $duration: $animate_base_duration_slow * 2,
-    $timing_function: ease-in-out, 
+    $timing_function: ease-in-out,
     $iteration_count: $animate_base_iteration_count
 ) {
     @include animate_base(
@@ -90,10 +88,7 @@
         $timing_function,
         $iteration_count,
     );
-    @keyframes animate_sway_slow {
-        0%, 100% { transform: rotate(0deg); }
-        50% { transform: rotate($angle); }
-    }
+    @include keyframes_animate_sway_slow($angle);
 }
 
 
@@ -111,9 +106,9 @@
 /// @param {Number|String} $iteration_count [$animate_base_iteration_count] - The number of iterations the animation will run.
 ///
 @mixin animate_sway_fast(
-    $angle: 10deg, 
+    $angle: 10deg,
     $duration: $animate_base_duration_fast * 2,
-    $timing_function: ease-in-out, 
+    $timing_function: ease-in-out,
     $iteration_count: $animate_base_iteration_count
 ) {
     @include animate_base(
@@ -122,10 +117,7 @@
         $timing_function,
         $iteration_count,
     );
-    @keyframes animate_sway_fast {
-        0%, 100% { transform: rotate(0deg); }
-        50% { transform: rotate($angle); }
-    }
+    @include keyframes_animate_sway_fast($angle);
 }
 
 
@@ -143,9 +135,9 @@
 /// @param {Number|String} $iteration_count [$animate_base_iteration_count] - The number of iterations the animation will run.
 ///
 @mixin animate_sway_fade(
-    $angle: 5deg, 
+    $angle: 5deg,
     $duration: $animate_base_duration * 2,
-    $timing_function: ease-in-out, 
+    $timing_function: ease-in-out,
     $iteration_count: $animate_base_iteration_count
 ) {
     @include animate_base(
@@ -154,14 +146,5 @@
         $timing_function,
         $iteration_count,
     );
-    @keyframes animate_sway_fade {
-        0%, 100% { 
-            transform: rotate(0deg); 
-            opacity: 1;
-        }
-        50% { 
-            transform: rotate($angle); 
-            opacity: 0.5;
-        }
-    }
+    @include keyframes_animate_sway_fade($angle);
 }

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

@@ -1,22 +1,18 @@
-// ============================================================================
-// Poster
-// ============================================================================
-
 ////
-/// 
+///
 /// Swing Animations Mixin Module
 /// ===========================================================================
-/// 
-/// This module ...
-/// 
-/// 
+///
+/// Provides pendulum-style swinging animations with customizable angles.
+/// Includes variants for speed, origin point, and swing direction. Useful
+/// for hanging elements, bell effects, and playful UI interactions.
+///
 /// @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 *;
 
@@ -35,28 +31,30 @@
 // ============================================================================
 
 
-
-
-// Swing Animation
-// ----------------------------------------------------------------------------
-
 ///
 /// Swing Animation
+/// ---------------------------------------------------------------------------
 /// Creates a swinging motion animation.
+///
 /// @name animate_swing
-/// @param {Angle} $angle [15deg] - The maximum angle to swing.
-/// @param {Duration} $duration [$animate_base_duration] - The duration of the swing animation.
-/// @param {String} $timing_function [ease-in-out] - The timing function for the swing animation.
-/// @param {Number|String} $iteration_count [$animate_base_iteration_count] - The number of iterations the animation will run.
+/// @param {Angle} $angle [15deg] - Maximum angle to swing
+/// @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
+///   .pendulum {
+///     @include animate_swing;
+///   }
 ///
 @mixin animate_swing(
-    $angle: 15deg, 
-    $duration: $animate_base_duration, 
-    $timing_function: ease-in-out, 
+    $angle: 15deg,
+    $duration: $animate_base_duration,
+    $timing_function: ease-in-out,
     $iteration_count: $animate_base_iteration_count
 ) {
     @include animate_base(
-        animate_swing, 
+        animate_swing,
         $duration,
         $timing_function,
         $iteration_count,
@@ -84,9 +82,9 @@
 /// @param {Number|String} $iteration_count [$animate_base_iteration_count] - The number of iterations the animation will run.
 ///
 @mixin animate_swing_slow(
-    $angle: 10deg, 
+    $angle: 10deg,
     $duration: $animate_base_duration_slow,
-    $timing_function: ease-in-out, 
+    $timing_function: ease-in-out,
     $iteration_count: $animate_base_iteration_count
 ) {
     @include animate_base(
@@ -120,9 +118,9 @@
 /// @param {Number|String} $iteration_count [$animate_base_iteration_count] - The number of iterations the animation will run.
 ///
 @mixin animate_swing_fast(
-    $angle: 20deg, 
-    $duration: $animate_base_duration_fast, 
-    $timing_function: ease-in-out, 
+    $angle: 20deg,
+    $duration: $animate_base_duration_fast,
+    $timing_function: ease-in-out,
     $iteration_count: $animate_base_iteration_count
 ) {
     @include animate_base(
@@ -156,9 +154,9 @@
 /// @param {Number|String} $iteration_count [$animate_base_iteration_count] - The number of iterations the animation will run.
 ///
 @mixin animate_swing_fade(
-    $angle: 15deg, 
-    $duration: $animate_base_duration, 
-    $timing_function: ease-in-out, 
+    $angle: 15deg,
+    $duration: $animate_base_duration,
+    $timing_function: ease-in-out,
     $iteration_count: $animate_base_iteration_count
 ) {
     @include animate_base(
@@ -168,12 +166,12 @@
         $iteration_count,
     );
     @keyframes animate_swing_fade {
-        0%, 100% { 
-            transform: rotate(0deg); 
+        0%, 100% {
+            transform: rotate(0deg);
             opacity: 1;
         }
-        50% { 
-            transform: rotate($angle); 
+        50% {
+            transform: rotate($angle);
             opacity: 0.5;
         }
     }
@@ -190,58 +188,58 @@
 //       -webkit-transform: rotate3d(0, 0, 1, 15deg);
 //       transform: rotate3d(0, 0, 1, 15deg);
 //     }
-  
+
 //     40% {
 //       -webkit-transform: rotate3d(0, 0, 1, -10deg);
 //       transform: rotate3d(0, 0, 1, -10deg);
 //     }
-  
+
 //     60% {
 //       -webkit-transform: rotate3d(0, 0, 1, 5deg);
 //       transform: rotate3d(0, 0, 1, 5deg);
 //     }
-  
+
 //     80% {
 //       -webkit-transform: rotate3d(0, 0, 1, -5deg);
 //       transform: rotate3d(0, 0, 1, -5deg);
 //     }
-  
+
 //     100% {
 //       -webkit-transform: rotate3d(0, 0, 1, 0deg);
 //       transform: rotate3d(0, 0, 1, 0deg);
 //     }
 //   }
-  
+
 //   @keyframes swing {
 //     20% {
 //       -webkit-transform: rotate3d(0, 0, 1, 15deg);
 //       transform: rotate3d(0, 0, 1, 15deg);
 //     }
-  
+
 //     40% {
 //       -webkit-transform: rotate3d(0, 0, 1, -10deg);
 //       transform: rotate3d(0, 0, 1, -10deg);
 //     }
-  
+
 //     60% {
 //       -webkit-transform: rotate3d(0, 0, 1, 5deg);
 //       transform: rotate3d(0, 0, 1, 5deg);
 //     }
-  
+
 //     80% {
 //       -webkit-transform: rotate3d(0, 0, 1, -5deg);
 //       transform: rotate3d(0, 0, 1, -5deg);
 //     }
-  
+
 //     100% {
 //       -webkit-transform: rotate3d(0, 0, 1, 0deg);
 //       transform: rotate3d(0, 0, 1, 0deg);
 //     }
 //   }
-  
+
 //   .swing {
 //     -webkit-transform-origin: top center;
 //     transform-origin: top center;
 //     -webkit-animation-name: swing;
 //     animation-name: swing;
-//   }
+//   }