move.gl 0.0.1 → 0.0.2

package/dist/scss/mixins/animations/_lightspeed.scss

@@ -0,0 +1,135 @@
+////
+///
+/// Lightspeed Animations Mixin Module
+/// ===========================================================================
+///
+/// Provides high-speed entrance and exit animations with skew effects.
+/// Creates dramatic, sci-fi style transitions. Ideal for dynamic content
+/// reveals and attention-grabbing entrances.
+///
+/// @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
+// ============================================================================
+
+
+///
+/// Lightspeed In Animation
+/// ---------------------------------------------------------------------------
+/// High-speed entrance from the right with skew effect.
+///
+/// @name animate_lightspeed_in
+/// @param {Length} $distance [100%] - Starting distance offscreen
+/// @param {Angle} $skew_start [-30deg] - Initial skew angle
+/// @param {Time} $duration [$animate_base_duration] - Animation duration
+/// @param {String} $timing_function [ease-out] - Timing function
+///
+/// @example scss - Basic usage
+///   .hero-title {
+///     @include animate_lightspeed_in;
+///   }
+///
+@mixin animate_lightspeed_in(
+    $distance: 100%,
+    $skew_start: -30deg,
+    $duration: $animate_base_duration,
+    $timing_function: ease-out
+) {
+    @include animate_base(
+        animate_lightspeed_in,
+        $duration,
+        $timing_function,
+        1
+    );
+    @include keyframes_animate_lightspeed_in($distance, $skew_start);
+}
+
+
+///
+/// Lightspeed Out Animation
+/// ---------------------------------------------------------------------------
+/// High-speed exit to the right with skew effect.
+///
+/// @name animate_lightspeed_out
+/// @param {Length} $distance [100%] - Ending distance offscreen
+/// @param {Angle} $skew_end [30deg] - Final skew angle
+/// @param {Time} $duration [$animate_base_duration] - Animation duration
+/// @param {String} $timing_function [ease-in] - Timing function
+///
+/// @example scss - Usage
+///   .closing-panel {
+///     @include animate_lightspeed_out;
+///   }
+///
+@mixin animate_lightspeed_out(
+    $distance: 100%,
+    $skew_end: 30deg,
+    $duration: $animate_base_duration,
+    $timing_function: ease-in
+) {
+    @include animate_base(
+        animate_lightspeed_out,
+        $duration,
+        $timing_function,
+        1
+    );
+    @include keyframes_animate_lightspeed_out($distance, $skew_end);
+}
+
+
+///
+/// Lightspeed In Left Animation
+/// ---------------------------------------------------------------------------
+/// High-speed entrance from the left.
+///
+/// @name animate_lightspeed_in_left
+/// @param {Time} $duration [$animate_base_duration] - Animation duration
+///
+/// @example scss - Usage
+///   .slide-title {
+///     @include animate_lightspeed_in_left;
+///   }
+///
+@mixin animate_lightspeed_in_left(
+    $duration: $animate_base_duration
+) {
+    @include animate_lightspeed_in(-100%, 30deg, $duration);
+}
+
+
+///
+/// Lightspeed Out Left Animation
+/// ---------------------------------------------------------------------------
+/// High-speed exit to the left.
+///
+/// @name animate_lightspeed_out_left
+/// @param {Time} $duration [$animate_base_duration] - Animation duration
+///
+/// @example scss - Usage
+///   .exit-panel {
+///     @include animate_lightspeed_out_left;
+///   }
+///
+@mixin animate_lightspeed_out_left(
+    $duration: $animate_base_duration
+) {
+    @include animate_lightspeed_out(-100%, -30deg, $duration);
+}

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

@@ -1,22 +1,18 @@
-// ============================================================================
-// Poster
-// ============================================================================
-
 ////
-/// 
+///
 /// Nod Animations Mixin Module
 /// ===========================================================================
-/// 
-/// This module ...
-/// 
-/// 
+///
+/// Provides nodding animations that rotate elements on the X-axis.
+/// Simulates head nodding or agreement gestures. Useful for confirmation
+/// feedback, avatars, and character animations.
+///
 /// @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,17 +33,25 @@
 
 ///
 /// Nod Animation
-/// Creates a nodding animation where the element rotates back and forth on the X-axis.
+/// ---------------------------------------------------------------------------
+/// Creates a nodding animation where the element rotates back and forth on
+/// the X-axis.
+///
 /// @name animate_nod
-/// @param {Number|String} $angle [10deg] - The angle of rotation for the nod.
-/// @param {Number|String} $duration [$animate_base_duration] - The duration of the nod animation.
-/// @param {String} $timing_function [ease-in-out] - The timing function for the nod animation.
-/// @param {Number|String} $iteration_count [$animate_base_iteration_count] - The number of iterations the animation will run.
+/// @param {Angle} $angle [10deg] - Angle of rotation for the nod
+/// @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
+///   .avatar {
+///     @include animate_nod;
+///   }
 ///
 @mixin animate_nod(
-    $angle: 10deg, 
-    $duration: $animate_base_duration, 
-    $timing_function: ease-in-out, 
+    $angle: 10deg,
+    $duration: $animate_base_duration,
+    $timing_function: ease-in-out,
     $iteration_count: $animate_base_iteration_count
 ) {
     @include animate_base(
@@ -56,31 +60,31 @@
         $timing_function,
         $iteration_count
     );
-    @keyframes animate_nod {
-        0%, 100% { transform: rotateX(0deg); }
-        50% { transform: rotateX($angle); }
-    }
+    @include keyframes_animate_nod($angle);
 }
 
 
-
-
-// Slow Nod Animation
-// ----------------------------------------------------------------------------
-
 ///
 /// Slow Nod Animation
-/// Creates a slower nodding animation with a more gradual movement on the X-axis.
+/// ---------------------------------------------------------------------------
+/// Creates a slower nodding animation with more gradual movement on the
+/// X-axis.
+///
 /// @name animate_nod_slow
-/// @param {Number|String} $angle [10deg] - The angle of rotation for the nod.
-/// @param {Number|String} $duration [$animate_base_duration_slow] - The duration of the nod animation.
-/// @param {String} $timing_function [ease-in-out] - The timing function for the nod animation.
-/// @param {Number|String} $iteration_count [$animate_base_iteration_count] - The number of iterations the animation will run.
+/// @param {Angle} $angle [10deg] - Angle of rotation for the nod
+/// @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
+///   .gentle-nod {
+///     @include animate_nod_slow;
+///   }
 ///
 @mixin animate_nod_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(
@@ -89,32 +93,27 @@
         $timing_function,
         $iteration_count
     );
-    @keyframes animate_nod_slow {
-        0%, 100% { transform: rotateX(0deg); }
-        50% { transform: rotateX($angle); }
-    }
+    @include keyframes_animate_nod_slow($angle);
 }
 
 
-
-// Nod with Bounce
-// ----------------------------------------------------------------------------
-
 ///
-/// Nod with Bounce
+/// Nod with Bounce Animation
+/// ---------------------------------------------------------------------------
 /// Creates a nodding animation combined with a bounce effect.
+///
 /// @name animate_nod_bounce
-/// @param {Number|String} $angle [10deg] - The angle of rotation for the nod.
-/// @param {Number|String} $bounce-height [5px] - The height of the bounce during the nod.
-/// @param {Number|String} $duration [$animate_base_duration] - The duration of the nod animation.
+/// @param {Angle} $angle [10deg] - Angle of rotation for the nod
+/// @param {Length} $bounce-height [5px] - Height of the bounce during the nod
+/// @param {Time} $duration [$animate_base_duration] - Animation duration
 /// @param {String} $timing_function [ease-in-out] - The timing function for the nod animation.
 /// @param {Number|String} $iteration_count [$animate_base_iteration_count] - The number of iterations the animation will run.
 ///
 @mixin animate_nod_bounce(
-    $angle: 10deg, 
+    $angle: 10deg,
     $bounce-height: 5px,
-    $duration: $animate_base_duration, 
-    $timing_function: ease-in-out, 
+    $duration: $animate_base_duration,
+    $timing_function: ease-in-out,
     $iteration_count: $animate_base_iteration_count
 ) {
     @include animate_base(
@@ -123,10 +122,7 @@
         $timing_function,
         $iteration_count
     );
-    @keyframes animate_nod_bounce {
-        0%, 100% { transform: rotateX(0deg) translateY(0); }
-        50% { transform: rotateX($angle) translateY(-$bounce-height); }
-    }
+    @include keyframes_animate_nod_bounce($angle, $bounce-height);
 }
 
 
@@ -134,7 +130,7 @@
 /// Continuous Nod
 /// Creates a continuous nodding animation where the element rotates back and
 /// forth without stopping.
-/// 
+///
 /// @name animate_nod_continuous
 /// @param {Number|String} $angle [10deg] - The angle of rotation for the nod.
 /// @param {Number|String} $duration [$animate_base_duration_fast] - The duration of the nod animation.
@@ -142,9 +138,9 @@
 /// @param {Number|String} $iteration_count [$animate_base_iteration_count] - The number of iterations the animation will run.
 ///
 @mixin animate_nod_continuous(
-    $angle: 10deg, 
-    $duration: $animate_base_duration_fast, 
-    $timing_function: linear, 
+    $angle: 10deg,
+    $duration: $animate_base_duration_fast,
+    $timing_function: linear,
     $iteration_count: $animate_base_iteration_count
 ) {
     @include animate_base(
@@ -153,9 +149,5 @@
         $timing_function,
         $iteration_count
     );
-    @keyframes animate_nod_continuous {
-        0% { transform: rotateX(0deg); }
-        25%, 75% { transform: rotateX($angle); }
-        50%, 100% { transform: rotateX(-$angle); }
-    }
+    @include keyframes_animate_nod_continuous($angle);
 }

package/dist/scss/mixins/animations/_pop.scss

@@ -0,0 +1,153 @@
+////
+///
+/// Pop Animations Mixin Module
+/// ===========================================================================
+///
+/// Provides quick pop-in/pop-out animations for element emphasis.
+/// Includes rapid and subtle variants with customizable scale factors.
+/// Perfect for button clicks, notifications, and micro-interactions.
+///
+/// @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
+// ============================================================================
+
+
+///
+/// Pop Animation
+/// ---------------------------------------------------------------------------
+/// Creates a pop animation where the element scales up and then back down.
+///
+/// @name animate_pop
+/// @param {Number} $scale [1.2] - Scale factor for the pop effect
+/// @param {Time} $duration [$animate_base_duration_fast] - Animation duration
+/// @param {String} $timing_function [ease-in-out] - Timing function
+///
+/// @example scss - Basic usage
+///   .button {
+///     @include animate_pop;
+///   }
+///
+@mixin animate_pop(
+    $scale: 1.2,
+    $duration: $animate_base_duration_fast,
+    $timing_function: ease-in-out
+) {
+    @include animate_base(
+        animate_pop,
+        $duration,
+        $timing_function,
+        1,
+    );
+    @include keyframes_animate_pop($scale);
+}
+
+
+///
+/// Rapid Pop Animation
+/// ---------------------------------------------------------------------------
+/// Creates a rapid pop animation with a quick scaling effect.
+///
+/// @name animate_pop_fast
+/// @param {Number} $scale [1.2] - Scale factor for the pop effect
+/// @param {Time} $duration [$animate_base_duration_fast] - Animation duration
+/// @param {String} $timing_function [ease-in-out] - Timing function
+///
+/// @example scss - Usage
+///   .icon {
+///     @include animate_pop_fast;
+///   }
+///
+@mixin animate_pop_fast(
+    $scale: 1.2,
+    $duration: $animate_base_duration_fast,
+    $timing_function: ease-in-out
+) {
+    @include animate_base(
+        animate_pop_fast,
+        $duration,
+        $timing_function,
+        1,
+    );
+    @include keyframes_animate_pop_fast($scale);
+}
+
+
+///
+/// Gentle Pop Animation
+/// ---------------------------------------------------------------------------
+/// Creates a gentler pop animation with a slower scaling effect.
+///
+/// @name animate_pop_slow
+/// @param {Number} $scale [1.1] - Scale factor for the pop effect
+/// @param {Time} $duration [$animate_base_duration] - Animation duration
+/// @param {String} $timing_function [ease-in-out] - Timing function
+///
+/// @example scss - Usage
+///   .soft-button {
+///     @include animate_pop_slow;
+///   }
+///
+@mixin animate_pop_slow(
+    $scale: 1.1,
+    $duration: $animate_base_duration,
+    $timing_function: ease-in-out
+) {
+    @include animate_base(
+        animate_pop_slow,
+        $duration,
+        $timing_function,
+        1,
+);
+    @include keyframes_animate_pop_slow($scale);
+}
+
+
+///
+/// Pop with Rotation Animation
+/// ---------------------------------------------------------------------------
+/// Creates a pop animation combined with a rotation effect.
+///
+/// @name animate_pop_rotate
+/// @param {Number} $scale [1.2] - Scale factor for the pop effect
+/// @param {Angle} $rotation_angle [10deg] - Rotation angle during the pop
+/// @param {Time} $duration [$animate_base_duration_fast] - Animation duration
+/// @param {String} $timing_function [ease-in-out] - Timing function
+///
+/// @example scss - Usage
+///   .fancy-button {
+///     @include animate_pop_rotate;
+///   }
+///
+@mixin animate_pop_rotate(
+    $scale: 1.2,
+    $rotation_angle: 10deg,
+    $duration: $animate_base_duration_fast,
+    $timing_function: ease-in-out
+) {
+    @include animate_base(
+        animate_pop_rotate,
+        $duration,
+        $timing_function,
+        1,
+    );
+    @include keyframes_animate_pop_rotate($scale, $rotation_angle);
+}