move.gl 0.0.1

package/scss/mixins/animations/_twist.scss

@@ -0,0 +1,177 @@
+// ============================================================================
+// Poster
+// ============================================================================
+
+////
+/// 
+/// Twist 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
+// ============================================================================
+
+
+///
+/// Twist Animation
+/// Creates a twist effect with scaling and rotating.
+/// @name animate_twist
+/// @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.
+///
+@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,
+    );
+    @keyframes animate_twist {
+        0%, 100% { transform: scale(1) rotate(0deg); }
+        50% { transform: scale($scale_end) rotate($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,
+    );
+    @keyframes animate_twist_slow {
+        0%, 100% { transform: scale(1) rotate(0deg); }
+        50% { transform: scale($scale_end) rotate($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,
+    );
+    @keyframes animate_twist_fast {
+        0%, 100% { transform: scale(1) rotate(0deg); }
+        50% { transform: scale($scale_end) rotate($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,
+    );
+    @keyframes animate_twist_color {
+        0%, 100% { 
+            transform: scale(1) rotate(0deg); 
+            color: $color_start;
+        }
+        50% { 
+            transform: scale($scale_end) rotate($rotation); 
+            color: $color_end;
+        }
+    }
+}

package/scss/mixins/animations/_wave.scss

@@ -0,0 +1,166 @@
+// ============================================================================
+// Poster
+// ============================================================================
+
+////
+/// 
+/// Wave 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
+// ============================================================================
+
+
+
+
+///
+/// Wave Animation
+/// Creates a wave effect by rotating an element back and forth.
+/// @name animate_wave
+/// @param {Angle} $angle [20deg] - The maximum rotation angle during the wave.
+/// @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_wave(
+    $angle: 20deg, 
+    $duration: $animate_base_duration, 
+    $timing_function: ease-in-out, 
+    $iteration_count: $animate_base_iteration_count
+) {
+    @include animate_base(
+        animate_wave,
+        $duration,
+        $timing_function,
+        $iteration_count,
+    );
+    @keyframes animate_wave {
+        0%, 100% { transform: rotate(0deg); }
+        50% { transform: rotate($angle); }
+    }
+}
+
+
+// Gentle Wave Animation
+// ----------------------------------------------------------------------------
+
+///
+/// Gentle Wave Animation
+/// A slower and subtler wave animation.
+/// @name animate_wave_slow
+/// @param {Angle} $angle [10deg] - The maximum rotation angle during the wave.
+/// @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_wave_slow(
+    $angle: 10deg, 
+    $duration: $animate_base_duration_slow,
+    $timing_function: ease-in-out, 
+    $iteration_count: $animate_base_iteration_count
+) {
+    @include animate_base(
+        animate_wave_slow,
+        $duration,
+        $timing_function,
+        $iteration_count,
+    );
+    @keyframes animate_wave_slow {
+        0%, 100% { transform: rotate(0deg); }
+        50% { transform: rotate($angle); }
+    }
+}
+
+
+
+// Rapid Wave Animation
+// ----------------------------------------------------------------------------
+
+///
+/// Rapid Wave Animation
+/// A faster and more intense wave animation.
+/// @name animate_wave_fast
+/// @param {Angle} $angle [30deg] - The maximum rotation angle during the wave.
+/// @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_wave_fast(
+    $angle: 30deg, 
+    $duration: $animate_base_duration_fast, 
+    $timing_function: ease-in-out, 
+    $iteration_count: $animate_base_iteration_count
+) {
+    @include animate_base(
+        animate_wave_fast,
+        $duration,
+        $timing_function,
+        $iteration_count,
+    );
+    @keyframes animate_wave_fast {
+        0%, 100% { transform: rotate(0deg); }
+        50% { transform: rotate($angle); }
+    }
+}
+
+
+
+// Wave with Fade Animation
+// ----------------------------------------------------------------------------
+
+///
+/// Wave with Fade Animation
+/// A wave animation combined with a fading effect.
+/// @name animate_wave_fade
+/// @param {Angle} $angle [20deg] - The maximum rotation angle during the wave.
+/// @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_wave_fade(
+    $angle: 20deg, 
+    $duration: $animate_base_duration, 
+    $timing_function: ease-in-out, 
+    $iteration_count: $animate_base_iteration_count
+) {
+    @include animate_base(
+        animate_wave_fade
+        $duration,
+        $timing_function,
+        $iteration_count,
+    );
+    @keyframes animate_wave_fade {
+        0%, 100% { 
+            transform: rotate(0deg); 
+            opacity: 1;
+        }
+        50% { 
+            transform: rotate($angle); 
+            opacity: 0.5;
+        }
+    }
+}

package/scss/mixins/animations/_wobble.scss

@@ -0,0 +1,254 @@
+// ============================================================================
+// Poster
+// ============================================================================
+
+////
+/// 
+/// Wobble 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
+// ============================================================================
+
+
+
+
+
+///
+/// Wobble Animation
+/// Creates a wobble effect by rotating an element back and forth.
+/// @name animate_wobble
+/// @param {Angle} $angle [5deg] - The maximum rotation angle during the wobble.
+/// @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_wobble(
+    $angle: 5deg, 
+    $duration: $animate_base_duration, 
+    $timing_function: ease-in-out, 
+    $iteration_count: $animate_base_iteration_count
+) {
+    @include animate_base(
+        animate_wobble,
+        $duration,
+        $timing_function,
+        $iteration_count,
+    );
+    @keyframes animate_wobble {
+        0%, 100% { transform: rotate(0deg); }
+        25% { transform: rotate(-$angle); }
+        50% { transform: rotate($angle); }
+        75% { transform: rotate(-$angle); }
+    }
+}
+
+
+// Gentle Wobble Animation
+// ----------------------------------------------------------------------------
+
+///
+/// Gentle Wobble Animation
+/// A slower and subtler wobble animation.
+/// @name animate_wobble_slow
+/// @param {Angle} $angle [3deg] - The maximum rotation angle during the wobble.
+/// @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_wobble_slow(
+    $angle: 3deg, 
+    $duration: $animate_base_duration_slow,
+    $timing_function: ease-in-out, 
+    $iteration_count: $animate_base_iteration_count
+) {
+    @include animate_base(
+        animate_wobble_slow,
+        $duration,
+        $timing_function,
+        $iteration_count,
+    );
+    @keyframes animate_wobble_slow {
+        0%, 100% { transform: rotate(0deg); }
+        25% { transform: rotate(-$angle); }
+        50% { transform: rotate($angle); }
+        75% { transform: rotate(-$angle); }
+    }
+}
+
+
+// Rapid Wobble Animation
+// ----------------------------------------------------------------------------
+
+///
+/// Rapid Wobble Animation
+/// A faster and more intense wobble animation.
+/// @name animate_wobble_fast
+/// @param {Angle} $angle [10deg] - The maximum rotation angle during the wobble.
+/// @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_wobble_fast(
+    $angle: 10deg, 
+    $duration: $animate_base_duration_fast, 
+    $timing_function: ease-in-out, 
+    $iteration_count: $animate_base_iteration_count
+) {
+    @include animate_base(
+        animate_wobble_fast,
+        $duration,
+        $timing_function,
+        $iteration_count,
+    );
+    @keyframes animate_wobble_fast {
+        0%, 100% { transform: rotate(0deg); }
+        25% { transform: rotate(-$angle); }
+        50% { transform: rotate($angle); }
+        75% { transform: rotate(-$angle); }
+    }
+}
+
+
+// Wobble with Scale Animation
+// ----------------------------------------------------------------------------
+
+///
+/// Wobble with Scale Animation
+/// A wobble animation combined with a scaling effect.
+/// @name animate_wobble_scale
+/// @param {Angle} $angle [5deg] - The maximum rotation angle during the wobble.
+/// @param {Number} $scale [1.1] - The scale factor during the wobble.
+/// @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_wobble_scale(
+    $angle: 5deg, 
+    $scale: 1.1,
+    $duration: $animate_base_duration, 
+    $timing_function: ease-in-out, 
+    $iteration_count: $animate_base_iteration_count
+) {
+    @include animate_base(
+        animate_wobble_scale,
+        $duration,
+        $timing_function,
+        $iteration_count,
+    );
+    @keyframes animate_wobble_scale {
+        0%, 100% { transform: scale(1) rotate(0deg); }
+        25% { transform: scale($scale) rotate(-$angle); }
+        50% { transform: scale($scale) rotate($angle); }
+        75% { transform: scale($scale) rotate(-$angle); }
+    }
+}
+
+
+
+
+// originally authored by Nick Pettit - https://github.com/nickpettit/glide
+
+// @-webkit-keyframes wobble {
+//     from {
+//       -webkit-transform: none;
+//       transform: none;
+//     }
+  
+//     15% {
+//       -webkit-transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg);
+//       transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg);
+//     }
+  
+//     30% {
+//       -webkit-transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg);
+//       transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg);
+//     }
+  
+//     45% {
+//       -webkit-transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg);
+//       transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg);
+//     }
+  
+//     60% {
+//       -webkit-transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg);
+//       transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg);
+//     }
+  
+//     75% {
+//       -webkit-transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg);
+//       transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg);
+//     }
+  
+//     100% {
+//       -webkit-transform: none;
+//       transform: none;
+//     }
+//   }
+  
+//   @keyframes wobble {
+//     from {
+//       -webkit-transform: none;
+//       transform: none;
+//     }
+  
+//     15% {
+//       -webkit-transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg);
+//       transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg);
+//     }
+  
+//     30% {
+//       -webkit-transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg);
+//       transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg);
+//     }
+  
+//     45% {
+//       -webkit-transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg);
+//       transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg);
+//     }
+  
+//     60% {
+//       -webkit-transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg);
+//       transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg);
+//     }
+  
+//     75% {
+//       -webkit-transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg);
+//       transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg);
+//     }
+  
+//     100% {
+//       -webkit-transform: none;
+//       transform: none;
+//     }
+//   }
+  
+//   .wobble {
+//     -webkit-animation-name: wobble;
+//     animation-name: wobble;
+//   }
+