move.gl 0.0.1

package/scss/mixins/animations/_lightspeed.scss

@@ -0,0 +1,130 @@
+// ============================================================================
+// Poster
+// ============================================================================
+
+////
+/// 
+/// Lightspeed 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
+// ============================================================================
+
+
+
+
+
+// @-webkit-keyframes lightSpeedIn {
+//     from {
+//       -webkit-transform: translate3d(100%, 0, 0) skewX(-30deg);
+//       transform: translate3d(100%, 0, 0) skewX(-30deg);
+//       opacity: 0;
+//     }
+  
+//     60% {
+//       -webkit-transform: skewX(20deg);
+//       transform: skewX(20deg);
+//       opacity: 1;
+//     }
+  
+//     80% {
+//       -webkit-transform: skewX(-5deg);
+//       transform: skewX(-5deg);
+//       opacity: 1;
+//     }
+  
+//     100% {
+//       -webkit-transform: none;
+//       transform: none;
+//       opacity: 1;
+//     }
+//   }
+  
+//   @keyframes lightSpeedIn {
+//     from {
+//       -webkit-transform: translate3d(100%, 0, 0) skewX(-30deg);
+//       transform: translate3d(100%, 0, 0) skewX(-30deg);
+//       opacity: 0;
+//     }
+  
+//     60% {
+//       -webkit-transform: skewX(20deg);
+//       transform: skewX(20deg);
+//       opacity: 1;
+//     }
+  
+//     80% {
+//       -webkit-transform: skewX(-5deg);
+//       transform: skewX(-5deg);
+//       opacity: 1;
+//     }
+  
+//     100% {
+//       -webkit-transform: none;
+//       transform: none;
+//       opacity: 1;
+//     }
+//   }
+  
+//   .lightSpeedIn {
+//     -webkit-animation-name: lightSpeedIn;
+//     animation-name: lightSpeedIn;
+//     -webkit-animation-timing-function: ease-out;
+//     animation-timing-function: ease-out;
+//   }
+  
+//   @-webkit-keyframes lightSpeedOut {
+//     from {
+//       opacity: 1;
+//     }
+  
+//     100% {
+//       -webkit-transform: translate3d(100%, 0, 0) skewX(30deg);
+//       transform: translate3d(100%, 0, 0) skewX(30deg);
+//       opacity: 0;
+//     }
+//   }
+  
+//   @keyframes lightSpeedOut {
+//     from {
+//       opacity: 1;
+//     }
+  
+//     100% {
+//       -webkit-transform: translate3d(100%, 0, 0) skewX(30deg);
+//       transform: translate3d(100%, 0, 0) skewX(30deg);
+//       opacity: 0;
+//     }
+//   }
+  
+//   .lightSpeedOut {
+//     -webkit-animation-name: lightSpeedOut;
+//     animation-name: lightSpeedOut;
+//     -webkit-animation-timing-function: ease-in;
+//     animation-timing-function: ease-in;
+//   }
+  

package/scss/mixins/animations/_nod.scss

@@ -0,0 +1,161 @@
+// ============================================================================
+// Poster
+// ============================================================================
+
+////
+/// 
+/// Nod 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
+// ============================================================================
+
+
+///
+/// Nod Animation
+/// Creates a nodding animation where the element rotates back and forth on the X-axis.
+/// @name animate_nod
+/// @param {Number|String} $angle [10deg] - The angle of rotation for the nod.
+/// @param {Number|String} $duration [$animate_base_duration] - The duration of the nod animation.
+/// @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(
+    $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
+    );
+    @keyframes animate_nod {
+        0%, 100% { transform: rotateX(0deg); }
+        50% { transform: rotateX($angle); }
+    }
+}
+
+
+
+
+// Slow Nod Animation
+// ----------------------------------------------------------------------------
+
+///
+/// Slow Nod Animation
+/// Creates a slower nodding animation with a more gradual movement on the X-axis.
+/// @name animate_nod_slow
+/// @param {Number|String} $angle [10deg] - The angle of rotation for the nod.
+/// @param {Number|String} $duration [$animate_base_duration_slow] - The duration of the nod animation.
+/// @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_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
+    );
+    @keyframes animate_nod_slow {
+        0%, 100% { transform: rotateX(0deg); }
+        50% { transform: rotateX($angle); }
+    }
+}
+
+
+
+// Nod with Bounce
+// ----------------------------------------------------------------------------
+
+///
+/// Nod with Bounce
+/// Creates a nodding animation combined with a bounce effect.
+/// @name animate_nod_bounce
+/// @param {Number|String} $angle [10deg] - The angle of rotation for the nod.
+/// @param {Number|String} $bounce-height [5px] - The height of the bounce during the nod.
+/// @param {Number|String} $duration [$animate_base_duration] - The duration of the nod animation.
+/// @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
+    );
+    @keyframes animate_nod_bounce {
+        0%, 100% { transform: rotateX(0deg) translateY(0); }
+        50% { transform: rotateX($angle) translateY(-$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
+    );
+    @keyframes animate_nod_continuous {
+        0% { transform: rotateX(0deg); }
+        25%, 75% { transform: rotateX($angle); }
+        50%, 100% { transform: rotateX(-$angle); }
+    }
+}

package/scss/mixins/animations/_pop.scss

@@ -0,0 +1,150 @@
+// ============================================================================
+// Poster
+// ============================================================================
+
+////
+/// 
+/// Pop 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
+// ============================================================================
+
+
+///
+/// Pop Animation
+/// Creates a pop animation where the element scales up and then back down.
+/// @name animate_pop
+/// @param {Number} $scale [1.2] - The scale factor for the pop effect.
+/// @param {Number|String} $duration [$animate_base_duration_fast] - The duration of the pop animation.
+/// @param {String} $timing_function [ease-in-out] - The timing function for the pop animation.
+///
+@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,
+    );
+    @keyframes animate_pop {
+        0%, 100% { transform: scale(1); }
+        50% { transform: scale($scale); }
+    }
+}
+
+
+// Rapid Pop Animation
+// ----------------------------------------------------------------------------
+
+///
+/// Rapid Pop Animation
+/// Creates a rapid pop animation with a quick scaling effect.
+/// @name animate_pop_fast
+/// @param {Number} $scale [1.2] - The scale factor for the pop effect.
+/// @param {Number|String} $duration [$animate_base_duration_fast] - The duration of the pop animation.
+/// @param {String} $timing_function [ease-in-out] - The timing function for the pop animation.
+///
+@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,
+    );
+    @keyframes animate_pop_fast {
+        0%, 100% { transform: scale(1); }
+        50% { transform: scale($scale); }
+    }
+}
+
+
+// Gentle Pop Animation
+// ----------------------------------------------------------------------------
+
+///
+/// Gentle Pop Animation
+/// Creates a gentler pop animation with a slower scaling effect.
+/// @name animate_pop_slow
+/// @param {Number} $scale [1.1] - The scale factor for the pop effect.
+/// @param {Number|String} $duration [$animate_base_duration] - The duration of the pop animation.
+/// @param {String} $timing_function [ease-in-out] - The timing function for the pop animation.
+///
+@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,
+);
+    @keyframes animate_pop_slow {
+        0%, 100% { transform: scale(1); }
+        50% { transform: scale($scale); }
+    }
+}
+
+
+// Pop with Rotation
+// ----------------------------------------------------------------------------
+
+///
+/// Pop with Rotation
+/// Creates a pop animation combined with a rotation effect.
+/// @name animate_pop_rotate
+/// @param {Number} $scale [1.2] - The scale factor for the pop effect.
+/// @param {Number|String} $rotation_angle [10deg] - The rotation angle during the pop effect.
+/// @param {Number|String} $duration [$animate_base_duration_fast] - The duration of the pop animation.
+/// @param {String} $timing_function [ease-in-out] - The timing function for the pop animation.
+///
+@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,
+    );
+    @keyframes animate_pop_rotate {
+        0%, 100% { transform: scale(1) rotate(0); }
+        50% { transform: scale($scale) rotate($rotation_angle); }
+    }
+}

package/scss/mixins/animations/_pulse.scss

@@ -0,0 +1,213 @@
+// ============================================================================
+// Poster
+// ============================================================================
+
+////
+/// 
+/// Pulse 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
+// ============================================================================
+
+
+///
+/// Pulse Animation
+/// Creates a pulsing animation where the element scales between the minimum
+/// and maximum scale values.
+/// 
+/// @name animate_pulse
+/// @param {Number} $scale_min [1] - The minimum scale of the pulse.
+/// @param {Number} $scale_max [1.1] - The maximum scale of the pulse.
+/// @param {Number|String} $duration [$animate_base_duration] - The duration of the pulse animation.
+/// @param {String} $timing_function [linear] - The timing function for the pulse animation.
+/// @param {Number|String} $iteration_count [$animate_base_iteration_count] - The number of iterations the animation will run.
+///
+@mixin animate_pulse(
+    $scale_min: 1, 
+    $scale_max: 1.1, 
+    $duration: $animate_base_duration, 
+    $timing_function: linear, 
+    $iteration_count: $animate_base_iteration_count
+) {
+    @include animate_base(
+        animate_pulse,
+        $duration,
+        $timing_function,
+        $iteration_count
+    );
+    @keyframes animate_pulse {
+        0%, 100% { transform: scale($scale_min); }
+        50% { transform: scale($scale_max); }
+    }
+}
+
+
+
+// Slow Pulse Animation
+// ----------------------------------------------------------------------------
+
+///
+/// Slow Pulse Animation
+/// Creates a slower pulsing animation with more subtle scale changes.
+/// @name animate_pulse_slow
+/// @param {Number} $scale_min [0.95] - The minimum scale of the pulse.
+/// @param {Number} $scale_max [1.05] - The maximum scale of the pulse.
+/// @param {Number|String} $duration [$animate_base_duration_slow] - The duration of the pulse animation.
+/// @param {String} $timing_function [ease-in-out] - The timing function for the pulse animation.
+/// @param {Number|String} $iteration_count [$animate_base_iteration_count] - The number of iterations the animation will run.
+///
+@mixin animate_pulse_slow(
+    $scale_min: 0.95, 
+    $scale_max: 1.05, 
+    $duration: $animate_base_duration_slow,
+    $timing_function: ease-in-out, 
+    $iteration_count: $animate_base_iteration_count
+) {
+    @include animate_base(
+        animate_pulse_slow,
+        $duration,
+        $timing_function,
+        $iteration_count
+    );
+    @keyframes animate_pulse_slow {
+        0%, 100% { transform: scale($scale_min); }
+        50% { transform: scale($scale_max); }
+    }
+}
+
+
+
+// Rapid Pulse Animation
+// ----------------------------------------------------------------------------
+
+///
+/// Rapid Pulse Animation
+/// Creates a rapid pulsing animation with more pronounced scale changes.
+/// @name animate_pulse_fast
+/// @param {Number} $scale_min [0.9] - The minimum scale of the pulse.
+/// @param {Number} $scale_max [1.2] - The maximum scale of the pulse.
+/// @param {Number|String} $duration [$animate_base_duration_fast] - The duration of the pulse animation.
+/// @param {String} $timing_function [ease-in-out] - The timing function for the pulse animation.
+/// @param {Number|String} $iteration_count [$animate_base_iteration_count] - The number of iterations the animation will run.
+///
+@mixin animate_pulse_fast(
+    $scale_min: 0.9, 
+    $scale_max: 1.2, 
+    $duration: $animate_base_duration_fast,
+    $timing_function: ease-in-out, 
+    $iteration_count: $animate_base_iteration_count
+) {
+    @include animate_base(
+        animate_pulse_fast,
+        $duration,
+        $timing_function,
+        $iteration_count
+    );
+    @keyframes animate_pulse_fast {
+        0%, 100% { transform: scale($scale_min); }
+        50% { transform: scale($scale_max); }
+    }
+}
+
+
+
+// Color Pulse Animation
+// ----------------------------------------------------------------------------
+
+///
+/// Color Pulse Animation
+/// Creates a pulsing animation where the background color of the element transitions between two colors.
+/// @name animate_pulse_color
+/// @param {Color} $color_start [$animate_base_color_start] - The starting color of the pulse.
+/// @param {Color} $color_end [$animate_base_color_end] - The ending color of the pulse.
+/// @param {Number|String} $duration [$animate_base_duration] - The duration of the pulse animation.
+/// @param {String} $timing_function [ease-in-out] - The timing function for the pulse animation.
+/// @param {Number|String} $iteration_count [$animate_base_iteration_count] - The number of iterations the animation will run.
+///
+@mixin animate_pulse_color(
+    $color_start: $animate_base_color_start, 
+    $color_end: $animate_base_color_end, 
+    $duration: $animate_base_duration, 
+    $timing_function: ease-in-out, 
+    $iteration_count: $animate_base_iteration_count
+) {
+    @include animate_base(
+        animate_pulse_color,
+        $duration,
+        $timing_function,
+        $iteration_count
+    );
+    @keyframes animate_pulse_color {
+        0%, 100% { background-color: $color_start; }
+        50% { background-color: $color_end; }
+    }
+}
+
+
+
+// originally authored by Nick Pettit - https://github.com/nickpettit/glide
+
+// @-webkit-keyframes pulse {
+//     from {
+//       -webkit-transform: scale3d(1, 1, 1);
+//       transform: scale3d(1, 1, 1);
+//     }
+  
+//     50% {
+//       -webkit-transform: scale3d(1.05, 1.05, 1.05);
+//       transform: scale3d(1.05, 1.05, 1.05);
+//     }
+  
+//     100% {
+//       -webkit-transform: scale3d(1, 1, 1);
+//       transform: scale3d(1, 1, 1);
+//     }
+//   }
+  
+//   @keyframes pulse {
+//     from {
+//       -webkit-transform: scale3d(1, 1, 1);
+//       transform: scale3d(1, 1, 1);
+//     }
+  
+//     50% {
+//       -webkit-transform: scale3d(1.05, 1.05, 1.05);
+//       transform: scale3d(1.05, 1.05, 1.05);
+//     }
+  
+//     100% {
+//       -webkit-transform: scale3d(1, 1, 1);
+//       transform: scale3d(1, 1, 1);
+//     }
+//   }
+  
+//   .pulse {
+//     -webkit-animation-name: pulse;
+//     animation-name: pulse;
+//   }
+