move.gl 0.0.1 → 0.0.2

package/src/scss/mixins/animations/_swing.scss

@@ -0,0 +1,245 @@
+////
+///
+/// Swing Animations Mixin 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
+/// @access public
+///
+////
+
+
+// ============================================================================
+// Use
+// ============================================================================
+
+@use "../../dev" as *;
+@use "../../variables" as *;
+@use "../keyframes" as *;
+@use "base" as *;
+
+
+// ============================================================================
+// Mixins
+// ============================================================================
+
+
+///
+/// Swing Animation
+/// ---------------------------------------------------------------------------
+/// Creates a swinging motion animation.
+///
+/// @name animate_swing
+/// @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,
+    $iteration_count: $animate_base_iteration_count
+) {
+    @include animate_base(
+        animate_swing,
+        $duration,
+        $timing_function,
+        $iteration_count,
+    );
+    @keyframes animate_swing {
+        0%, 100% { transform: rotate(0deg); }
+        50% { transform: rotate($angle); }
+    }
+}
+
+.animate_swing {
+    @include animate_swing(15deg);
+}
+
+
+// Gentle Swing Animation
+// ----------------------------------------------------------------------------
+///
+/// Gentle Swing Animation
+/// Creates a slower, more subtle swinging motion.
+/// @name animate_swing_slow
+/// @param {Angle} $angle [10deg] - The maximum angle to swing.
+/// @param {Duration} $duration [$animate_base_duration_slow] - 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.
+///
+@mixin animate_swing_slow(
+    $angle: 10deg,
+    $duration: $animate_base_duration_slow,
+    $timing_function: ease-in-out,
+    $iteration_count: $animate_base_iteration_count
+) {
+    @include animate_base(
+        animate_swing_slow,
+        $duration,
+        $timing_function,
+        $iteration_count,
+    );
+    @keyframes animate_swing_slow {
+        0%, 100% { transform: rotate(0deg); }
+        50% { transform: rotate($angle); }
+    }
+}
+
+.animate_swing_slow {
+    @include animate_swing_slow();
+}
+
+
+// Rapid Swing Animation
+// ----------------------------------------------------------------------------
+
+
+///
+/// Rapid Swing Animation
+/// Creates a faster and more exaggerated swinging motion.
+/// @name animate_swing_fast
+/// @param {Angle} $angle [20deg] - The maximum angle to swing.
+/// @param {Duration} $duration [$animate_base_duration_fast] - 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.
+///
+@mixin animate_swing_fast(
+    $angle: 20deg,
+    $duration: $animate_base_duration_fast,
+    $timing_function: ease-in-out,
+    $iteration_count: $animate_base_iteration_count
+) {
+    @include animate_base(
+        animate_swing_fast,
+        $duration,
+        $timing_function,
+        $iteration_count,
+    );
+    @keyframes animate_swing_fast {
+        0%, 100% { transform: rotate(0deg); }
+        50% { transform: rotate($angle); }
+    }
+}
+
+.animate_swing_fast {
+    @include animate_swing_fast();
+}
+
+
+// Swing with Fade Animation
+// ----------------------------------------------------------------------------
+
+
+///
+/// Swing with Fade Animation
+/// Creates a swinging motion with a fading effect.
+/// @name animate_swing_fade
+/// @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.
+///
+@mixin animate_swing_fade(
+    $angle: 15deg,
+    $duration: $animate_base_duration,
+    $timing_function: ease-in-out,
+    $iteration_count: $animate_base_iteration_count
+) {
+    @include animate_base(
+        animate_swing_fade,
+        $duration,
+        $timing_function,
+        $iteration_count,
+    );
+    @keyframes animate_swing_fade {
+        0%, 100% {
+            transform: rotate(0deg);
+            opacity: 1;
+        }
+        50% {
+            transform: rotate($angle);
+            opacity: 0.5;
+        }
+    }
+}
+
+.animate_swing_fade {
+    @include animate_swing_fade();
+}
+
+
+
+// @-webkit-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);
+//     }
+//   }
+
+//   @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;
+//   }

package/src/scss/mixins/animations/_tada.scss

@@ -0,0 +1,235 @@
+////
+///
+/// Tada Animations Mixin Module
+/// ===========================================================================
+///
+/// Provides celebratory "tada" animations with combined scaling and rotation.
+/// Creates exciting reveal effects for achievements and highlights. Perfect
+/// for success states, rewards, and dramatic presentations.
+///
+/// @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
+// ============================================================================
+
+
+///
+/// Tada Animation
+/// ---------------------------------------------------------------------------
+/// Creates a "tada" effect with scaling and rotating.
+///
+/// @name animate_tada
+/// @param {Number} $scale [1.1] - Scale factor for the animation
+/// @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
+///   .achievement {
+///     @include animate_tada;
+///   }
+///
+@mixin animate_tada(
+    $scale: 1.1,
+    $duration: $animate_base_duration * 2,
+    $timing_function: ease-in-out,
+    $iteration_count: $animate_base_iteration_count
+) {
+    @include animate_base(
+        animate_tada,
+        $duration,
+        $timing_function,
+        $iteration_count,
+    );
+    @keyframes animate_tada {
+        0%, 100% { transform: scale(1); }
+        10%, 20% { transform: scale(0.9) rotate(-3deg); }
+        30%, 50%, 70%, 90% { transform: scale($scale) rotate(3deg); }
+        40%, 60%, 80% { transform: scale($scale) rotate(-3deg); }
+    }
+}
+
+
+
+
+// Gentle Tada Animation
+// ----------------------------------------------------------------------------
+
+///
+/// Gentle Tada Animation
+/// A more subtle version of the Tada animation.
+/// @name animate_tada_slow
+/// @param {Number} $scale [1.05] - The scale factor for the animation.
+/// @param {Duration} $duration [$animate_base_duration_slow/// 2] - The duration of the animation.
+/// @param {String} $timing_function [ease-in-out] - The timing function for the animation.
+/// @param {Number|String} $iteration_count [$animate_base_iteration_count] - The number of iterations the animation will run.
+///
+@mixin animate_tada_slow(
+    $scale: 1.05,
+    $duration: $animate_base_duration_slow * 2,
+    $timing_function: ease-in-out,
+    $iteration_count: $animate_base_iteration_count
+) {
+    @include animate_base(
+        animate_tada_slow,
+        $duration,
+        $timing_function,
+        $iteration_count,
+    );
+    @keyframes animate_tada_slow {
+        0%, 100% { transform: scale(1); }
+        10%, 20% { transform: scale(0.95) rotate(-2deg); }
+        30%, 50%, 70%, 90% { transform: scale($scale) rotate(2deg); }
+        40%, 60%, 80% { transform: scale($scale) rotate(-2deg); }
+    }
+}
+
+
+
+// Rapid Tada Animation
+// ----------------------------------------------------------------------------
+
+///
+/// Rapid Tada Animation
+/// A faster and more exaggerated version of the Tada animation.
+/// @name animate_tada_fast
+/// @param {Number} $scale [1.15] - The scale factor for the animation.
+/// @param {Duration} $duration [$animate_base_duration] - The duration of the animation.
+/// @param {String} $timing_function [ease-in-out] - The timing function for the animation.
+/// @param {Number|String} $iteration_count [$animate_base_iteration_count] - The number of iterations the animation will run.
+///
+@mixin animate_tada_fast(
+    $scale: 1.15,
+    $duration: $animate_base_duration,
+    $timing_function: ease-in-out,
+    $iteration_count: $animate_base_iteration_count
+) {
+    @include animate_base(
+        animate_tada_fast,
+        $duration,
+        $timing_function,
+        $iteration_count,
+    );
+    @keyframes animate_tada_fast {
+        0%, 100% { transform: scale(1); }
+        10%, 20% { transform: scale(0.85) rotate(-4deg); }
+        30%, 50%, 70%, 90% { transform: scale($scale) rotate(4deg); }
+        40%, 60%, 80% { transform: scale($scale) rotate(-4deg); }
+    }
+}
+
+
+// Tada with Fade Animation
+// ----------------------------------------------------------------------------
+
+///
+/// Tada with Fade Animation
+/// Adds a fading effect to the Tada animation.
+/// @name animate_tada_fade
+/// @param {Number} $scale [1.1] - The scale factor for the animation.
+/// @param {Duration} $duration [$animate_base_duration/// 2] - The duration of the animation.
+/// @param {String} $timing_function [ease-in-out] - The timing function for the animation.
+/// @param {Number|String} $iteration_count [$animate_base_iteration_count] - The number of iterations the animation will run.
+///
+@mixin animate_tada_fade(
+    $scale: 1.1,
+    $duration: $animate_base_duration * 2,
+    $timing_function: ease-in-out,
+    $iteration_count: $animate_base_iteration_count
+) {
+    @include animate_base(
+        animate_tada_fade,
+        $duration,
+        $timing_function,
+        $iteration_count,
+    );
+    @keyframes animate_tada_fade {
+        0%, 100% {
+            transform: scale(1);
+            opacity: 1;
+        }
+        50% {
+            transform: scale($scale) rotate(3deg);
+            opacity: 0.5;
+        }
+    }
+}
+
+
+
+// @-webkit-keyframes tada {
+//     from {
+//       -webkit-transform: scale3d(1, 1, 1);
+//       transform: scale3d(1, 1, 1);
+//     }
+
+//     10%, 20% {
+//       -webkit-transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg);
+//       transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg);
+//     }
+
+//     30%, 50%, 70%, 90% {
+//       -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
+//       transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
+//     }
+
+//     40%, 60%, 80% {
+//       -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
+//       transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
+//     }
+
+//     100% {
+//       -webkit-transform: scale3d(1, 1, 1);
+//       transform: scale3d(1, 1, 1);
+//     }
+//   }
+
+//   @keyframes tada {
+//     from {
+//       -webkit-transform: scale3d(1, 1, 1);
+//       transform: scale3d(1, 1, 1);
+//     }
+
+//     10%, 20% {
+//       -webkit-transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg);
+//       transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg);
+//     }
+
+//     30%, 50%, 70%, 90% {
+//       -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
+//       transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
+//     }
+
+//     40%, 60%, 80% {
+//       -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
+//       transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
+//     }
+
+//     100% {
+//       -webkit-transform: scale3d(1, 1, 1);
+//       transform: scale3d(1, 1, 1);
+//     }
+//   }
+
+//   .tada {
+//     -webkit-animation-name: tada;
+//     animation-name: tada;
+//   }

package/src/scss/mixins/animations/_twist.scss

@@ -0,0 +1,162 @@
+////
+///
+/// Twist Animations Mixin Module
+/// ===========================================================================
+///
+/// Provides twisting animations that combine rotation with scale changes.
+/// Creates dynamic, spiraling effects. Useful for loading indicators,
+/// transitions, and attention-grabbing emphasis 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
+// ============================================================================
+
+
+///
+/// Twist Animation
+/// ---------------------------------------------------------------------------
+/// Creates a twist effect with scaling and rotating.
+///
+/// @name animate_twist
+/// @param {Number} $scale_end [0.9] - Scale factor at midpoint of animation
+/// @param {Angle} $rotation [10deg] - Rotation angle at midpoint
+/// @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
+///   .spinner {
+///     @include animate_twist;
+///   }
+///
+@mixin animate_twist(
+    $scale_end: 0.9,
+    $rotation: 10deg,
+    $duration: $animate_base_duration,
+    $timing_function: ease-in-out,
+    $iteration_count: $animate_base_iteration_count
+) {
+    @include animate_base(
+        animate_twist,
+        $duration,
+        $timing_function,
+        $iteration_count,
+    );
+    @include keyframes_animate_twist($scale_end, $rotation);
+}
+
+
+
+// Gentle Twist Animation
+// ----------------------------------------------------------------------------
+
+///
+/// Gentle Twist Animation
+/// A slower and subtler version of the Twist animation.
+/// @name animate_twist_slow
+/// @param {Number} $scale_end [0.95] - The scale factor at the midpoint of the animation.
+/// @param {Angle} $rotation [5deg] - The rotation angle at the midpoint of the animation.
+/// @param {Duration} $duration [$animate_base_duration_slow] - The duration of the animation.
+/// @param {String} $timing_function [ease-in-out] - The timing function for the animation.
+/// @param {Number|String} $iteration_count [$animate_base_iteration_count] - The number of iterations the animation will run.
+///
+@mixin animate_twist_slow(
+    $scale_end: 0.95,
+    $rotation: 5deg,
+    $duration: $animate_base_duration_slow,
+    $timing_function: ease-in-out,
+    $iteration_count: $animate_base_iteration_count
+) {
+    @include animate_base(
+        animate_twist_slow,
+        $duration,
+        $timing_function,
+        $iteration_count,
+    );
+    @include keyframes_animate_twist_slow($scale_end, $rotation);
+}
+
+
+
+// Rapid Twist Animation
+// ----------------------------------------------------------------------------
+
+///
+/// Rapid Twist Animation
+/// A faster and more intense version of the Twist animation.
+/// @name animate_twist_fast
+/// @param {Number} $scale_end [0.85] - The scale factor at the midpoint of the animation.
+/// @param {Angle} $rotation [15deg] - The rotation angle at the midpoint of the animation.
+/// @param {Duration} $duration [$animate_base_duration_fast] - The duration of the animation.
+/// @param {String} $timing_function [ease-in-out] - The timing function for the animation.
+/// @param {Number|String} $iteration_count [$animate_base_iteration_count] - The number of iterations the animation will run.
+///
+@mixin animate_twist_fast(
+    $scale_end: 0.85,
+    $rotation: 15deg,
+    $duration: $animate_base_duration_fast,
+    $timing_function: ease-in-out,
+    $iteration_count: $animate_base_iteration_count
+) {
+    @include animate_base(
+        animate_twist_fast,
+        $duration,
+        $timing_function,
+        $iteration_count,
+    );
+    @include keyframes_animate_twist_fast($scale_end, $rotation);
+}
+
+
+
+// Twist with Color Change
+// ----------------------------------------------------------------------------
+
+///
+/// Twist with Color Change Animation
+/// Adds a color transition to the Twist animation.
+/// @name animate_twist_color
+/// @param {Number} $scale_end [0.9] - The scale factor at the midpoint of the animation.
+/// @param {Angle} $rotation [10deg] - The rotation angle at the midpoint of the animation.
+/// @param {Duration} $duration [$animate_base_duration] - The duration of the animation.
+/// @param {String} $timing_function [ease-in-out] - The timing function for the animation.
+/// @param {Number|String} $iteration_count [$animate_base_iteration_count] - The number of iterations the animation will run.
+/// @param {Color} $color_start [$animate_base_color_start] - The starting color of the animation.
+/// @param {Color} $color_end [$animate_base_color_end] - The ending color of the animation.
+///
+@mixin animate_twist_color(
+    $scale_end: 0.9,
+    $rotation: 10deg,
+    $duration: $animate_base_duration,
+    $timing_function: ease-in-out,
+    $iteration_count: $animate_base_iteration_count,
+    $color_start: $animate_base_color_start,
+    $color_end: $animate_base_color_end,
+) {
+    @include animate_base(
+        animate_twist_color,
+        $duration,
+        $timing_function,
+        $iteration_count,
+    );
+    @include keyframes_animate_twist_color($scale_end, $rotation, $color_start, $color_end);
+}