move.gl 0.0.1

package/scss/mixins/animations/_sway.scss

@@ -0,0 +1,167 @@
+// ============================================================================
+// Poster
+// ============================================================================
+
+////
+/// 
+/// Sway Animations Mixin Module
+/// ===========================================================================
+/// 
+/// This module ...
+/// 
+/// 
+/// @group Animations
+/// @author Scape Agency
+/// @link https://move.gl
+/// @since 0.1.0 initial release
+/// @todo None
+/// @access public
+/// 
+////
+
+
+// ============================================================================
+// Use
+// ============================================================================
+
+@use "../dev" as *;
+@use "../variables" as *;
+@use "../keyframes" as *;
+@use "base" as *;
+
+
+// ============================================================================
+// Mixins
+// ============================================================================
+
+
+
+
+///
+/// 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.
+///
+@mixin animate_sway(
+    $angle: 5deg, 
+    $duration: $animate_base_duration * 2,
+    $timing_function: ease-in-out, 
+    $iteration_count: $animate_base_iteration_count
+) {
+    @include animate_base(
+        animate_sway,
+        $duration,
+        $timing_function,
+        $iteration_count,
+    );
+    @keyframes animate_sway {
+        0%, 100% { transform: rotate(0deg); }
+        50% { transform: rotate($angle); }
+    }
+}
+
+
+
+// Gentle Sway Animation
+// ----------------------------------------------------------------------------
+
+///
+/// Gentle Sway Animation
+/// Creates a slower, more subtle swaying motion.
+/// @name animate_sway_slow
+/// @param {Angle} $angle [3deg] - The maximum angle to sway.
+/// @param {Duration} $duration [$animate_base_duration_slow/// 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.
+///
+@mixin animate_sway_slow(
+    $angle: 3deg, 
+    $duration: $animate_base_duration_slow * 2,
+    $timing_function: ease-in-out, 
+    $iteration_count: $animate_base_iteration_count
+) {
+    @include animate_base(
+        animate_sway_slow,
+        $duration,
+        $timing_function,
+        $iteration_count,
+    );
+    @keyframes animate_sway_slow {
+        0%, 100% { transform: rotate(0deg); }
+        50% { transform: rotate($angle); }
+    }
+}
+
+
+
+// Rapid Sway Animation
+// ----------------------------------------------------------------------------
+
+///
+/// Rapid Sway Animation
+/// Creates a faster and more exaggerated swaying motion.
+/// @name animate_sway_fast
+/// @param {Angle} $angle [10deg] - The maximum angle to sway.
+/// @param {Duration} $duration [$animate_base_duration_fast/// 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.
+///
+@mixin animate_sway_fast(
+    $angle: 10deg, 
+    $duration: $animate_base_duration_fast * 2,
+    $timing_function: ease-in-out, 
+    $iteration_count: $animate_base_iteration_count
+) {
+    @include animate_base(
+        animate_sway_fast,
+        $duration,
+        $timing_function,
+        $iteration_count,
+    );
+    @keyframes animate_sway_fast {
+        0%, 100% { transform: rotate(0deg); }
+        50% { transform: rotate($angle); }
+    }
+}
+
+
+
+// Sway with Fade Animation
+// ----------------------------------------------------------------------------
+
+///
+/// Sway with Fade Animation
+/// Creates a swaying motion with a fading effect.
+/// @name animate_sway_fade
+/// @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.
+///
+@mixin animate_sway_fade(
+    $angle: 5deg, 
+    $duration: $animate_base_duration * 2,
+    $timing_function: ease-in-out, 
+    $iteration_count: $animate_base_iteration_count
+) {
+    @include animate_base(
+        animate_sway_fade,
+        $duration,
+        $timing_function,
+        $iteration_count,
+    );
+    @keyframes animate_sway_fade {
+        0%, 100% { 
+            transform: rotate(0deg); 
+            opacity: 1;
+        }
+        50% { 
+            transform: rotate($angle); 
+            opacity: 0.5;
+        }
+    }
+}

package/scss/mixins/animations/_swing.scss

@@ -0,0 +1,247 @@
+// ============================================================================
+// Poster
+// ============================================================================
+
+////
+/// 
+/// Swing Animations Mixin Module
+/// ===========================================================================
+/// 
+/// This module ...
+/// 
+/// 
+/// @group Animations
+/// @author Scape Agency
+/// @link https://move.gl
+/// @since 0.1.0 initial release
+/// @todo None
+/// @access public
+/// 
+////
+
+
+// ============================================================================
+// Use
+// ============================================================================
+
+@use "../dev" as *;
+@use "../variables" as *;
+@use "../keyframes" as *;
+@use "base" as *;
+
+
+// ============================================================================
+// Mixins
+// ============================================================================
+
+
+
+
+// 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.
+///
+@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/scss/mixins/animations/_tada.scss

@@ -0,0 +1,233 @@
+// ============================================================================
+// Poster
+// ============================================================================
+
+////
+/// 
+/// Tada Animations Mixin Module
+/// ===========================================================================
+/// 
+/// This module ...
+/// 
+/// 
+/// @group Animations
+/// @author Scape Agency
+/// @link https://move.gl
+/// @since 0.1.0 initial release
+/// @todo None
+/// @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] - 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(
+    $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;
+//   }