move.gl 0.0.1

package/scss/mixins/animations/_shake.scss

@@ -0,0 +1,182 @@
+// ============================================================================
+// Poster
+// ============================================================================
+
+////
+/// 
+/// Shake 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 "sass:math";
+@use "../dev" as *;
+@use "../variables" as *;
+@use "../keyframes" as *;
+@use "base" as *;
+
+
+// ============================================================================
+// Mixins
+// ============================================================================
+
+
+
+///
+/// Shake Animation
+/// Creates a shake animation with configurable amplitude, duration, timing function,
+/// and iteration count.
+/// @name animate_shake
+/// @param {Number} $amplitude [15deg] - The maximum angle of the shake.
+/// @param {Number} $duration [math.div($animate_base_duration, 2)] - The duration of the animation.
+/// @param {String} $timing_function [ease-in-out] - The timing function to use for the animation.
+/// @param {Number|String} $iteration_count [$animate_base_iteration_count] - The number of times the animation should run.
+///
+@mixin animate_shake(
+    $amplitude: 15deg, 
+    $duration: math.div($animate_base_duration, 2),
+    $timing_function: ease-in-out, 
+    $iteration_count: $animate_base_iteration_count
+) {
+    @include animate_base(
+        animate_shake,
+        $duration,
+        $timing_function,
+        $iteration_count,
+    );
+    @keyframes animate_shake {
+        0% { transform: rotate(-$amplitude); }
+        4% { transform: rotate($amplitude); }
+        8%, 24% { transform: rotate(-1.2 * $amplitude); }
+        12%, 28% { transform: rotate(1.2 * $amplitude); }
+        16% { transform: rotate(-1.4 * $amplitude); }
+        20% { transform: rotate(1.4 * $amplitude); }
+        32% { transform: rotate(-0.8 * $amplitude); }
+        36% { transform: rotate(0.8 * $amplitude); }
+        40%, 100% { transform: rotate(0deg); }
+    }
+}
+
+
+// Gentle Shake Animation
+// ----------------------------------------------------------------------------
+
+///
+/// Gentle Shake Animation
+/// Creates a gentle shake animation with a smaller amplitude, designed for
+/// slower and less intense shaking effects.
+/// @name animate_shake_slow
+/// @param {Number} $amplitude [10deg] - The maximum angle of the shake.
+/// @param {Number} $duration [math.div($animate_base_duration_slow, 2)] - The duration of the animation.
+/// @param {String} $timing_function [ease-in-out] - The timing function to use for the animation.
+/// @param {Number|String} $iteration_count [$animate_base_iteration_count] - The number of times the animation should run.
+///
+@mixin animate_shake_slow(
+    $amplitude: 10deg, 
+    $duration: math.div($animate_base_duration_slow, 2),
+    $timing_function: ease-in-out, 
+    $iteration_count: $animate_base_iteration_count
+) {
+    @include animate_base(
+        animate_shake_slow,
+        $duration,
+        $timing_function,
+        $iteration_count,
+    );
+    @keyframes animate_shake_slow {
+        0%, 100% { transform: rotate(0deg); }
+        10%, 30%, 50%, 70%, 90% { transform: rotate(-$amplitude); }
+        20%, 40%, 60%, 80% { transform: rotate($amplitude); }
+    }
+}
+
+
+
+// Horizontal Shake Animation
+// ----------------------------------------------------------------------------
+
+///
+/// Horizontal Shake Animation
+/// Creates a horizontal shake animation, moving the element side to side
+/// by a configurable distance.
+/// @name animate_shake_horizontal
+/// @param {Number} $distance [10px] - The distance to move the element.
+/// @param {Number} $duration [math.div($animate_base_duration, 2)] - The duration of the animation.
+/// @param {String} $timing_function [ease-in-out] - The timing function to use for the animation.
+/// @param {Number|String} $iteration_count [$animate_base_iteration_count] - The number of times the animation should run.
+///
+@mixin animate_shake_horizontal(
+    $distance: 10px, 
+    $duration: math.div($animate_base_duration, 2),
+    $timing_function: ease-in-out, 
+    $iteration_count: $animate_base_iteration_count
+) {
+    @include animate_base(
+        animate_shake_horizontal,
+        $duration,
+        $timing_function,
+        $iteration_count,
+    );
+    @keyframes animate_shake_horizontal {
+        0%, 100% { transform: translateX(0); }
+        25%, 75% { transform: translateX(-$distance); }
+        50% { transform: translateX($distance); }
+    }
+}
+
+
+
+// @-webkit-keyframes shake {
+//     from, 100% {
+//       -webkit-transform: translate3d(0, 0, 0);
+//       transform: translate3d(0, 0, 0);
+//     }
+  
+//     10%, 30%, 50%, 70%, 90% {
+//       -webkit-transform: translate3d(-10px, 0, 0);
+//       transform: translate3d(-10px, 0, 0);
+//     }
+  
+//     20%, 40%, 60%, 80% {
+//       -webkit-transform: translate3d(10px, 0, 0);
+//       transform: translate3d(10px, 0, 0);
+//     }
+//   }
+  
+//   @keyframes shake {
+//     from, 100% {
+//       -webkit-transform: translate3d(0, 0, 0);
+//       transform: translate3d(0, 0, 0);
+//     }
+  
+//     10%, 30%, 50%, 70%, 90% {
+//       -webkit-transform: translate3d(-10px, 0, 0);
+//       transform: translate3d(-10px, 0, 0);
+//     }
+  
+//     20%, 40%, 60%, 80% {
+//       -webkit-transform: translate3d(10px, 0, 0);
+//       transform: translate3d(10px, 0, 0);
+//     }
+//   }
+  
+//   .shake {
+//     -webkit-animation-name: shake;
+//     animation-name: shake;
+//   }
+  

package/scss/mixins/animations/_slide.scss

@@ -0,0 +1,294 @@
+// ============================================================================
+// Poster
+// ============================================================================
+
+////
+/// 
+/// Slide 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
+// ============================================================================
+
+
+
+
+
+///
+/// Slide Animation
+/// Creates a sliding animation in a specified direction.
+/// @name animate_slide
+/// @param {String} $direction [left] - The direction in which the element slides (left, right).
+/// @param {Number|String} $distance [100%] - The distance the element slides.
+/// @param {Number|String} $duration [$animate_base_duration] - The duration of the slide animation.
+/// @param {String} $timing_function [$animate_base_timing_function] - The timing function for the slide animation.
+/// @param {Number|String} $iteration_count [$animate_base_iteration_count] - The number of iterations the animation will run.
+///
+@mixin animate_slide(
+    $direction: left, 
+    $distance: 100%, 
+    $duration: $animate_base_duration, 
+    $timing-function: $animate_base_timing_function, 
+    $iteration-count: $animate_base_iteration_count
+) {
+    @include animate_base(
+        animate_slide,
+        $duration,
+        $timing-function,
+        $iteration-count,
+    );
+
+    $translate-value: if($direction == left, -1 * $distance, $distance);
+
+    @keyframes animate_slide {
+        0% { transform: translateX(0); }
+        100% { transform: translateX($translate-value); }
+    }
+}
+
+
+// Slide Up Animation
+// ----------------------------------------------------------------------------
+
+///
+/// Slide Up Animation
+/// Creates a slide up animation.
+/// @name animate_slide_up
+/// @param {Number|String} $distance [20px] - The distance the element slides up.
+/// @param {Number|String} $duration [$animate_base_duration] - The duration of the slide up animation.
+/// @param {String} $timing_function [ease-in-out] - The timing function for the slide up animation.
+/// @param {Number|String} $iteration_count [$animate_base_iteration_count] - The number of iterations the animation will run.
+///
+@mixin animate_slide_up(
+    $distance: 20px, 
+    $duration: $animate_base_duration, 
+    $timing_function: ease-in-out, 
+    $iteration_count: $animate_base_iteration_count
+) {
+    @include animate_base(
+        animate_slide_up,
+        $duration,
+        $timing_function,
+        $iteration_count,
+    );
+    @keyframes animate_slide_up {
+        0%, 100% { transform: translateY(0); }
+        50% { transform: translateY(-$distance); }
+    }
+}
+
+
+// Slide Down Animation
+// ----------------------------------------------------------------------------
+
+///
+/// Slide Down Animation
+/// Creates a slide down animation.
+/// @name animate_slide_down
+/// @param {Number|String} $distance [20px] - The distance the element slides down.
+/// @param {Number|String} $duration [$animate_base_duration] - The duration of the slide down animation.
+/// @param {String} $timing_function [ease-in-out] - The timing function for the slide down animation.
+/// @param {Number|String} $iteration_count [$animate_base_iteration_count] - The number of iterations the animation will run.
+///
+@mixin animate_slide_down(
+    $distance: 20px, 
+    $duration: $animate_base_duration, 
+    $timing_function: ease-in-out, 
+    $iteration_count: $animate_base_iteration_count
+) {
+    @include animate_base(
+        animate_slide_down,
+        $duration,
+        $timing_function,
+        $iteration_count,
+    );
+    @keyframes animate_slide_down {
+        0%, 100% { transform: translateY(0); }
+        50% { transform: translateY($distance); }
+    }
+}
+
+
+// Slide In Left Animation
+// ----------------------------------------------------------------------------
+
+///
+/// Slide In Left Animation
+/// Creates a slide in animation from the left.
+/// @name animate_slide_in_left
+/// @param {Number|String} $distance [100%] - The distance the element slides in from the left.
+/// @param {Number|String} $duration [$animate_base_duration] - The duration of the slide in animation.
+/// @param {String} $timing_function [ease-out] - The timing function for the slide in animation.
+///
+@mixin animate_slide_in_left(
+    $distance: 100%,
+    $duration:
+    $animate_base_duration,
+    $timing_function: ease-out
+) {
+    @include animate_base(
+        animate_slide_in_left,
+        $duration,
+        $timing_function,
+        1,
+    );
+    @keyframes animate_slide_in_left {
+        0% { transform: translateX(-$distance); }
+        100% { transform: translateX(0); }
+    }
+}
+
+
+// Slide In Right Animation
+// ----------------------------------------------------------------------------
+
+///
+/// Slide In Right Animation
+/// Creates a slide in animation from the right.
+/// @name animate_slide_in_right
+/// @param {Number|String} $distance [100%] - The distance the element slides in from the right.
+/// @param {Number|String} $duration [$animate_base_duration] - The duration of the slide in animation.
+/// @param {String} $timing_function [ease-out] - The timing function for the slide in animation.
+///
+@mixin animate_slide_in_right(
+    $distance: 100%,
+    $duration: $animate_base_duration,
+    $timing_function: ease-out
+) {
+    @include animate_base(
+        animate_slide_in_right,
+        $duration,
+        $timing_function,
+        1,
+    );
+    @keyframes animate_slide_in_right {
+        0% { transform: translateX($distance); }
+        100% { transform: translateX(0); }
+    }
+}
+
+// Slide Out Left Animation:
+// ----------------------------------------------------------------------------
+
+///
+/// Slide Out Left Animation
+/// Creates a slide out animation to the left.
+/// @name animate_slide_out_left
+/// @param {Number|String} $distance [100%] - The distance the element slides out to the left.
+/// @param {Number|String} $duration [$animate_base_duration] - The duration of the slide out animation.
+/// @param {String} $timing_function [ease-in] - The timing function for the slide out animation.
+///
+@mixin animate_slide_out_left(
+    $distance: 100%,
+    $duration: $animate_base_duration,
+    $timing_function: ease-in,
+) {
+    @include animate_base(
+        animate_slide_out_left,
+        $duration,
+        $timing_function,
+        1,
+    );
+    @keyframes animate_slide_out_left {
+        0% { transform: translateX(0); }
+        100% { transform: translateX(-$distance); }
+    }
+}
+
+
+
+
+// Slide Out Right Animation:
+// ----------------------------------------------------------------------------
+
+///
+/// Slide Out Right Animation
+/// Creates a slide out animation to the right.
+/// @name animate_slide_out_right
+/// @param {Number|String} $distance [100%] - The distance the element slides out to the right.
+/// @param {Number|String} $duration [$animate_base_duration] - The duration of the slide out animation.
+/// @param {String} $timing_function [ease-in] - The timing function for the slide out animation.
+///
+@mixin animate_slide_out_right(
+    $distance: 100%,
+    $duration: $animate_base_duration,
+    $timing_function: ease-in,
+) {
+    @include animate_base(
+        animate_slide_out_right,
+        $duration,
+        $timing_function,
+        1,
+    );
+    @keyframes animate_slide_out_right {
+        0% { transform: translateX(0); }
+        100% { transform: translateX($distance); }
+    }
+}
+
+
+
+
+// Slide In Fade Animation
+// ----------------------------------------------------------------------------
+
+///
+/// Slide In Fade Animation
+/// Creates a sliding animation with a fade-in effect.
+/// @name animate_slide_in_fade
+/// @param {String} $direction [left] - The direction from which the element slides in.
+/// @param {Number|String} $distance [100%] - The distance the element slides.
+/// @param {Number|String} $duration [$animate_base_duration] - The duration of the slide in fade animation.
+/// @param {String} $timing_function [ease-out] - The timing function for the slide in fade animation.
+///
+@mixin animate_slide_in_fade(
+    $direction: left, 
+    $distance: 100%, 
+    $duration: $animate_base_duration, 
+    $timing-function: ease-out
+) {
+    @include animate_base(
+        animate_slide_in_fade,
+        $duration,
+        $timing-function,
+        1,
+    );
+
+    // Calculate the translate value based on the direction
+    $translate-value: if($direction == left, -1 * $distance, $distance);
+
+    @keyframes animate_slide_in_fade {
+        0% { 
+            transform: translateX($translate-value); 
+            opacity: 0; 
+        }
+        100% { 
+            transform: translateX(0); 
+            opacity: 1; 
+        }
+    }
+}

package/scss/mixins/animations/_spin.scss

@@ -0,0 +1,219 @@
+// ============================================================================
+// Poster
+// ============================================================================
+
+////
+/// 
+/// Spin 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
+// ============================================================================
+
+
+///
+/// Spin Animation
+/// Creates a continuous spinning animation.
+/// @name animate_spin
+/// @param {Angle} $start_angle [0deg] - The starting angle for the spin.
+/// @param {Angle} $end_angle [360deg] - The ending angle for the spin.
+/// @param {Duration} $duration [$animate_base_duration] - The duration of the spin animation.
+/// @param {String} $timing_function [linear] - The timing function for the spin animation.
+/// @param {Number|String} $iteration_count [$animate_base_iteration_count] - The number of iterations the animation will run.
+///
+@mixin animate_spin(
+    $start_angle: 0deg,
+    $end_angle: 360deg,
+    $duration: $animate_base_duration,
+    $timing_function: linear,
+    $iteration_count: $animate_base_iteration_count
+) {
+    @include animate_base(
+        animate_spin,
+        $duration,
+        $timing_function,
+        $iteration_count,
+    );
+    @keyframes animate_spin {
+        from { transform: rotate($start_angle); }
+        to { transform: rotate($end_angle); }
+    }
+}
+
+
+// .spin {
+//     // position: absolute;
+//     // top: 50%;
+//     // left: 50%;
+//     // width: 120px;
+//     // height: 120px;
+//     // margin:-60px 0 0 -60px;
+//     -webkit-animation:spin 4s linear infinite;
+//     -moz-animation:spin 4s linear infinite;
+//     animation:spin 4s linear infinite;
+// }
+// @-moz-keyframes spin { 
+//     100% { -moz-transform: rotate(360deg); } 
+// }
+// @-webkit-keyframes spin { 
+//     100% { -webkit-transform: rotate(360deg); } 
+// }
+// @keyframes spin { 
+//     100% { 
+//         -webkit-transform: rotate(360deg); 
+//         transform:rotate(360deg); 
+//     } 
+// }
+
+// Spin Reverse Animation
+// ----------------------------------------------------------------------------
+
+///
+/// Spin Reverse Animation
+/// Creates a reverse spinning animation.
+/// @name animate_spin_reverse
+/// @param {Angle} $start_angle [360deg] - The starting angle for the reverse spin.
+/// @param {Angle} $end_angle [0deg] - The ending angle for the reverse spin.
+/// @param {Duration} $duration [$animate_base_duration] - The duration of the spin animation.
+/// @param {String} $timing_function [linear] - The timing function for the spin animation.
+///
+@mixin animate_spin_reverse(
+    $start_angle: 360deg, 
+    $end_angle: 0deg, 
+    $duration: $animate_base_duration,
+    $timing_function: linear
+) {
+    @include animate_base(
+        animate_spin_reverse,
+        $duration,
+        $timing_function,
+        infinite,
+    );
+    @keyframes animate_spin_reverse {
+        from { transform: rotate($start_angle); }
+        to { transform: rotate($end_angle); }
+    }
+}
+
+
+// Spin and Grow Animation
+// ----------------------------------------------------------------------------
+
+///
+/// Spin and Grow Animation
+/// Creates a spinning animation with a scaling effect.
+/// @name animate_spin_grow
+/// @param {Number} $scale [1.2] - The scale factor for the grow effect.
+/// @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_spin_grow(
+    $scale: 1.2, 
+    $duration: $animate_base_duration_slow,
+    $timing_function: ease-in-out, 
+    $iteration_count: $animate_base_iteration_count
+) {
+    @include animate_base(
+        animate_spin_grow,
+        $duration,
+        $timing_function,
+        $iteration_count
+    );
+    @keyframes animate_spin_grow {
+        0%, 100% { transform: scale(1) rotate(0deg); }
+        50% { transform: scale($scale) rotate(180deg); }
+    }
+}
+
+
+// Spin Pulse Animation
+// ----------------------------------------------------------------------------
+
+///
+/// Spin Pulse Animation
+/// Creates a spinning animation with a pulsing scale effect.
+/// @name animate_spin_pulse
+/// @param {Number} $scale_min [1] - The minimum scale for the pulse effect.
+/// @param {Number} $scale_max [1.1] - The maximum scale for the pulse effect.
+/// @param {Angle} $rotation_angle [360deg] - The angle for the rotation.
+/// @param {Duration} $duration [$animate_base_duration] - The duration of the animation.
+/// @param {String} $timing_function [linear] - 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_spin_pulse(
+    $scale_min: 1, 
+    $scale_max: 1.1, 
+    $rotation_angle: 360deg, 
+    $duration: $animate_base_duration, 
+    $timing_function: linear, 
+    $iteration_count: $animate_base_iteration_count
+) {
+    @include animate_base(
+        animate_spin_pulse,
+        $duration,
+        $timing_function,
+        $iteration_count,
+    );
+    @keyframes animate_spin_pulse {
+        0%, 100% { transform: rotate(0deg) scale($scale_min); }
+        50% { transform: rotate($rotation_angle) scale($scale_max); }
+    }
+}
+
+
+// Spin and Flip Animation
+// ----------------------------------------------------------------------------
+
+///
+/// Spin and Flip Animation
+/// Creates a spinning animation with a flipping effect.
+/// @name animate_spin_flip
+/// @param {Angle} $rotation_angle [360deg] - The angle for the rotation.
+/// @param {Angle} $flip_angle [180deg] - The angle for the flip effect.
+/// @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_spin_flip(
+    $rotation_angle: 360deg, 
+    $flip-angle: 180deg, 
+    $duration: $animate_base_duration, 
+    $timing_function: ease-in-out, 
+    $iteration_count: $animate_base_iteration_count
+) {
+    @include animate_base(
+        animate_spin_flip,
+        $duration,
+        $timing_function,
+        $iteration_count,
+    );
+    @keyframes animate_spin_flip {
+        0%, 100% { transform: rotateY(0deg) rotate($rotation_angle); }
+        50% { transform: rotateY($flip-angle) rotate($rotation_angle); }
+    }
+}