move.gl 0.0.1 → 0.0.2

package/src/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/src/scss/mixins/animations/_nod.scss

@@ -0,0 +1,153 @@
+////
+///
+/// Nod Animations Mixin 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
+/// @access public
+///
+////
+
+
+// ============================================================================
+// Use
+// ============================================================================
+
+@use "../../dev" as *;
+@use "../../variables" as *;
+@use "../keyframes" as *;
+@use "base" as *;
+
+
+// ============================================================================
+// Mixins
+// ============================================================================
+
+
+///
+/// Nod Animation
+/// ---------------------------------------------------------------------------
+/// Creates a nodding animation where the element rotates back and forth on
+/// the X-axis.
+///
+/// @name animate_nod
+/// @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,
+    $iteration_count: $animate_base_iteration_count
+) {
+    @include animate_base(
+        animate_nod,
+        $duration,
+        $timing_function,
+        $iteration_count
+    );
+    @include keyframes_animate_nod($angle);
+}
+
+
+///
+/// Slow Nod Animation
+/// ---------------------------------------------------------------------------
+/// Creates a slower nodding animation with more gradual movement on the
+/// X-axis.
+///
+/// @name animate_nod_slow
+/// @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,
+    $duration: $animate_base_duration_slow,
+    $timing_function: ease-in-out,
+    $iteration_count: $animate_base_iteration_count
+) {
+    @include animate_base(
+        animate_nod_slow,
+        $duration,
+        $timing_function,
+        $iteration_count
+    );
+    @include keyframes_animate_nod_slow($angle);
+}
+
+
+///
+/// Nod with Bounce Animation
+/// ---------------------------------------------------------------------------
+/// Creates a nodding animation combined with a bounce effect.
+///
+/// @name animate_nod_bounce
+/// @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,
+    $bounce-height: 5px,
+    $duration: $animate_base_duration,
+    $timing_function: ease-in-out,
+    $iteration_count: $animate_base_iteration_count
+) {
+    @include animate_base(
+        animate_nod_bounce,
+        $duration,
+        $timing_function,
+        $iteration_count
+    );
+    @include keyframes_animate_nod_bounce($angle, $bounce-height);
+}
+
+
+///
+/// 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.
+/// @param {String} $timing_function [linear] - 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_continuous(
+    $angle: 10deg,
+    $duration: $animate_base_duration_fast,
+    $timing_function: linear,
+    $iteration_count: $animate_base_iteration_count
+) {
+    @include animate_base(
+        animate_nod_continuous,
+        $duration,
+        $timing_function,
+        $iteration_count
+    );
+    @include keyframes_animate_nod_continuous($angle);
+}

package/src/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);
+}